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

Создание обложки для сообщества социальных сетей

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

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

Обложка ВКонтакте. Как добавить обложку в сообщество ВК? Размеры обложки для группы ВК. Саша SMM.

Для создания обложки я использовала такие исходники

1. Создала файл размером 1590 х 530 пикселей, белого цвета.
2. Через Стиль слоя залила фон цветом #0b1075
3. Выставила направляющие: две вертикальные на 200 пикселей от каждого края, горизонтальную на 80 пикселей от верхнего края, тем самым определила рабочее
   пространство.

4. Добавила фон с изображением спирали: Файл — Поместить… При таком способе изображение открывается сразу в проекте как смарт-объект. Изображение перевела в режим наложения Экран.

5. Добавила еще один фон с блестками и так же перевела его в режим наложения Экран.

6. Добавила изображение девушки в формате png.

7. Девушку необходимо вписать в фон. Это я делала в несколько этапов.

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

8. Стоя на слое «обтравка», взяла кисть мягкую размером 40 пикселей, с непрозрачностью и нажимом 25%.

9. Нажав Alt (при этом курсор превращается в пипетку), пипеткой взяла образец цвета с изображения девушки рядом с контурной линией.

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

11. Добавила еще один новый слой «тонирование» для того, чтобы на изображении девушки создать рефлексы от синего фона.

1. Так же пипеткой при нажатой Alt взяла образец цвета с фона, и кистью закрасила светлые части изображения (на прядях волос, на руках, на складках одежды, на ноутбуке), создавая впечатление синих отсветов.

1. Добавила футаж-блик, перевела его в режим наложения Замена светлым и разместила его за головой девушки (слой с бликом ниже слоя с девушкой).
2. Ниже слоя с девушкой создала новый слой и кистью Облака нарисовала на этом слое облака, на которых сидит девушка.

1. Создала еще два новых слоя выше слоя с девушкой. На одном из них нарисовала облака, слегка закрывающие ноги девушки. На другом — облака в верхней части обложки.
2. Добавила еще один футаж-блик, перевела его в режим наложения Замена светлым и разместила в центре спирали.

1. Произвела цветокоррекцию изображения девушки:
   а) выделив слой с девушкой, добавила корректирующий слой Кривые; прикрепила его к слою с девушкой, нажав квадратик со стрелкой; сделала такие настройки кривой (см. изображение ниже);
   б) добавила еще один корректирующий слой Уровни; прикрепила его к слою с девушкой; сделала такие настройки: крайний левый ползунок, отвечающий за тени сдвинула
   вправо до значения 33; средний ползунок, отвечающий за средние тона тоже сдвинула вправо до значения 1,00.
   В результате проведенной коррекции изображение стало более четким и ярким.

1. Выше слоя с девушкой создала новый слой и на нем нарисовала лучи, исходящие из ноутбука: взяла инструмент Многоугольник, выставила на панели задач количество сторон — 3;
   для заливки фигуры выбрала градиент от голубого к прозрачному, штрих отключила. Нарисовала треугольник. Инструментом Трансформирование (Ctrl+T) придала треугольнику нужную форму и размер.
   Затем продублировала слой с треугольником 3 раза, и разместила лучи. К каждому слою с лучом добавила векторную маску и черной мягкой кистью убрала лишнее.
2. Добавила корректирующий слой Выборочная коррекция цвета выше всех слоев. На этот раз слой не прикрепляла, чтобы коррекция распространялась на все ниже лежащие слои.
   Открыла синий канал и сдвинула ползунок для черного цвета вправо до значения +18. Цвет фона обложки стал более глубоким.

1. С изображениями работа закончена. Осталось добавить текст. На новом слое, выбрав инструмент Текст, ввела «студия дизайна ANILAG». Шрифт FK Aero.kz, цвет белый.
2. Дублировала слой с текстом (Ctrl+J).
3. Для нижнего слоя с текстом сменила цвет на #031045
4. Стоя на нижнем слое с текстом, активировала инструмент Перемещение и сместила нижний слой с текстом вправо на 3 пикселя и вниз на 2 пикселя, нажав клавишу со стрелкой, указывающей вправо, 3 раза, клавишу со стрелкой, указывающей вниз, 2 раза.
5. Создала еще один новый слой и ввела текст «smm design». Шрифт Pristina. Цвет белый.
6. На слое фон-спираль добавила векторную маску, и по маске черной мягкой кистью с непрозрачностью 39%, нажимом 75%, убирала ту часть фона, которая находится под текстом.

26. На слое фон-спираль добавила векторную маску, и по маске черной мягкой кистью с непрозрачностью 39%, нажимом 75%, убирала ту часть фона, которая находится под текстом.

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

28. Затем открыла вкладку Слои, выбрала Новый слой заливка — градиент. Выбрала градиент, который настроила предварительно. Изменила угол градиента 53 градуса.

29. Перевела этот слой с градиентной заливкой в режим Перекрытие, снизила непрозрачность до 25%.

Создание обложки для сообщества социальных сетей завершено.

Подобным образом создается обложка для сообщества любой социальной сети: ВКонтакте, Одноклассники, Facebook, канала YouTube и т.д. Разница лишь в размерах. Для каждой социальной сети обложки имеют свои размеры.

Если у Вас остались вопросы, напишите их в комментариях к данной статье. Я постараюсь на их своевременно ответить. Так же мне интересно Ваше мнение о статье. Пишите отзывы, ставьте оценки.

Смотрите видеозапись создания обложки для сообщества

Источник: anilag-design.ru

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

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

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

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

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

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

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

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

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

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

2 ноября 2016 года обложки стали видны и в мобильной версии ВК по адресу m.vk.

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

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

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, он наиболее устойчив к сжатию;
• для ускорения загрузки, можно перетаскивать обложку прямо из папки на окно загрузки обложки.

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

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

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

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

«Удачная идея» знает, что

Людмила Пученкова — веб-дизайнер, автор и тренер курса по Photoshop и дизайну в соцсетях , создатель канала Youtube по изучению Photoshop для smm-специалистов .

Источник: luckyidea.ru