Как сделать живую обложку для группы ВКонтакте. Формат, примеры, шаблоны

В декабре 2021, ВКонтакте представил новый функционал, который помог оживить сообщества компаний – живые обложки.

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

Автоматическое продвижение в Instagram без блоков

Рекомендуем: Jesica – приложение для продвижения в Instagram (от создателей Instaplus.me). Установите Jesica на Android-телефон или компьютер и приложение будет ставить лайки, подписываться и отписываться, как будто это делаете вы сами:

• Без блоков. Действуют лимиты, как будто вы делаете это всё вручную.
• Безопасно. Не нужно вводить пароль от своего аккаунта.
• Высокая скорость. Вы можете поставить до 1000 лайков и 500 подписок в день.

Попробовать 5 дней бесплатно >> Реклама

Размеры Живые обложки для сообщества ВКонтакте

В начале 2021 года Живые обложки стали доступны всем владельцам сообществ, но сам VK очень сжато описал требования к видео и изображениям для живых обложек.

Рекомендованный размер живой обложки — 1080 х 1920 pixel. (ширина 1080 pixel, высота 1920 pixel), мы рекомендуем использовать контейнер mov, формат кодека для видео h.264, частота кадров по желанию 25 (Pal) или 30 (NTSC) и это все.

Таргбокс первым в сети разобрался со всеми тонкостями и нюансами при подготовке видео и изображений для Живых обоев. В этой статье вы узнаете о размерах живых обложек и о том как их установить.

Прежде всего мы должны понимать, Живые обложки доступны только в мобильном приложение ВКонтакте для IOS и Android.

Возможны 3 варианта загрузки.

1. Загрузить до 5 видеороликов, которые будут автоматически меняться.
2. Загрузить до 5 изображений,которые будут автоматически заменяться
3. Загрузить до 5 изображений, которые будут автоматически меняться, но при этом каждое изображение будет увеличиваться. (По умолчанию данная функция включена, чтобы отменить увеличение изображений снимите галочку с пункта Показывать фотографии в движении.

Размеры первого и второго варианта не отличаются и требуют одинаковой подготовки/

Что такое динамическая обложка

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

Пример живой обложки

Обратите внимание на картинку выше. Здесь отображаются страницы подписчиков. Эти блоки автоматически обновляются — когда в группу присоединяется новый участник, его страница автоматически начинает показываться на обложке, в блоке «Новые подписчики».

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

• Рейтинги пользователей
  . Самые активные, вновь вступившие, последний оставивший комментарий.
• Актуальная информация
  . Дата, время, различные курсы, таймеры.
• Данные со сторонних сайтов
  . Если у Вас есть ресурс в сети, и определенные навыки программирования, можно выводить нужные данные на обложке.

Загрузка видео или фото без функции «показывать фотографии в движении».

Давайте определим 2 состояния видимости обложки:

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

Сокращенный вид живой обложки

Полный вид живой обложки
Абсолютно логичный вопрос в как разместить основную информацию чтобы она была видна на привью и в полной версии. Давайте разберемся как наша обложка вписывается в привью. Сразу закрепим с Вами шируну обложки в данном варианте она неизменна и составляет 1080 pixel.

Правильные размеры живых обложек для вк

Но вот с высотой дела обстоят куда сложнее. Привью обрезает часть изображения сверху и снизу но обрезает не одинаково поэтому просто от центровать полезную информацию будет не правильно. Плюс нам мешают меню интерфейса и название группы с аватаркой, которые есть и в привью и в полной версии. Чтобы окончательно не запутаться воспользуйтесь нашим шаблоном обложки ВКонтакте. Мы немного округлили все размеры для удобства и сделали запас на отображение на разных экранах. (Сразу оговорюсь, совсем маленькие экраны мы не тестировали проверяли с Iphone 5 и дальше до 10 (она кстати дает больше вариантов для творчества с обложками). Шаблон размещенный ниже поделен на зоны от 1 до 7 обратите на них внимание далее мы будем разбирать эти зоны.

Шаблон с размерами живых обложек VK

Что мы получили в итоге. Если Вы планируете как у мы все любим написать скидка 90% и максимально задействовать этой надписью все имеющееся пространство, не обольщайтесь сильно Ваш размер всего (ш х в) 1080 х 832 pixel. На рисунке это область 4, она видна всем пользователям и в привью и в полной версии.

Для тех кто получил всю необходимую информацию и планирует покинуть статью не забудьте вступить в нашу группу ВК @targboxsmm

С теми кто остался и планирует использовать немного более эффективный маркетинг продолжаем разбираться.

• Зона 3 на рисунке размером (ш х в) 1080 х 132 pixel — это интерфейс смарфона и меню ВК, на самом деле можно эффективно использовать данную область, главное не писать в этой зоне текст т.к. он окажется не читаемым для пользователей. Элемент графического оформления вполне нормально будет смотреться в данной зоне.
• Зона 2 размером (ш х в) 1080 х 150 pixel — не видна на привью вообще, но в полной версии обложки она свободна для использования.
• Зона 1 размером (ш х в) 1080 х 140 pixel — это интерфейс и меню ВК, с этим вопросом мы уже разобрались. Можно использовать для графических элементов.

Итак, что получается с верхней частью обложки. Зону 1,2,3 (ш х в) 1080 х 423 pixel можно использовать для размещения графических элементов или просто залить красивым фоном. Зона 4 размером (ш х в) 1080 х 832 pixel — это наша с Вами основная рабочая поверхность, куда мы кидаем заманушки, акции, логотипы и т.п.

• Зона 5 размером (ш х в) 1080 х 250 pixel — проблемная область т.к. на ней размещается название сообщества, аватар и кнопки действия. Название сообщества еще не сильно заслоняет нашу обложку, а вот аватар и кнопки практически полностью перекрывают обложку. И вариант с использованием призыва к действию не очень заходит в данной области. Вернемся к ней позже.
• Зона 6 размером (ш х в) 1080 х 275 pixel — не видна в привью, а в полной версии обложки на ней размещается название группы и аватар.
• Зона 7 размером (ш х в) 1080 х 140 pixel — мы специально ее выделили т.к. в этой зоне размещена кнопка действия.

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

• Первый вариант: Всем будет наплевать, они просто будут делать обложки на весь экран, а если не хочеш открывать твои проблемы.
• Второй вариант: Все будут использовать только область привью, а остальной пространство заливать нейтральным фоном не несущем смысловую нагрузку (это самый вероятный вариант) и именно так сам ВКонтакте оформил свое сообщество.
• Третий вариант: Это лучшее развитие данного инвентаря. Подойдет только закаленным мастерам СММщикам и креативщикам. То есть нам с Вами, кто дочитал статью до этого места. Мы должны постараться завлечь пользователей открыть полную версию обложки и побудить совершить действие. Это может быть, что угодно например найди кота или спаси кота Использовать живые обложки можно и нужно максимально креативно, это позволит выгодно выделить сообщество в океане однотипного контента.

Приступаем

Для начала реализуем транслирование новых подписчиков на обложку. Логика примерно следующая: получаем запрос от Callback API, берём оттуда id пользователя, по нему берём имя и аватар, накладываем на имеющийся фон и загружаем в ВК. Проще некуда. Поехали.

Обрабатываем запрос от Callback API

Выглядеть этот запрос будет примерно так: { «type»: «group_join», «object»: { «user_id»: XXXXXXXX, «join_type»: «join» }, «group_id»: XXXXXXXX } Парсить JSON, я думаю, все умеют. Отсюда нам нужен только id пользователя, и по нему мы уже получаем имя, фамилию и ссылку на фотографию.
Достаточно сделать такой GET-запрос:

https://api.vk.com/method/users.get?user_ids=XXXXXXXX&fields=photo_max_orig&v=5.65 В ответ мы получим: { «response»: [ { «id»: XXXXXXXX, «first_name»: «имя», «last_name»: «фамилия», «photo_max_orig»: «https:\/\/pp.userapi.com\/\/…» } ] } Всё, у нас есть вся необходимая информация, осталось добавить это на обложку и загрузить её.

Обрабатываем изображение

Предположим, что вы заранее нашли изображение для фона и знаете, по каким координатам должно располагаться то, что вы хотите добавить на обложку. Все эти мелкие подробности опустим и перейдём к коду: // Фоновое изображение и аватар пользователя BufferedImage bg = ImageIO.read(new File(«/some/folder/bg.png»)), userAvatar = ImageIO.read(new URL(«https://…»)); // Результат — отдельное изображение BufferedImage result = new BufferedImage(background_image.getWidth(), bg.getHeight(), BufferedImage.TYPE_INT_ARGB); // В качестве «холста» берём наше новое изображение Graphics2D g = (Graphics2D) result.getGraphics(); // Рисуем фон g.drawImage(bg, 0, 0, NULL); // Рисуем аватар подписчика g.drawImage(userAvatar, xForAvatar, yForAvatar, width, height, NULL); // Подписываем имя подписчика g.drawString(userName, xForUserName, yForUserName); // Записываем результат на диск ImageIO.write(result, «PNG», new File(«/some/folder/result.png»)); Хочу заметить, что лучше использовать сразу уменьшенное изображение, иначе, если просто указать ширину и высоту результата, как указано в примере кода выше, то вместо аватара пользователя вы можете увидеть три пикселя.
Я не стал приводить простыни кода, помогающие на Java нормально уменьшать изображение и делать CircleCrop по центру, это легко пишется собственноручно либо спокойно гуглится. Также, настройку шрифтов и прочие мелкие моменты я тоже опустил.

В принципе, всё — мы получили готовую обложку, осталось только загрузить её. Просто, не правда ли?

Загрузка изображений с функции «показывать фотографии в движении».

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

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

Шаблон с размерами живых обложек VK

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

Живая обложка ВК шаблон

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

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

Итак, идем туда по ссылке:

https://dycover.ru/

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

После этого Вы перейдете в свой личный кабинет, где будет загружен список ваших сообществ. Как Вы понимаете, здесь только группы, в которых Вы являетесь создателем или администратором. Это объясняется тем, что устанавливать обложку может только руководитель (читаем как его назначить).

Давайте начнем. Найдите в списке нужное сообщество, и нажмите на него.

Выбираем нужную группу

Мы перейдем к странице управления этой группой. Первым делом ее нужно привязать к сервису. Для этого нажмем на кнопку «Подключить». Затем снова подтверждаем разрешение.

Теперь можно переходить к самому интересному. Нажимаем в меню «Создать новую обложку».

Мы попадаем в интерактивный редактор. Первым делом нужно загрузить фоновый рисунок. Подготовьте его любым удобным способом. Затем нажимаем на кнопку «Загрузка фонов». У нас появляется блок «Новый фон». В нем ссылка «Загрузить фон». Нажимаем и выбираем нужный файл.

Загружаем фон для обложки

Фон будет добавлен в наш макет.

Дальше начинается самое интересное — мы будем добавлять интерактивные блоки. Это ведь именно то, ради чего была затеяна это инструкция!

Большинство элементов добавляется через меню «Добавить виджет». Нажимаем туда и видим список доступных блоков.

Доступные для вставки блоки

Как Вы понимаете, вся задача сводится к добавлению нужных блоков, и их тонкой настройки.

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

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

Осталось добавить блок со временем. Вы уже знаете, как это делать. Раздел «Добавить виджет», там блок «Дата и время».

Все наши блоки добавлены!

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

Доступные настройки для динамических блоков

Таким образом, мы не ограничены простым добавлением интерактивного элемента. Их можно гибко редактировать, подстраивая под наши задачи.

Давайте попробуем проверить, работает ли наш макет. Нажмите на кнопку «Предпросмотр».

Предпросмотр обложки

Как видите, на макете начинают отображаться данные. В нашем случае, последние подписчики и дата.

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

Сервисы для создания видеообложек

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

Вот тебе два варианта:

• Photoshop — можешь использовать онлайн-вариант, его будет достаточно.
• Canva.com — визуальный онлайн-редактор, подходит для всех. Бесплатного функционала достаточно, чтобы сделать даже сложные обложки. Нужны дополнительные возможности — купи премиум аккаунт, стоит чуть больше 12 долларов в месяц. У них кстати есть готовые шаблоны специально для обложек в VK, ты сможешь их найти на этой странице.

Пора опубликовать готовый макет

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

Нажимаем на кнопку «Сохранить обложку», даем ей имя и сохраняем изменения.

Сохраняем макет

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

Активируем обложку

Идем в группу и проверяем результат.

Динамическая обложка в нашей группе

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

Проверяем работоспособность

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

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