Хотите украсить свою группу в ВК (Вконтакте) и создать для неё уникальную шапку (обложку)? В данной статье я расскажу о том какого размера и формата она должна быть, как добавить шапку в ВК, так же выложу исходник PSD (формат photoshop-а) шаблона нужного размера.

Как сделать шапку (обложку) для группы в ВК?

Что из себя представляет шапка в группе в ВК? Это просто картинка, размером 1590×400 и форматом - JPG, GIF или PNG. Находится она сверху в группе ВК, выглядит так:

Шаг 1. Создаём изображение нужного размера.

Для начала нам необходимо создать саму картинку, для этого я использовал Photoshop (Скачать готовый шаблон в формате PSD можно ). Открываем фотошоп, выбираем в меню «Файл» -> «Создать» («File» -> «Create»).

Появится окно, где необходимо укачать размеры изображения, ширина у нас будет 1590 px, высота 400. Цветовые режимы можно оставить по умолчанию. Нажимаем «ОК»

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

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

Шаг 2. Меняем шапку в группе ВК.

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

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

Выбираем наше изображение и появляется окно с возможностью обрезать изображение, так как у нас всё соответствует нужным размерам нажимаем «Сохранить и продолжить»

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

Менять шапку (обложку) Вы можете сколько угодно раз.

Вот мы и создали свою шапку для группы в ВК.

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

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

Немного предыстории

1 апреля соцсеть ВКонтакте начала глобальное тестирование так называемого нового дизайна. Тогда же была анонсирована настраиваемая «шапка». На РИФ+КИБ (http://2016.russianinternetforum.ru/) представители ВКонтакте рассказывали, что это будет блок, который сможет стать для интернет-магазина во ВКонтакте витриной, а в группе кинотеатра там можно будет разместить видеоролик. Шел месяц за месяцем. 17 августа ВКонтакте перевел всех пользователей на новый дизайн, а шапки все не было. Многие стали переоформлять свои сообщества под новый дизайн, и тут 31 октября 2016 года ВКонакте все-таки запустил шапки.

Новый дизайн обложки ВК

Что же в итоге мы имеем: теперь во всех сообществах — группах, пабликах, мероприятиях — можно установить широкое изображение:

Характеристики и размер обложки группы ВКонтакте:

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

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

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

Расположение кнопок СТА

1. Кнопки CTA («написать сообщение», «подписаться», «вступить в группу» и так далее) выстроились в ряд под правым нижним краем обложки друг за другом.
2. У сообществ появились миниатюры.
3. Добавились вкладки: первой идет закрепленная запись (если она стоит в сообществе), далее следует вкладка «информация о сообществе» (теперь она доступна пользователям). В третьей вкладке расположено меню — для групп и мероприятий. В паблике данная вкладка отсутствует. Меню теперь также постоянно доступно для пользователей.

Оформление обложек ВКонтакте

Давайте разберем, какие данные нам нужно разместить на обложке:

1. Название бизнеса (или его направление).
2. Город, адрес (если проект региональный).
3. Телефон для быстрого заказа (с кодом города).
4. Уникальное торговое предложение (то, чем вы отличаетесь от других).
5. Призыв (соответствующий вашему конверсионному пути).

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

Пример дизайна из 2 частей

Например, на 2 части:

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

Легче воспринимается обложка, поделенная на 3 части, связанные воедино стилистикой, каждая из которых составляет законченные блок:

Пример дизайна из 3 частей

Возможно, по аналогии с обложками Facebook, в мобильных приложениях будет виден лишь центр обложки. И именно туда я помещаю название компании или логотип, город, адрес и телефон. Слева размещаю УТП проекта или выгоды от подписки. Справа — интерес целевой аудитории проекта и/или призыв.

Как разместить обложку сообщества ВКонтакте

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

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

Загружаем обложку сообщества

• Перейдите в папку с подготовленным заранее фото, выберите его. Если фото выбрано в произвольном размере, то оно будет кадрироваться в соотношении сторон 1:3,975.

Выбираем нужное изображение

• Нажмите «сохранить и продолжить».

Сохраняем результат

Готово, ваша обложка было успешно установлена в группу.

Обложка установлена

Удаление обложки

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

Изменяем миниатюру сообщества

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

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

• на обложке запрещается сторонняя реклама, не пренебрегайте этим правилом ВК, дабы не потерять функцию добавления обложек в ваше сообщество или не получить бан;
• при создании документа используйте режим sRGB для правильного отображения цветов вашей обложки в web-пространстве;
• не используйте яркие цвета, градиенты, мелкие узоры, (помните, что ВКонтакте сжимает изображения, особенно страдают красный, оранжевый, чисто-белый);
• сохраняйте обложку через функцию «сохранить для WEB» в формате PNG, он наиболее устойчив к сжатию;
• для ускорения загрузки, можно перетаскивать обложку прямо из папки на окно загрузки обложки.

Перемещение выбранного изображения

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

Всем удачных идей!

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

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

В архиве три шаблона: для ВК, Фейсбука и Ютуба. Файлы в формате 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 для мобильных.

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

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

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

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

Как включить обложку в группе?

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

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

Предварительно нам нужно подготовить картинку. Рекомендованные размеры 1590 x 400 пикселей. Сделайте ее в любом графическом редакторе (см. ).

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

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

Просмотр и настройка обложки в группе Вконтакте

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

1. Редактирование;
2. Удаление.

Все готово.

Заключение

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

Вопросы?

Вконтакте

Картиночки в SMM решают. Если не всё, то многое. Хотите, чтобы обложка вашей группы привлекала внимание и не выглядела кустарно?

Регистрация в сервисе

Выбор формата

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

Поскольку Canva - иностранный сервис, он еще не полностью адаптировался под российскую аудиторию. Поэтому найти готовый макет для обложки ВКонтакте можно в специальном разделе , а не в «Создать дизайн». Нужный нам макет имеет размеры 1590x400 пикселей - в два раза больше реального размера обложки, чтобы достичь наилучшего качества отображения картинки (удваивать пропорции рекомендуют сами специалисты ВКонтакте).
Слева вы увидите ряд готовых макетов, разработанных профессиональными дизайнерами - их можно использовать в качестве заготовок, чтобы не начинать создание дизайна с нуля. Любой элемент шаблона можно изменить, поэтому при выборе не зацикливайтесь на изначальной цветовой палитре и шрифтах. Цвет, текст, количество элементов и их расположение на изображении вы можете настроить сами. Тем не менее, выберите стиль, который лучше отражает идею вашей группы: с фото на заднем плане, со сплошным фоном, фотоколлажем, строгим узором и так далее. Для нашего примера мы выберем шаблон без готовых элементов, представляющий собой «сетку» для коллажа.

Загружаем собственные элементы

Прежде чем начать редактирование, загрузите в редактор собственный логотип или фотографии, которые вы хотели бы использовать. Перейдите во вкладку «Моё» и выберите нужные файлы из компьютера. Желательно загружать лого с прозрачным фоном. Еще лучше, если у вас есть варианты для темного и светлого фона (например, черный и белый вариант логотипа), чтобы его можно было использовать в любой иллюстрации.
Чтобы вставить загруженное изображение в новый макет, просто перетащите его мышкой вправо и расположите в нужной части сетки. Здесь фото можно «кадрировать» - то есть расположить внутри выбранного окошка нужным образом и в нужном масштабе.

Наполняем макет содержанием

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

• Цвет фона (доступна как сплошная заливка, так и различные текстуры и орнаменты);
• Текст, шрифт, размер и цвет шрифта;
• Расположение элементов (меняется простым «перетаскиванием» выделенных элементов по холсту);
• Количество элементов (лишние детали можно удалить, а нужные, наоборот, вставить в макет в любом количестве).

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

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

Работаем с текстом

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

Скачиваем готовую обложку для группы

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

Загружаем обложку в группу

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

Итог

Большинство макетов Canva созданы в более или менее минималистическом стиле неслучайно.

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

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

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

Вот еще пара обложек для ВКонтакте, которые мы сделали с помощью макетов Canva:

По такому же принципу вы можете создать обложку для страниц в других социальных сетях или изображения для их контентного наполнения. И дизайнер вам не понадобится.

Как работать в Canva рассказал и показал региональный менеджер сервиса Олег Бурков.

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

У вас есть интересная тема и вы хотите стать нашим автором? Пишите нам!