Как создать баннер для вконтакте. Баннер вконтакте - как сделать и разместить самому

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

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

1. Горизонтальная обложка (шапка)
Начнем, пожалуй, с горизонтальной обложки или шапки. Разработчики ВКонтакта уверяют нас, что обложка за счет своего размера дает большую маневренность по предоставлению и визуализации информации. Обычно, помимо красивой картинки в шапке располагается логотип, сопроводительная информация, контакты, призыв вступить в группу, адрес сайта. У меня есть подозрение, что когда-нибудь обложки станут единственно возможным вариантом оформления группы, поэтому рекомендовала бы сразу переходить на них, дабы избежать форсмажорных редизайнов впоследствии.

Как загрузить обложку
Чтобы загрузить обложку, нужно перейти в Управление сообществом >> блок Основная информация >> Обложка сообщества >> Загрузить. Рекомендуемый размер обложки 1590×400 пикселей. В шапке не может быть никаких рабочих кнопок, на которые можно нажать — по сути это картинка и все. На сегодняшний день обложка видна на мобильных устройствах, и вроде бы уже видна в приложениях и клиентах.

Wiki вкладка Свежие новости
В верхнем блоке под шапкой теперь могут находиться три вкладки: закреплённая запись, информация о сообществе и wiki-меню (только в группах, на публичных страницах такой вкладки нет). Акцент по-прежнему делается на закреплённую запись, однако даже при её присутствии пользователь теперь всегда будет иметь доступ к информации о сообществе, переключаясь по вкладкам. Чтобы появилась вкладка wiki-меню (она изначально называется Свежие новости), нужно перейти в Управление сообществом » Разделы » Материалы » Ограниченные (или Открытые) » Сохранить.

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

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

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

4. Баннер
Баннер (англ. banner — флаг, транспарант) — графическое изображение информационного, рекламного или побудительного характера. Баннер прикрепляется в виде картинки к записи и может иметь только одну внутреннюю ссылку. Многие до сих пор убеждены, что на главной странице с баннера можно сделать несколько ссылок. Это не так, только одна ссылка и все. Я бы выделила следующие виды баннеров.

4.1 Баннер информационный
Распространенный вид баннера, содержащий общую информацию о фирме, группе, услуге или мероприятии с развернутым перечнем преимуществ и прочими сопроводительными материалами. Часто используется как закрепленная запись в группе. Размер такого баннера 510х307 пикселя. При таком размере баннер по низу совпадает с аватаром. Если нет связки с аватаром, то можно использовать любые размеры. Я, например, использую размер 600х350 пикселей. Также удобен и набирает популярность сейчас формат квадрата 510х510 пикселей — при таком размере баннер занимает максимально большую площадь в новостной ленте.

4.2 Баннер для входа во внутреннее меню
Если в баннер из предыдущего пункта добавить броскую надпись «Открыть меню», то мы получим баннер, основная задача которого служить точкой входа во внутреннее меню. Иногда делают обманку в виде нескольких кнопок на баннер, но это иллюзия, при нажатии пользователь все равно попадает на внутреннюю станицу, а там уже каждая кнопка имеет свою собственную ссылку. Размер такого баннера 510х307 пикселя. При таком размере баннер по низу совпадает с автаром. Если вход в меню не завязан с аватаром, то можно делать любые размеры баннера, хоть узкую кнопку с надписью «Открыть меню». Главное, чтобы ширина баннера была не меньше 510 пикселей.

4.3 Карточка для репоста, акции
В последнее время особую актуальность приобрели карточки для репостов или акций. Ее задача — призыв к конкретному действию. В основном это «Вступи в группу, сделай репост или поставь лайк и выиграй приз». Такие баннеры используются в рамках рекламных компаний или акций как в собственных группах, так и для продвижения в других группах. Я обычно использую размеры 600х350 пикселей.

4.4 Баннер с gif анимацией
После того, как в начале года разработчики ВК сделали больший размер для gif картинок, гифки сразу встали в один ряд с информационными баннерами. Например, на гиф баннере можно дать изображения нескольких сменяющихся товаров или текстов — движение сразу привлекает внимание. А уж когда в июне была добавлена функция автозапуска gif анимаций в новостной ленте, то гифки стали объектом пристального внимания рекламщиков и маркетологов.

5. Конструкция аватар+закрепленный баннер
До недавнего времени эта модульная конструкция, состоящая из аватара и закрепленного баннера была самым популярным способом оформления групп. Более подробно о том, как делать такое оформление, расписано в уроке . С появлением шапки (обложки), возможно, популярность такого оформления слегка уменьшится.

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

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

Точки входа во внутренне меню
Хочу отметить один тонкий момент, которому частенько не придают значения. Иногда клиенты заказывают у меня внутреннее меню, но при этом абсолютно не представляют, как пользователь попадет в это самое внутреннее меню. А попасть в него можно двумя способами: либо через закрепленный баннер (см. пункт 4.2), либо через текстовую ссылку в верхней вкладке под строкой статуса (см. рисунок ниже). Иногда еще текстовую ссылку располагают в блоке «Ссылки» в правом столбце интерфейса.

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

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

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

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

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

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

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

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

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

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

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

Для наглядного примера буду сравнивать два баннера с размерами 1280*720 и 800*525. Да, кстати, размеры и качество баннера могут быть разные — тут самое главное — пропорции. Итак, вот как такой баннер выглядит в ленте новостей на разных устройствах:

ПК — СТАРЫЙ ДИЗАЙН ВКОНТАКТЕ

Как видите, у баннера с размером 800*525 справа получается отступ намного больше, чем при использовании размера 1280*720. Хотя он пошире и захватывает бОльшую область для просмотра через ленту новостей. Посмотрим, как будут эти баннеры выглядеть в новом дизайне ВКонтакте.

ПК — НОВЫЙ ДИЗАЙН ВКОНТАКТЕ

Ну что, в новом дизайне ВКонтакте оба этих размера отличаются только высотой, а ширина остается прежней. И, в отличие от старой версии ВК, справа не наблюдаем большого отступа. Зато баннер 800*525 захватывает намного бОльшую видимую область в ленте новостей, нежели размер 1280*720 — картинка выше и больше!

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

MOBILE — ЛЕНТА НОВОСТЕЙ

Также, как и в новом дизайне ВКонтакте, размер баннера 800*525 выглядит намного больше (выше), чем баннер с размером 1280*720. А это очень большой плюс для мобильной версии, потому что область просмотра новостей там небольшая и реклама с таким размером баннера захватит бОльшую ее часть!

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

ПК — старый дизайн ВКонтакте	ПК — новый дизайн ВКонтакте	Mobile — приложение ВКонтакте

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

Так как сейчас часть аудитории «сидит» ВКонтакте через новый дизайн, а большая часть через старый, то лучше использовать размер 800*525. Да, мы пробовали и заморачивались с другими размерами, пытаясь уменьшить отступ от правого края, но он только увеличивался и наименьший отступ (с учетом бОльшего просмотра через мобайл) получился с размером 800*525.

Чтож, на этом сегодня все. Спасибо за внимание и качественных вам промо! 😉

Спасибо за внимание!

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

Баннерная реклама ВКонтакте

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

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

Изображение и текст (145х85)
Большое изображение (145х165)
Продвижение сообщества (145х145)

Как создать баннер ВКонтакте

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

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

Как разместить баннер ВК

Отметьте самый подходящий вам формат и оформите баннер.

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

Установите оплату за 1000 показов или за переходы. Выбор будет зависеть от ваших целей: повысить узнаваемость бренда или привлечь трафик? Не забудьте дать название своей кампании.

Проверьте все данные и нажмите Создать объявление. После этого в разделе Рекламные кампании вы сможете запускать и останавливать показ баннера, а также отслеживать статистику.

Примеры баннеров ВКонтакте

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

БЕСПЛАТНО

Самое заманчивое и привлекающее внимание объявление – предложение получить что-то ценное бесплатно. Пользователи активно реагируют на это “волшебное” слово и рекламодатели этим пользуются.

ВЫЗОВ

Еще один эффективный прием – вызов: “Стань!”, “Узнай!”, “Слабо?”. Подобные формулировки мотивируют совершить действие.

ЦЕННОСТЬ

Самая очевидная стратегия привлечения трафика – рассказать о предлагаемой ценности.

ИНТРИГА

ЛИЧНЫЙ БРЕНД

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

ИЛЛЮСТРАЦИИ

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

МЕМ

Первое преимущество конструктора баннеров в том, что он доступен онлайн и не требует установки дополнительного программного обеспечения. Как видно на скрине, сам сервис небольшой и не перегружен ссылками меню, кнопками управления и различных настроек. На главной странице их всего 4. Нам потребуется раздел Мои проекты и Вдохновение (Inspiration). После авторизации через Фейсбук или обычной регистрации (емейл + пароль) мы можем приступить к созданию баннера, постера или пригласительного.

Как сделать баннер

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

Чтобы сделать баннер, достаточно просто начать. Перейдите на сайт конструктора.

Мы можем выбрать готовый дизайн из предложенной библиотеки готовых варантов. По сути, если нас устраивает картинка и оформление, мы можем только заменить текст на свой;
Либо, можно начать создавать с чистого листа, задав нужный размер или выбрав из предложенных форматов (для Фейсбук, Инстаграмм, Постер и др) и загрузив в сервис свою картинку.

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

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

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

Для работы с конструктором лучше использовать браузер Хром, так как я заметил, что Мозиле при сохранении, не вписывается расширение.png — это решается простым переименовываением файла и добавлением нужного (в котором скачивали) точка и название (png или jpg). Вроде все.

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

Что нужно знать для создания баннера «ВК»

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

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

Если вы не умеете создавать собственные картинки через популярные приложения для обработки картинок, например Adobe Photoshop, то рекомендуем вам прочитать следующий пункт статьи, где мы подробно расскажем, как сделать баннер. Если вы опытный пользователь, то стоит сказать, что требования к картинки следующие: 1590 x 400 px, а формат изображения JPG.

Как сделать баннер в группе «ВК» сверху

Для начала потребуется создать пустой холст, приложение желательно использовать то, в котором вы разбираетесь более-менее, но желательно научиться использовать Photoshop. В нем реализовано множество функций, способных сотворить шедевр, но для не принципиально. Главное - сделать холст строго 1590 x 400 пикселей, то есть 1590 в ширину и 400 в высоту - эти пропорции будут хорошо смотреться на любом мониторе. Если вы не знаете, как это сделать, снизу есть инструкция.

Как сделать баннер в группе «ВК» в Adobe Photoshop:

Откройте фоторедактор и нажмите кнопку «Файл», после чего «Создать».
В поле «Ширина» укажите значение 1590, а в «Высота» - 400, после чего нажмите ОК.
Теперь в этот холст можно поместить любое изображение и подогнать его сочетанием клавиш Alt+T.
В поле «Файл» найти кнопку «Сохранить как» и тип формата выбрать JPG.

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

Как сделать баннер в группе «ВК»:

Зайдите в вашу группу. Под аватаром будет надпись «Действия». После ее нажатия откроется окошко, где надо выбрать «Управление».
Среди всех возможных опций нужно найти «Обложка сообщества» - это то, что нам надо. Там вы найдете поле «Загрузка», в котором необходимо загрузить наше готовое JPG изображение.
Готово, теперь баннер будет размещаться на главной страничке сообщества.

В заключение

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