Оформление группы в ВКонтакте: меню, анимированные обложки, размеры изображений и прочие тонкости

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

Прежде чем установить обложку в группе в ВК, следует узнать параметры, которым должно соответствовать ваше изображение. Ваше фото должно быть в формате PNG, JPG или GIF, а его разрешение – 1590 на 400 мегапикселей. И, конечно же, вам потребуются права администратора паблика, добавить их не сложно. Поэтому если Вы самостоятельно смогли создать группу, то наверняка сможете и справиться с последующими инструкциями.

Зачем группе оформление

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

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

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

Правила выбора

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

Четкий и понятный заголовок паблика, который позволит пользователю понять цель посещения страницы;
По возможности и при необходимости нужна расшифровка заголовка с помощью подзаголовка;
Логотип. Он должен быть качественным, привлекательным и отображающим сущность страницы. Не стоит ставить некачественное или чужое лого;
Способы связи. Можно использовать телефон, ссылки на социальные сети или другие дополнительные источники информации. Особенно актуально, если паблик подразумевает постоянное прямое общение с клиентами;
Изображение продукта. Если вы продаете конкретные товары и услуги, продемонстрируйте их «лицом» – это привлечет потенциального потребителя;
Меню по основным разделам – сделайте кликабельные кнопки для быстрого перехода;
Фотография, близкая по тематике. Обязательно сделайте красивую, яркую обложку, которая заставит людей заострить внимание на публичной странице.

Следуйте нашим несложным советам – все получится! Стоит помнить о важнейших постулатах создания привлекательной обложки:

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

Не получается? Ловите небольшой гайд по основным трудностям, с которыми сталкивается пользователь.

Обложка

Размеры: 1590×400 px, видимая зона для мобильной версии 1196×400 px.

Это вытянутая горизонтальная картинка в шапке сообщества, она некликабельна.

Обложка нашей группы vk.com/prcyru

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

Группа без обложки

Общие рекомендации к обложке

Чтобы качество обложки не портилось, администрация Вконтакте советует загружать изображение размером 1590×400 px. Но в мобильной версии вся обложка не умещается в экран, края справа и слева обрезается на 197рх, поэтому все данные, тексты и изображения, которые нельзя резать, лучше помещать в видимой зоне, это 1196×400 px. А сверху примерно 83 рх занимает полоска с индикаторами связи, уровня заряда и прочих.

Схема обложки с разметкой

Чтобы вам не размечать области самостоятельно, мы сделали шаблон в формате psd с направляющими, разграничивающими области. Его можно .

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

Обрезалось часть названия на обложке

Многие советуют делать на обложке стрелки, побуждающие нажать на подписку или написать сообщение.

Стрелка указывает на кнопку подачи заявки

Стрелка показывает на кнопку с сообщением

Мы советуем сначала посмотреть, преимущественно с каких устройств аудитория смотрит группу. Такая информация есть в статистике сообщества:

Скриншот статистики группы PR-CY

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

Стрелка указывает на аватарку

Стрелка указывает на пустое поле

Динамическая обложка

Размеры: такие же, как у обычной обложки.

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

Пример с выводом аватарок активных участников на обложку

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

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

О том, как самостоятельно написать скрипт, на ХабраХабре рассказывал Петр Самохин. Если не хочется разбираться в этом самостоятельно, есть платные сервисы-конструкторы, к которым можно подключить группу и настроить обложку с нужными приложениями за небольшую абонентскую плату.

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

Анимационная обложка на мобильных

Размеры: вертикальные фото и видео 1080×1920 px или другие в пропорции 9:16.

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

Обложка группы в мобильном просмотре Обложка группы по клику в мобильном просмотре

Включается эта возможность в Настройках сообщества:

Настройки группы

Дальше появится окно с добавлением фотографий в слайд-шоу для анимированной мобильной обложки:

Добавление фотографий

Какой размер материалов выбрать:

Для фото рекомендуем разрешение 1080×1920 или другое в пропорции 9:16 вертикальной ориентации. Размер видео такой же, длительность до 30 с, размер до 30 Мб, MP4, видеокодек H.264, аудиокодек AAC.

Что такое баннер ВКонтакте и зачем его использовать?

Баннер – это изображение рекламного характера. Может быть, как статическим, так и динамическим. Его роль заключается в рекламировании продукта/услуги или в побуждении к действию (подпишись, напиши и т.д.).

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

Давайте рассмотрим пример эффективного применения баннера. Обратимся для этого к паблику «moloko_coffee».

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

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

Аватарка

Размеры: не меньше 200х500 px и не больше 7000 px, соотношение сторон 2 к 5.

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

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

С обложкой и аватаркой

Только с аватаркой

Аватар может быть любого размера не меньше 200х500 px и не больше 7000 px с каждой стороны, но максимальное соотношение сторон — 2 к 5. То есть сильно вытянутую картинку установить не получится, мы пробовали:

Редактор не дает выделить более вытянутое поле.

Как сделать баннер для шапки

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

Запустим программу.
Откроем в ней изображение.

Далее при помощи инструмента «CropTool»создаем рамку размерами 1590 х 400 пикселей.

Далее выбираем отображаемую часть и нажимаем Enter. Изображение обрежется.

Сохраняем.

Таким образом, мы получили баннер необходимого размера.

Теперь нам остается загрузить его в группу:

Зайдите в «Управление сообществом».

Справа выберите раздел «Настройки».
Найдите строку «Обложка» и нажмите кнопку «Загрузить».

Выберите файл на компьютере, а затем отображаемую часть.

Сохраните изменения.

Процесс работы в других редакторах аналогичен.

Если Вы решили делать баннер с полного нуля (весь дизайн, стиль, текст и т.д.), тогда Вам понадобятся и дизайнерские навыки.

Меню с кнопками

Размеры: картинка для кнопки от 376х266 точек.

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

Лента меню в группе

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

Настройка кнопок меню

Название кнопки не может быть больше 20 символов, но на смартфоне и эти символы не помещаются, так что дополнительно проверьте, чтобы название было понятным:

Меню на смартфоне

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

Какие выбрать размеры для баннера ВКонтакте?

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

Исходя из того, как именно Вы будете оформлять Ваш паблик, используйте соответствующие размеры:

Обложка – 1590 х 400 пикселей;
Аватар – 200 х 500 пикселей;
Закрепленный пост (квадратный) – 510 х 510 пикселей;
Закрепленный пост (на уровне с аватаром) – 510 х 308 пикселей.

Важно! Выше указаны рекомендуемые размеры. При использовании меньших параметров – качество картинки может ухудшиться. При использовании больших – фотография может не отобразится полностью и придется выбирать видимую часть.

Вики-меню

Размеры: ширина внутренней страницы 607 px, обложка не менее 600 px в ширину.

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

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

С появлением кнопок в меню необходимость в закрепленном вики-меню отпала, но его все равно можно сделать, если вам нужно поместить в меню больше семи ссылок.

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

Обложка меню

Фрагмент разделов внутри меню

Ширина поля у вики-страниц — 607 пикселей. Картинки можно растянуть или сделать меньше, указав размер в редакторе, который открывается по клику на изображение. Но при растягивании и уменьшении портится качество. Автоматически картинки загружаются с высотой 400 px.

Редактор изображений в вики

Вики-страничка с разделами меню настраивается в редакторе. Далее ссылка на страницу вставляется в пост на стене, ему не обязательно, но желательно изображение. Оно подбирается как обычная иллюстрация к посту. Прикрепляем и сохраняем пост, теперь вики-страничка будет открываться по клику на «Посмотреть» или на иллюстрацию.

Тестовый пост с вики-меню

Как создать обложку для группы ВК в Canva

Чтобы сделать обложку, переходим на главную страницу сериса: canva.com и активируем 30 дневный бесплатный период (позже подписку можно отменить и пользоваться сервисом бесплатно). Для входа можно использовать Google-аккаунт или профиль на Facebook.

Шаг 1.

После авторизации в Canva приступайте к созданию обложки. Сделать это можно двумя способами — вручную, указав размеры «шапки». Когда вы нажмёте на кнопку «Создать обложку для группы ВК», Canva откроет новый шаблон с рекомендуемыми размерами — 1590×400 пикселей — и вариантами макетов.

Шаг 2.

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

Шаг 3.

Чтобы поменять фон обложки, загрузите в редактор своё изображение, кликнув по иконке «Загрузки» и нажав на кнопку «Загрузить собственные изображения».

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

Шаг 4.

Чтобы наложить текст на обложку, кликните по иконке «Текст» и ознакомьтесь с типами надписей и шрифтами.

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

Шаг 5.

Когда обложка будет готова, сохраните изображение, кликнув по кнопке «Скачать» в верхней части меню.

Сервис предложит выбрать формат — PNG, JPG и PDF (стандартный и для печати). Для ВКонтакте лучше использовать первые два формата.

Останется лишь кликнуть на кнопку «Скачать», и через несколько секунд готовая обложка окажется на вашем компьютере.

Посты

Размеры: не менее 700 px в ширину для обычных постов, не меньее 510х288 px для статьи в редакторе.

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

Ответ поддержки о влиянии размера картинки на позицию в выдаче

Основатель Церебро Таргет Феликс Зинатуллин утерждает, что картинка должна быть не менее 700 пикселей в ширину. Как показывает его опыт, у постов с картинками шириной в 700 пикселей и с шириной в 699 может быть разница охватов в два раза.

Параметры картинки могут быть любыми, но лучше остановиться на квадратных и горизонтальных прямоугольных изображениях. Для примера мы взяли три варианта: квадратную картинку, изображения в вертикальной и в горизонтальной ориентации в 1000 px по ширине.

Десктопный просмотр

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

Мобильный просмотр

Есть другой формат поста — статья в редакторе. Обложка для нее должна быть горизонтальной, картинка сожмется до размера 510х288 px. Какие-либо изображения лучше помещать дальше от центра, заголовок тоже писать не нужно, он автоматически встанет посередине. Заголовок пишется белым шрифтом, но подсвечивается тенью, так что темные иллюстрации смотрятся лучше, но и на светлом текст не теряется.

Иллюстрация для статьи со светлым фоном

Иллюстрация для статьи с темным фоном

Еще одна рекомендация для картинок — не пишите на них слова «лайк», «репосты» и прочее, что теоретически можно отнести к накруткам. Алгоритмы ВКонтакте борются с лайко-попрошайками и занижают охват таких постов. Об этом говорит эксперимент Церебро Таргет: два одинаковых поста получили разный охват подписчиков, на одном из них был замазан «лайк»:

Охваты у одинаковых постов

Создаем баннеры для групп ВКонтакте в редакторах

Первое, что необходимодля создания баннерных фото – это умение работать в различных графических редакторах. К сожалению, сегодня без специальных навыков сделать качественное и стильное изображение будет очень сложно.

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

Программы, которые чаще всего используются:

Adobe Photoshop;
Adobe Illustrator;
GIMP.

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

Как выгрузить готовое изображение?

Для загрузки картинки в группу потребуется:

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

Выйдите на основную страницу сообщества и оцените результат. Если вы соблюдали рекомендации относительно размеров, то картинка поместится полностью.

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

Готовые шаблоны баннеров ВК

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

Теперь давайте поговорим о готовых шаблонах.

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

Vk-oblozhki.ru
You-ps.ru
Psd-box.at.ua

Во-вторых, Вы можете воспользоваться сервисами, где можно в режиме онлайн сделать свое стильное изображение. Здесь можно добавить текст, логотипы и т.д. Это такие сервисы, как:

Fotor.com;
Canva.com.

Использование подобного софта значительно упрощает процесс оформления группы.

Как сделать смежный баннер Вконтакте

Теперь переходим к самому сложному и интересному.

Что такое смежные изображения? Эта два или несколько отдельных фото, которые являются прямым продолжением друг друга. Таким методом оформляются не только паблики, но и профили во ВКонтакте.

Вы можете выбрать один из двух баннеров:

Смежный Banner VK с обложкой;

Смежный с аватаркой.

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

При создании второго варианта необходимо учитывать сразу три момента:

Есть ли статус у группы – он смещает закрепленную часть на 10 – 20 пикселей вниз;
Есть ли у записи текст – он также смещает фото вниз (в зависимости от размера текста);
Хотите ли Вы, чтобы изображения заканчивались по нижнему краю на одном уровне.

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

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

Теперь перейдем к самому процессу создания:

Для начала необходимо взять две заготовки: первая – 200 х 500 пикселей, вторая 510 х 308 пикселей (у Вас могут быть другие параметры).
Далее первую мы загружаем на место аватара, вторую на место записи.