Живая обложка ВКонтакте: размеры, как сделать живые обои, шаблоны

Технические требования — размер, формат и разрешение обложки

Обложки сообщества доступны только в приложениях для iOS и Android. В мобильной и веб-версии ВКонтакте обычная обложка отображается в статичном виде. Размеры для макета живой обложки такие же, как и для формата истории:

• Размер изображения/изображения: 1080×1920 (по вертикали) или другие в соотношении сторон 9:16, общий вес 5 изображений – не более 20 МБ, формат – PNG, JPG или GIF.
• Видео: формат MP4 (кодек h264 aac), 15-60 кадров в секунду; продолжительность — до 30 секунд; размер — до 20 Мб.

Обратите внимание на зоны, выделенные на планировке. Когда пользователь заходит в ваше сообщество, он увидит только центральную часть обложки (синий прямоугольник 850х912 пикселей). Поэтому постарайтесь разместить всю самую важную информацию в этой области, ближе к центру.

На крышке тоже есть видимая область — синий квадрат и розовый прямоугольник под ним. Синяя часть, кроме правого и левого полей, будет видна полностью, а розовая часть будет перекрываться именем и аватаркой сообщества. Вся крышка открывается только при нажатии на нее.

Расширения для браузеров на компьютере

Расширение для браузера необходимо установить один раз. Затем в несколько кликов вы сможете изменить оформление ВК – вставить готовую заставку или загрузить свою. Некоторые расширения предлагают больше настроек оформления: цвет блоков сайта и текста, прозрачность, яркость фона, виджет часов и многое другое.

VK Styles

VK Styles — это надстройка с широким функционалом, позволяющая максимально тонко настроить свой стиль ВК. Здесь вы можете выбрать фон из сотен готовых вариантов, а также загрузить собственную заставку (любое изображение из интернета — вам нужна только ссылка на него). Поддерживаются живые обои.

Кроме того, вы можете выбрать шрифт, цвет и размер; нюансы отдельных блоков сайта; цвета границ блоков и многое другое. Еще один интересный вариант – часы. Вы можете вставить виджет с текущим временем и датой прямо в интерфейс ВК.

Дополнение можно установить в Google Chrome, Opera, браузер Яндекс (с тем же магазином Chrome) и Mozilla Firefox.

Как установить расширение и добавить новую тему в ВК:

1. Перейдите на веб-сайт интернет-магазина Google Chrome или Mozilla Firefox. Нажмите «Установить» или «Добавить в Firefox».
2. Подтвердите установку плагина в окне дополнения.
3. После успешной установки на панели справа от адресной строки появится иконка Стили ВК. Нажмите на нее — интерфейс ВК сразу потемнеет. Пожалуй, этого уже будет достаточно в плане дизайна.
4. Если вы хотите настроить внешний вид страницы, щелкните значок переключателя в правом верхнем углу.
5. Откроется панель Стили ВКонтакте. Здесь вы можете указать свой любимый цвет фона, заголовка, меню и цвет текста; включить тень для текста и блоков; установить стиль блока.
6. Чтобы установить новый цвет для блоков сайта, нажмите соответствующую опцию. Выберите оттенок, затем укажите его насыщенность, легкость и непрозрачность.
7. При желании включите «Визуализатор». Настройте нужные вам параметры: дрожание, размытие или масштабирование фона, свечение, фильтр RGB.
8. Настройте шрифт текста — его тип, размер.
9. Если вам не нужен монохромный фон интерфейса, установите фоновое изображение. Вы можете выбрать изображение из предложенных или вставить ссылку на изображение из Интернета.
10. Чтобы настроить заставку, нажмите шестеренку в разделе «Фон». Укажите размер изображения, его положение. Включите размытие фона или блоков сайта, настройте параметры заставки: контрастность, яркость, насыщенность.
11. Чтобы добавить часы в интерфейс ВК, активируйте соответствующий тумблер. Укажите шрифт, цвет. Выберите, что дополнительно будет отображаться на экране: дата, секунды, тень от цифр, 12-часовой формат времени. Если вы хотите переместить часы в другую область на странице, установите флажок «Перетащить». Чтобы увидеть еще больше заставок для интерфейса, нажмите «Темы для ВК» или «Живые обои».
12. Выберите понравившееся фото в альбоме сообщества VK Style. Откройте рисунок.
13. Нажмите «Еще» и выберите «Установить как обои». Перезагрузите страницу ВК, если изменения не сохраняются автоматически.

Stylish

С Stylish вы можете менять дизайн не только в ВК, но и на других сайтах. Здесь вы также можете настроить цветовые схемы, шрифты, анимацию. В каталоге много готовых заставок — каждый найдет альтернативу на свой вкус.

Разработчики также готовы создать новый стиль на основе любимого фильма, праздника и любой другой темы. Для этого напишите в стильное сообщество на форуме (раздел Стильные пожелания»).

Те, кто знаком с языком CSS, могут сами создавать темы для популярных веб-сайтов с помощью плагина Stylish.

Расширение можно установить в Google Chrome, Яндекс Браузер, Mozilla Firefox.

Единственный минус плагина в том, что интерфейс частично на английском языке, но мы поможем разобраться:

1. Зайдите в интернет-магазин Google Chrome (через одноименный браузер, Оперу или Яндекс) и нажмите «Установить». Подтвердите установку.
2. Нажмите на значок расширения с буквой «S» в правом верхнем углу.
3. Нажмите «Принять», чтобы принять условия использования плагина.
4. откройте стильный сайт. Перейдите в раздел Стили ВК на левой панели.
5. Выберите свой любимый предмет.
6. Нажмите «Установить стиль».
7. Дождитесь завершения установки темы. Кнопка становится зеленой. То есть «Стиль установлен».
8. Вы также можете установить новые обои с помощью панели расширения. Чтобы его открыть, нажмите на иконку с буквой «S» справа от адресной строки браузера. В разделе «Доступные стили» выберите интересующую вас тему и нажмите «Установить стиль». На панели плагинов также есть кнопка «Stylish On». С его помощью вы можете отключить расширения для сайта, а затем снова включить их при необходимости — с помощью клавиши «Стильный Off».
9. Во вкладке «Установить» стили» будут содержаться все темы, которые вы ранее интегрировали в ВК. С помощью специального тумблера вы можете отключить текущую заставку, а с помощью корзины удалить ее из списка ранее установленных заставок.

Фон Вконтакте

Фон Вконтакте — более простой вариант оформления страницы. Здесь не так много настроек, как в VK Styles. Вы можете использовать любое изображение в Интернете в качестве заставки. Поддерживаются анимированные обои. Если вы хотите постоянное изменение дизайна, вы можете настроить график смены заставок.

Фон Вконтакте доступен для Яндекс Браузера и Opera.

Как работать с расширением:

1. Зайдите в интернет-магазин Opera и нажмите кнопку «Добавить» (в Яндекс.Браузере или Opera — в зависимости от того, какой браузер вы используете в данный момент). Подтвердите установку и дождитесь ее завершения.
2. Нажмите кнопку «ВКонтакте», появившуюся справа от поля адреса. Вы можете сразу выбрать понравившийся фон из представленных, либо настроить расписание автоматической смены фона: интервал и порядок изображений в списке. Если вы хотите, чтобы на заставке было только одно изображение, снимите флажок «Изменить фон».
3. Чуть ниже на той же панели можно выбрать параметры обводки сайта: цвет, толщину линии, уровень прозрачности и размытие. Здесь вы также можете настроить цвет и прозрачность веб-сайта или полностью отключить расширение, если это необходимо.
4. Если вы хотите поставить в качестве фона изображение из интернета, вам необходимо предварительно узнать разрешение экрана вашего ПК. Сделать это можно очень быстро — с помощью сервиса Яндекс. Просто перейдите по ссылке и найдите свой размер в разделе «Разрешение экрана».
5. Далее откройте Яндекс Картинки или Google Картинки. Введите тему заставки + размер экрана.
6. Выберите заставку. Открой это.
7. Если это Яндекс Картинки, нажмите «Открыть», чтобы просмотреть изображение в полном размере в новой вкладке браузера. Если расширение изображения и вашего экрана не совпадают, нажмите на текущий размер изображения и в выпадающем меню укажите нужное значение.
8. Щелкните по изображению правой кнопкой мыши. В меню выберите «Установить как обои ВКонтакте».

На телефоне

Сменить дизайн можно не только на сайте ВК, но и в приложении. И здесь можно задать разные стили даже для отдельных диалогов, а не только для всего интерфейса в целом.

Официальное приложение «Вконтакте»

В последнее время в фирменной программе Вконтакте (Android, iOS) появилось множество настроек дизайна интерфейса. Теперь вы можете наслаждаться тёмной темой без установки стороннего клиента социальной сети.

Кроме того, можно внести изменения в оформление мессенджера (все диалоговые окна или отдельный чат): установить тему из предложенных ВК или добавить обои из собственной галереи.

Расскажу как изменить стиль официальной программы:

1. Запустите приложение. На вкладке «Главная» нажмите на аватарку в левом верхнем углу.
2. Заходим в настройки через меню программы.
3. Перейдите в раздел «Внешний вид».
4. Выберите общую тему программы — светлую или темную. Также можно настроить расписание — когда будет включаться темное оформление. Например, только вечером. Либо можно настроить автоматическую смену темы — тогда программа сама решит, когда менять дизайн. Чтобы настроить внешний вид всех диалоговых окон, перейдите в раздел «Дизайн». Также включите тумблер «Показывать дизайн в чате» — на случай, если вы захотите изменить тему в отдельном диалоге.
5. Выберите одну из тем на нижней панели. Или нажмите «Создать», чтобы настроить свой дизайн.
6. Для создания индивидуальной темы выберите фон разговоров — из изображений, представленных на панели, или из Галереи (первая кнопка с пустым изображением).
7. Выберите цвет сообщений на второй вкладке.
8. Если вам нужно изменить оформление всего одного диалога, зайдите в него и нажмите вверху на имя собеседника. Выберите «Изменить внешний вид» в меню».
9. Выберите тему из предложенных или создайте свою собственную — загрузите обои или изображение из Галереи, затем выберите цвет для сообщений.

Сторонние клиенты социальной сети

Общаться, слушать музыку и смотреть видео можно не только с помощью официальной программы Вконтакте. Эту социальную сеть можно использовать через другие приложения от сторонних разработчиков. Обычно они имеют даже более широкий функционал, чем официальная программа, включая больше возможностей для настройки внешнего вида.

Контакт

Контакт работает как на Android, так и на iPhone. В нем можно скрыть свой статус «онлайн» (будь инкогнито, если не хочешь, чтобы тебя кто-то видел в ВК) или, наоборот, включить «всегда онлайн», чтобы люди знали, что ты всегда онлайн, даже если оконные программы теперь закрыты.

В приложении можно добавить несколько аккаунтов ВК и быстро переключаться между ними с помощью специального меню. Вы можете установить PIN-код на всю программу или только на отдельные чаты (чтобы никто случайно не увидел, что вы общаетесь с определенными людьми).

В дизайне можно изменить фон для всех или для отдельных диалогов. Вы можете настроить размер текста и прозрачность сообщений, цвета панелей приложений и заметок в чатах. Распространенных тем интерфейса всего три — день, ночь и ночной AMOLED.

Расскажу как изменить внешний вид контакта:

1. Запустите программу и войдите в нее — через официальное приложение Вконтакте (если оно установлено на вашем смартфоне) или с помощью веб-браузера.
2. Нажмите «Принять», чтобы принять условия использования приложения.
3. Если вы выбрали вход через официальную программу и сохранили в ней запись, просто нажмите «Разрешить». Или введите данные для авторизации и нажмите «Войти».
4. откройте меню приложения с помощью трех строк вверху слева.
5. Перейдите в настройки.
6. Разрешите приложению доступ к памяти вашего устройства.
7. откройте раздел «Дизайн».
8. Выберите основную тему — день, ночь или ночной AMOLED. Если вы хотите изменить фон диалоговых окон, нажмите «Фон сообщения».
9. Включите тумблер и выберите фотографию или изображение в галерее.
10. Далее устанавливаем размер текста, при желании уровень прозрачности для сообщений. Выберите основной цвет копий и оттенок по желанию. В блоке «Предварительный просмотр» вы можете оценить, как будут выглядеть диалоги при изменении дизайна.
11. Также укажите цвет панелей приложения и его оттенок при необходимости. Выберите цвет текста в диалогах. Включите прозрачную строку состояния или цветное меню навигации.Читайте также: Как поставить верхнюю запятую в ВК?

Kate Mobile

Официально Kate Mobile можно скачать только на Android. Версии для iOS нет. Это приложение имеет несколько настроек для оформления. Есть много общих тем интерфейса: светлые, темные, разных цветов, а самая интересная — прозрачная. Если его установить, то заставка программы станет фоном рабочего стола. Но вы также можете добавить собственное фоновое изображение — фотографию или картинку.

Доступно расписание ночной темы — программа сама включит ее в указанное время. Вы можете установить фоновое изображение для всех или отдельных диалогов и выбрать цвета для панелей приложения (цвет основной тени и активной вкладки).

Kate Mobile также позволяет включать режим инкогнито, работать с несколькими учетными записями и сохранять загрузку фотографий для снижения трафика. Единственным недостатком приложения является наличие рекламы.

Чтобы изменить тему в Kate Mobile:

1. Запустите программу и введите данные для авторизации.
2. откройте меню приложения с помощью трех точек в правом верхнем углу.
3. Перейдите в настройки.
4. Перейдите в раздел «Внешний вид».
5. откройте список тем для оформления.
6. Выберите тему. Если вы хотите поместить свое изображение на фон, выберите прозрачную тему.
7. Появится предупреждение о том, что программу необходимо перезапустить. Нажмите «ОК». Закройте приложение и снова откройте его, чтобы сохранить изменения дизайна.
8. В этом же блоке параметров «Внешний вид» можно изменить оттенки панелей — шапки и активной вкладки (раздел «Настройка цветов»).
9. После внесения дальнейших изменений также перезапустите программу и оцените интерфейс. Если вы установите прозрачную тему, фон рабочего стола станет фоновым изображением.
10. Чтобы установить обои в качестве заставки, перейдите в раздел «Обои». Установите флажок рядом с первым пунктом и нажмите «Выбрать изображение». Укажите фотографию или изображение из Галереи устройств. Включите размытие, если хотите.
11. В разделе Ночная тема вы можете настроить расписание для активации темного режима.
12. В блоке «Внешний вид» есть несколько настроек оформления. С их помощью можно включить круглые аватарки, большую аватарку, цветную иконку в уведомлении и другие опции.
13. Чтобы изменить внешний вид отдельного диалогового окна, зайдите в него, нажмите на три точки вверху справа и выберите «Фон сообщения».
14. Введите фотографию из Галереи или приложения Google Фото».

Вконтакте Amberfog

В Amberfog Вконтакте можно настроить цветовую тему и загрузить фоновые изображения для диалогов (всех или некоторых) — готовое изображение из Галереи или снимок, сделанный камерой устройства. Вы не сможете установить заставку для всей программы — такой опции нет.

В этом клиенте доступен стелс-режим и навсегда онлайн. Вы можете ввести PIN-код и использовать несколько учетных записей с быстрым переключением. Единственный, но существенный минус программы в том, что здесь нельзя слушать музыку из-за нарушения прав музыкантов.

Как украсить интерфейс Amberfog Вконтакте:

1. откройте программу и нажмите «Войти в ВК».
2. Введите данные для авторизации и нажмите «Войти». Или войдите в свою учетную запись, используя онлайн-форму.
3. откройте меню приложения с помощью трех строк вверху слева.
4. Зайдите в настройки приложения.
5. откройте раздел «Дизайн».
6. Перейти к списку тем.
7. Отметьте галочкой тот цвет, который вам больше всего нравится. Это изменит цвет панелей в приложении.
8. Чтобы изменить фон диалоговых окон, установите флажок рядом с одноименным пунктом и нажмите «Выбрать изображение». Укажите источник фото или изображения — Галерея или камера смартфона.
9. Чтобы изменить фон только одного чата, откройте его и нажмите на три точки в правом верхнем углу. Выберите в меню «Фон вызова». Загрузите готовое изображение из Галереи или сделайте снимок камерой телефона. При необходимости установите флажок «Прозрачные сообщения» в том же диалоговом меню.

Если вы хотите изменить фон сайта ВК, скачайте специальное расширение для браузера — это единственный способ настроить дизайн социальной сети на вашем компьютере. Что касается мобильной программы ВК, то здесь все гораздо проще.

В нем уже есть настройки оформления — как для всего интерфейса в целом, так и для мессенджера и отдельных чатов. Кроме того, вы можете установить один из сторонних клиентов ВК — в них возможностей для настройки дизайна даже больше, чем в официальной программе.

Как создать живую обложку для сообщества ВК

Создать живую обложку можно в любом онлайн графическом редакторе или приложении. В качестве примера возьмем SUPA и Canva.

Редактор SUPA

Пример №1: Давайте максимально упростим кейс по доставке еды. Нам нужно разместить изображение и текст на шаблоне.

Создайте макет. Заходим на сайт SUPA, регистрируемся и фотографируемся. Выберите свой размер и установите его на 1080×1920.

Добавьте фон. Нажмите «Изменить фон» в макете. Затем загрузите свой фон или найдите подходящий через поиск. Например, мы добавили градиент к фону.

Сделайте выбор. Помните видимую и невидимую часть крышки, о которых мы писали выше? Давайте пометим их, чтобы пользователи могли видеть то, что мы хотим им показать.

Добавьте два прямоугольника через вкладку «Объекты» в меню слева. Первый прямоугольник как отступ сверху, второй как видимая часть. Установите параметры формы, как показано ниже, а затем щелкните замок, чтобы заблокировать эти прямоугольники.

Первый прямоугольник (отступ):

Второй прямоугольник (видимая часть макета):

Добавьте изображение. Это может быть человек, продукт или предмет. Мы добавляем молодого продавца пиццы. Это можно сделать через вкладку «Объекты — Фотообъекты» или загрузив собственные изображения с прозрачным фоном.

Поместите объект в центр и выровняйте по низу видимой части, не забудьте отступы по бокам.

Добавить текст. Нажмите кнопку «Текст», выберите шрифт и настройте отображение справа. Вы можете добавить фон, контур, линию или тень. Мы создали текст с тенью. Размещаем этот текст над изображением в видимой части обложки.

Не размещайте текст прямо на краю видимой области, делайте отступ.

На ваше усмотрение вы можете заполнить скрытую часть обложки, разместить на ней контактную информацию, логотип и другую информацию.

Дублируйте шаблон. Таким образом, у нас есть живой шаблон обложки, на котором мы можем менять изображение и текст. Нажмите на три точки и выберите «Дублировать слайд».

На втором слайде просто измените изображение и текст, не меняя фон или положение.

Загрузите установку, и все готово! Теперь осталось установить получившийся чехол в сообщество, как это сделать — вы найдете пролистав ниже.

Приложение Canva

Здесь обложка выполнена аналогичным образом, адаптированным под возможности редактора и работу в приложении.

откройте мобильное приложение Canva (Как получить доступ к Canva из России) на своем телефоне и создайте макет. Выбираем формат истории, так как он идеально подходит под размер обложки в прямом эфире ВК.

Добавьте фон. Нажимаем кнопку плюс и через поиск в элементах находим градиентный фон.

Затем используем выделение, чтобы разместить основной контент в абсолютно видимой области — добавляем один прямоугольник сверху, а другой снизу. Width — ширина макета, высота 285 пикселей для каждого.

Через поиск также находим нужное изображение и размещаем его на нижнем краю видимой области. Вы также можете загрузить свою фотографию.

Поместите текст поверх изображения.

Затем вы загружаете готовую установку.

Макет можно использовать как шаблон — сначала сделайте его копию. Нажмите на три точки вверху и в появившемся меню выберите «Создать копию».

Затем просто замените изображение и текст.

И теперь, когда обложки готовы, давайте перейдем к настройкам сообщества.

Как поставить живую обложку в группе ВКонтакте: пошаговая инструкция

Установить живую обложку можно в настройках сообщества с мобильного, а также в веб-версии.

В мобильном приложении

Шаг 1. Откройте настройки сообщества (значок шестеренки) и перейдите в раздел «Информация».

Шаг 2. Перейдите в раздел «Главная».

Если у вас установлен обычный набор обложек, он появится здесь, а ниже вы можете добавить видео или фото для живой обложки. Нажмите «Добавить обложку».

Шаг 3. Если вы используете видео в качестве живого кавера, никаких дополнительных настроек не требуется. Если вы используете изображения/картинки, то после загрузки изображений рекомендуем поставить галочку «Показывать движущиеся изображения». В этом случае ваши изображения будут двигаться (оживать), а не просто статично сменять друг друга.

Шаг 4. Чтобы изменить порядок или удалить фотографии, нажмите кнопку «Редактировать» в правом верхнем углу экрана. Затем вы удаляете (красный кружок) или меняете (три строки) порядок отображения изображений.

Теперь посмотрим, как выглядит аналогичный процесс на ПК.

На компьютере

Зайдите в Управление сообществом. В разделе основной информации будет возможность настроить обложку. Нажмите «Управление».

Откроется окно, где вы можете загрузить изображения или видео, которые автоматически сменяют друг друга. Это будет живая обложка.

Установите флажок «Показывать движущиеся изображения», чтобы изображения двигались. Чтобы удалить изображение, наведите на него курсор и нажмите на крестик. Чтобы изменить порядок изображений, щелкните и перетащите мышью.

Вдохновляющие примеры живых обложек

Давайте посмотрим на несколько примеров живых каверов, чтобы вдохновить вас.

Пример №1: Обложка включает название магазина, условия оплаты и доставки, а также текущую акцию с призывом к действию.

Пример № 2. Если вы музыкант, художник, спортсмен или блогер, вы можете разместить свое фото или видео на первой странице. Как это сделала Клава Кока.

Пример №3: На главной странице соответствующего сообщества показано, что интересного ждет участников внутри.

Пример № 4. Бренд спортивной одежды представил на обложке известного спортсмена. Обратите внимание, что забыли отступы по бокам и теперь текст немного обрезан.

Пример № 5: Интернет-школа вывела свое УТП и основное предложение на главной странице.