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

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

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

Параметры изображения

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

Для двух вариантов размеры обложки группы в ВК одинаковые. Минимальная ширина и высота 795 х 200 px. Но разработчики советуют увеличивать параметры исходного файла вдвое – до 1590 х 400 рх. Это позволяет паблику одинаково хорошо выглядеть на телефоне и широкоформатном мониторе ПК.

Разрабатывая дизайн, нужно учитывать и расположение кнопок навигации. Отступ от правого края составляет 66 рх, расстояние между ними 10 рх, а габарит каждой 157 рх.

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

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

• По 196 рх с каждой стороны просто уходит за пределы видимости.
• Верхние 83 рх заняты служебными пиктограммами, где отображаются часы, сотовые операторы и прочая информация.
• По 140 рх по бокам занимают всплывающие пиктограммы меню и сообщений.

Нетронутой остается лишь область 918 х 317 рх. На нее и нужно ориентироваться.

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

Выбираем фон для обложки группы ВК

Фоновая заставка вашего паблика должна максимально соответствовать ее содержимому и вызывать доверие у посетителей. Хорошие результаты показывают авторские фотографии. Снимки станков на производстве, тортов на вашей кухне или довольных клиентов в парикмахерской «заходят» лучше, чем избитые картинки из поиска Яндекса. Если нет подобных материалов, можно воспользоваться базой бесплатного фотостока, например, Unsplash . Сервис предлагает огромный выбор. Но ключевые запросы нужно вводить на английском. Хороший русскоязычный сток – Pixabay . Но количество файлов в свободном доступе ограничено.

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

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

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

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

С помощью обложки для сообщества в ВК можно стимулировать людей на целевое действие. Указатель на меню подталкивает посетителей к изучению разделов паблика. А если рядом сделать интригующую подпись, они начинают искать таинственную разгадку и задерживаются у вас.

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

При этом подходят не только прямые, но и косвенные рычаги воздействия на ЦА. Исследования маркетологами «глазных следов» показали, что мы склонны смотреть туда, куда направлен взгляд других. Это тоже можно использовать в своих целях, чтобы сосредоточить внимание на необходимых нам элементах. Несмотря на яркий, выразительный образ персонажей, мы концентрируемся на тексте даже без прямого указания на него.

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

Не последнюю роль играют цветовые решения. Правильно подобранная гамма притягивает к себе целевую аудиторию не хуже броского слогана. Это активно используют маркетологи. Оранжевый и желтый тона характерны для жизнерадостных людей. Зеленый ассоциируется со здоровьем, экологичностью и деньгами. Синий – символизирует спокойствие и надежность. Он предпочтительнее для мужской половины участников. Оттенки красного отлично притягивают к себе внимание. Незаменимы при проведении акций и распродаж. Использование более трех цветов расфокусирует взгляд. Лучше применять цветовой резонанс, оттенки и полутона.

Актуальная картинка для обложки группы в ВК помогает попасть в тренды. Предстоящее мероприятие всегда привлекает к себе внимание. Анонсируйте подходящие события даже если вы ориентированы на более широкую тематику.

Оформляем «шапку» сообщества

Профессиональные веб-дизайнеры работают в специализированных приложениях: Adobe Photoshop, Illustrator, Creative Cloud и прочих. Но они достаточно сложные для начинающих пользователей. Несмотря на обилие функций и возможностей, новички редко ими пользуются. Часто востребованными остаются лишь функции обрезки и трансформации изображений, наложения текста и картинок поверх фонового слоя. Все то же самое можно легко сделать и без установки ресурсоемких программ.

Рассмотрим как создать обложку для группы ВК в графическом онлайн-редакторе canva. Для работы на нем регистрируемся по e-mail или с помощью кнопок социальных сетей.
После авторизации нажимаем вверху справа «Использовать специальные размеры» и задаем параметры 1590 х 400рх. Выбираем фоновый шаблон из представленной на сайте галереи или загружаем свою фотографию. При необходимости растягиваем ее до необходимой величины за «ручки» по углам. Остается добавить навигацию и надписи. Приложение условно бесплатное, поэтому все модули с соответствующей пометкой можно применять без ограничений. Добавляем текст, логотип, указатели, стрелки и другие понравившиеся элементы.

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

Устанавливаем «шапку» сообщества

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

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

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

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

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

• Обложка страницы показывается вверху, на всю ширину паблика, размер 1590 х 400 пикселей;
• Большой аватар — вертикальный баннер 200х500 px (соотношение сторон 2:5), показывается справа вверху;
• Маленькая аватарка, круглая картинка, показывается в каждом сообщении группы, размер 200х200 пикселей.
• Изображение меню для группы Вконтакте, ширина 510 пикселей, высота — 307 (чтобы нижний край меню красиво совпадал с низом большой аватары справа).

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

Как сделать шапку для группы Вконтакте самостоятельно

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

Открой картинку в графическом редакторе. Обрежь или масштабирую до размера: длина 1590 px, высота 400 px.

Далее можно нанести необходимые надписи (название группы, слоган, призыв вступать в сообщество). Теперь нужно загрузить обложку в сообщество, для этого зайди в пункт меню «Управление сообществом»:

Кликни по надписи «Загрузить» в поле «Обложка сообщества».

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

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

• Картинка или фото должно соответствовать тематике сообщества.
• Используй изображения высокого качества.
• Не нарушай чужие авторские права на изображения (в настоящее время бесплатные стоки предлагают большое количество и фотографий и иллюстраций).
• Не перегружай обложку деталями.
• Если помещаешь на шапку фото человека, то лучше, чтобы он смотрел не на посетителя, а на самый важный элемент на странице (меню, адрес сайта, сообщение об акции, призыв).
• Используй качественные шрифты и проверяй, чтобы надписи были разборчивы при любом масштабе.

Размеры шапки в паблике Вконтакте в новом дизайне

После того как произошел редизайн данной социальной сети, появился новый элемент оформления — обложка. Это большое изображение горизонтальной ориентации размером 1590 на 400 пикселей. Шапка для группы Вконтакте является статической картинкой. Достаточно большой, чтобы разместить на ней и яркую, запоминающуюся фотографию или картинку и название паблика, слоган компании, имя сайта, расписание работы и другие надписи.

Как сделать меню для группы ВК в новом дизайне

Процесс оформления меню группы Вконтакте состоит из следующих этапов:

• Подготовка списка ссылок меню (это могут быть страницы, разделы сообщества или внешние сайты).
• Подготовка фоновой картинки.
• Нанесение на фоновое изображение надписей и «кнопок» меню.
• Нарезка изображения на части.
• Включение wiki-страницы.
• Загрузка графического меню и форматирование его wiki-разметкой.

Фоновая картинка должна быть шириной 510 пикселей, а высота зависит от количества и размещения пунктов меню. Для работы с изображениями понадобится растровый графический редактор, ниже показаны примеры с использованием бесплатного и легкого Paint.Net.

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

Вертикальное меню сообщества ВК с пунктами в один столбик

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

• Обвести рамкой;
• Изменить цвет фона под буквами;
• Добавить буквам тень.

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

Следующий шаг — нарезка изображения на части:

Процесс нарезки изображения также можно выполнить с помощью удобного онлайн-инструмента www.imgonline.com.ua/cut-photo-into-pieces.php .

Далее в меню «Управление сообществом» зайди в пункт «Разделы» и в пункте «Материалы» выбери «Ограниченные» (это значит, что страницы создавать и редактировать сможет только администратор группы).

Нажми сохранить и перейди на главную группы. Возле раздела с информацией о группе появился пункт «Свежие новости».

Перейди в этот раздел и нажми редактировать. Измени заголовок на «Меню» а потом нажми на пиктограмму фотоаппарата, чтобы добавить изображение.

Щелкни по добавленной картинке и в окне свойств укажи ссылку на нужный раздел.

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

Каждый тэг изображения начинается «[[» и заканчивается «]]», состоит из трех частей, разделенных знаком «|»: ID изображения, свойства и ссылка. Нужно откорректировать размеры картинок и вставить в их свойства тег «nopadding». Свойства картинок перечисляются через «;».

После сохранения изменений создание меню завершено.

Меню с горизонтальным или многострочным расположением пунктов

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

Правила оформления таблицы:

• Начало обозначается символом «{|», конец таблицы — «|}».
• Дополнительные свойства указываются после «|~»
• Новая строка начинается с «|-».
• Каждая ячейка отделена «|».

Для исключения лишних пробелов нужно указать параметры таблицы «fixed nopadding noborder». Разметка графического меню из 2 столбцов и 2 строк выглядит так:

А само меню в группе:

Размер аватарки группы в новом дизайне для оформления паблика ВК

В сообществах Вконтакте используется два варианта аватарки:

• Большой прямоугольный баннер 200 на 500 точек, показывается справа вверху, если не загружена обложка.
• Миниатюра 200х200 пикселей, показывается в постах и в обсуждениях в виде кружочка.

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

Динамическая или «живая» обложка - это по сути обычное изображение которое с определенной периодичностью, средствами VK API загружается в вашу группу в качестве обложки (cover). На это изображение вы можете выводить разную информацию. Например: последних вступивших в сообщество, погоду в вашем городе, время, активных комментаторов и т.д. Подробно об «виджетах» я расскажу ниже.

Зачем нужна динамическая обложка?

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

А теперь подробней для разных типов сообществ!

Коммерческие сообщества

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

Конечно это не значит что 100% не стоит использовать эти виджеты. Смотрите сами исходя из вашей ситуации, возможно в вашем случае они действительно будут полезными.

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

Городские сообщества

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

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

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

"Клубы по интересам"

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

Сообщества школ, универов и т.д.

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

Также к данному типу сообществ очень хорошо подходит виджет «именинники», который будет выводить до 3-х случайных подписчиков у которых сегодня день рождения.

Что можно выводить на обложку

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

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

Активные (комментаторы, репостеры, лайкеры) – три виджета с одинаковым по смыслу функционалом. Выводят информацию об 1-3 самых активных пользователях. Данные берутся с 25 последних постов.

Именинники – показывает 1-3 случайный человека у которых сегодня день рождения.

Дата и время – выводит текущею дату в нужном вам формате и часовом поясе.

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

Погода – выводит погоду в указанном вами городе. Есть два режима отображения: погода текстом и погода с иконкой.

Курс валют – на данный момент доступны курсы для 8 разных валют.

Кол-во подписчиков – выводит текущее кол-во подписчиков в сообществе.

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

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

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

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

Загрузись по полной

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

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

Только самое лучшее – для вас

Все наши обложки – единственные в своем роде картинки, они отличаются глубиной проработки образов и повышенной четкостью, Фото, представленные вашему вниманию на сайте, имеют размер 795*200 или же 1590*400 пикселей (предназначены для экранов повышенной четкости), что обеспечивает удобство установки в качестве оформления группы.

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

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

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

Не стоит медлить – скачивайте, загружайте и пользуйтесь с удовольствием.

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

В архиве три шаблона: для ВК, Фейсбука и Ютуба. Файлы в формате PSD (Photoshop). Они имеют рекомендованный размер и уже расставленные направляющие под разные размеры экранов (настольные компьютеры и мобильные девайсы).

Разметка для шапки группы/паблика Вконтакте

Хочу сразу предупредить, что на мобильных устройствах шапка обрезается по краям и немного сверху. Об этом ВК ничего не пишут при загрузке обложки. Методом научного тыка я определил ширину безопасной области в 1200 px (внутренние направляющие макета). Если окажется, что я все же промахнулся, сообщите мне в комментариях. Поправлю.

Разметка обложки группы/паблика Facebook

• 820×312 px для настольных компьютеров,
• 640×360 px для мобильных устройств,
• 851х315 px а вот этот размер считается у них оптимальным и самым быстрозагружаемым.

Почему-то для мобильных размер больше, чем рекомендуемый размер обложки для ПК. В макете сделал размер 851х360.

Разметка обложки канала Youtube

• 2560х1440 px для телевизоров,
• 2560х423 px для настольных компьютеров и ноутбуков,
• 1855×423 px для планшетов,
• 1546×423 px для мобильных.

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

На этом все. Надеюсь, вам пригодится. Спрашивайте в комментариях, если что-то неясно. Успехов вам в творчестве!