Стильная обложка для группы вк. Обложка для группы вконтакте

Здравствуйте, друзья! В этом посте речь пойдет об улучшение внешнего вида вашего сообщества.

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

Первый способ

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

Плюс данного метода — некоторые админы для демонстрации выкладывают уже готовые шапки на стену, в свободный доступ. Большой разброс цены, можно заказать работы за 200-300 руб.

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

Обращаемся к профессионалу — фрилансеру. Я пользуюсь 2 самыми удобными, на мой взгляд, биржами — fl.ru и freelance.ru.

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

Минусы : цены от 500 рублей и выше.

Отлично, но что делать, если нет денег и в фотошопе вы полный ноль?

Способ третий

Делаем все сами, это легко с сервисом Канва.

Выполнение пошагово :
Для наших целей нам нужны качественные и красивые фото. Берем с фотостоков. Я пользуюсь двумя: https://pixabay.com/ и https://www.pexels.com/.

Регистрируемся на канве: https://www.canva.com/
Заходим, авторизуется.

Выбираем в правом верхнем углу кнопку «использовать специальные размеры».
Устанавливаем размеры 1590 на 400.

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

Устанавливаем шрифт, цвет, размер.
Кликаем на блок «скачать», формат устанавливаем PNG, скачиваем. Все, ваша обложка готова.

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

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

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

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

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

Из этой статьи вы получите три вещи:

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

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

Оптимальный размер картинки для обложки Вконтакте может варьироваться. На компьютерах обложка отображается на 795 пикселей в ширину и 200 в высоту. На мобильных телефонах она пропорционально подстраивается под ширину экрана. Однако, Вконтакте рекомендует загружать картинку размером не менее 1590×400 пикселей.

Совет : Если вы нашли изображение, которое вам сильно понравилось, но его пропорции не совпадают с рекомендуемыми, вы все-равно можете использовать его! Загрузив эту картинку, вы сможете выбрать видимую область и обрезать все лишнее внутренними средствами Вконтакте.

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

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

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

Размеры обложки Вконтакте на компьютере

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

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

Если покупать и изучать Photoshop нет желания, то используйте онлайн сервисы. Вот . На данный момент это самый популярный сервис.

Шаблоны обложки для группы Вконтакте

Для того, чтобы помочь вам с разработкой дизайна, мы создали шаблон для обложки группы в ВК (1590x400px).

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

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

Скачать этот и другие шаблоны можно в статье: .

Ваши фотографии

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

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

vk.com/best_psalterium

Стоковые фотографии

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

Хотелось бы призвать вас изменять/улучшать все выбранные фотографии, чтобы сделать их более личными. Можете использовать инструментарий онлайн-редакторов Fotor, Pablo или Canva. Если хотите, вы можете улучшить даже свою фотографию с этими инструментами. Например, выберите одну из ваших любимых цитат и добавьте её поверх фото.

Как выбрать обложку

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

Рассмотрим некоторые важные моменты:

Соблюдайте необходимые размеры обложки (1590px по ширине и 400px по высоте);
Выбирайте изображения высокого качества;
Не перегружайте изображение визуальными элементами;
Выбирайте картинку для обложки, ориентируясь на общее оформление группы Вконтакте;
Используйте изображения, которые являются оригинальными и имеют отношение к вашему бренду.

Какой тип изображений привлекает людей

Вот некоторые компоненты, которые делают изображения притягивающими:

Эмоции : чувства заставляют людей действовать;
Актуальность : в том числе и то, что соответствует интересам вашей аудитории;
Цвета : выбор правильных цветов приводит к увеличению конверсии;
Типографика : выбор правильного шрифта делает ваше сообщение ясным;
Хештеги и текст : найдите правильные слова, которые спровоцируют вашу аудиторию на совершение целевого действия.

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

Например, Coca-Cola на обложке использует общепринятый красный логотип с подписью «попробуй… почувствуй», а в качестве фона счастливую пару с напитком в руках. Это, конечно, в надежде заставить людей провести некую связь в сознании, что пить колу означает счастье. И это эффективно!

vk.com/cocacola

Куда смотрят люди?

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

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

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

В приведенном ниже примере, компания Electronic Arts знает это и ясно дает понять людям, что они могут купить новую игру FIFA17.

vk.com/easportsfifa

Нестандартное мышление

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

Использование известной личности в оформлении популярного паблика про стартапы

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

Использование обложки, чтобы отправить людей на свой сайт

Использование обложки, чтобы показать свое специальное предложение

Просьба посетителей вступить в группу или написать сообщение.

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

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

vk.com/adsnews

vk.com/wbrussia

vk.com/sci_one

vk.com/businessgazeta

vk.com/cds

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

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

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

Как сделать обложку для группы онлайн на сервисе www.canva.com
создание динамической обложки (обновленный вариант)

Хотите научиться делать обложки и аватарки, а так же креативные посты для групп ВКонтакте? Вам помогут профессионалы. ТЦ “1day1step” проводит online обучение по теме “Дизайн и Photoshop для социальных сетей”. Чтобы узнать подробности, кликните по баннеру ниже:

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

Размер обложки для группы вконтакте равен 1590х400 px.

Как сделать обложку группы сверху

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

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

Как сделать обложку группы в Фотошопе

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

Внимание! Всегда ищите такие картинки, размеры которых чуть больше размера обложки!

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

Поэтому выбираете картинку, нажимаете на нее правой кнопкой мыши – Копировать изображение .

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

В фотошопе выбираете Файл – Создать .

В открывшемся окне у вас должны быть выставлены следующие настройки:

Имя файла
Размер обложки для группы вконтакте: ширина 1590 рх, высота 400 рх
Разрешение – 72 пикселы/дюйм
Цветовой режим – цвета RGB 8 бит
Содержимое фона – прозрачный.

Кнопочка Ок.

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

Теперь внимание! Я уверена, что картинка по размеру оказалась больше, чем заготовка обложки. Ее нужно подогнать под размер 1590х490 рх.

Для этого в панели инструментов выбираем Редактирование – Трансформирование – Масштабирование . Зажимаем клавишу Shift, захватываем левой кнопкой мыши за уголок картинки и тянем к границам обложки. Вы увидите, когда вам нужно будет остановиться. Чтобы подтвердить действие, нажмите Enter.

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

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

Слева выбираем Инструмент «Горизонтальный текст» .

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

Прописываем название группы и нажимаем Enter.

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

Работать со стилями можно тогда, когда у вас выделен текстовый слой в панели.

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

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

После всех манипуляций с надписью, если вас устроил результат: обложка для группы вконтакте готова, необходимо ее сохранить. Для этого выбираем Файл – Сохранить для Web .

Набор PNG-24 (правый верхний угол). Это самый удачный формат картинок для социальных сетей.

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

Как сделать обложку для группы вконтакте онлайн на сервисе canva

Для того, чтобы начать работать в canva, вам необходимо зарегистрироваться на этом сервисе .

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

Вспоминаем, что размер обложки группы вконтакте 1590х400 рх. Соответственно, проставляем эти размеры в открывшемся окне.

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

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

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

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

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

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

Для примера я возьму элемент с текстом. Подробнее в видеоуроке ниже.

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

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

Результат примерно такой:

Тип файла PNG – Скачать.

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

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

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

Друзья, есть еще один сервис по функционалу, похожий на canva. Это сайт с бесплатным редактором изображений под названием fotor.com. Сайт позволяет оформлять не только картинки к постам, шапки к группам в социальных сетях, но и создавать различные креативные из картинок и фотографий.

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

Помимо обыкновенных обложек, которые вы можете сделать с помощью вышеперечисленных программ Photoshop и Canva, существуют динамические обложки.

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

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

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

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

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

Давайте рассмотрим примеры:

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

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

Третий пример – самый простой – на обложке погода в реальном времени.

В чем преимущество динамической обложки? Это дополнительное привлечение внимания посетителя к сообществу, и как следствие – увеличение количества подписчиков.

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

Создание динамической обложки для сообщества ВК

Создание динамической обложки необходимо начать с регистрации на сервисе VKFILLER .

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

Вам откроется окно с конструктором для создания динамической обложки.

Здесь все настолько просто, что разберется даже новичок.

1 шаг – необходимо добавить картинку для обложки. Сделать это можно через кнопочку Изменить фон . Разрешение: 795×200рх или 1590×400рх.

2 шаг – добавление виджета. На момент создания этой статьи сервис автопостинга VKFILLER предлагает 17 виджетов на выбор:

Последние подписчики
Активные комментаторы
Активные репостеры
Активные лайкеры
Пользователь по ID
Дата и время
Обратный отсчет
Погода (текст)
Погода (иконка)
Курс валют
Произвольный текст
Текст по ссылке количество подписчиков
Сегодня день рождения

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

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

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

Обложка страницы показывается вверху, на всю ширину паблика, размер 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 пикселей, показывается в постах и в обсуждениях в виде кружочка.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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