Размеры верхнего баннера в группах вк. Оформление сообщества в новом дизайне Вконтакте: сложно ли это

Аватар и баннер для группы вк.

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

Между баннером и аватаркой рассмояние 10 пикселей. Если бы над баннером захотите разместить еще информацию советую воспользоваться линейкой mySize и все вымерять, примерно вот так.
Здесь например расстояние не 50 пикселей как указано на предыдущей картинке, а 206. Все это будем учитывать при проведении направляющих в фотошопе.
Итак,начнем: Открываем фотошоп -> Файл -> Создать либо Ctrl+N.
Открывается окошко, пишем название и размер, но почему я взяла 2420 на 2000. Я просто увеличила наши размеры в 4 раза, на мой взгляд, так в вк выглядит лучше.

Теперь проводим направляющие. Если по краям нет линеечек, включим их: Просмотр -> Линейки либо Ctrl+R. Направляющие можно вытаскивать из них с учетом, что они показывают пиксели, для этого щелкаем на линейке правой кнопкой мыши и выбираем пиксели, если стоит что-то другое.
Есть еще один способ поставить направляющие: Просмотр -> Новая направляющая. Открывается окошечко, выбираешь сначала какая направляющая нужна, горизонтальная или вертикальная, потом куда поставить.
Ставим следующие направляющие горизонтальные: 0, 2000 (крайние), 200, 1360 пикселей; вертикальные: 0, 2420 (крайние), 1580, 1620 пикселей. И у нас получилась заготовка для наших аватарки и баннера.
С право верхнем углу я поставила закругление 30 пикселей, вы можете поставить любое, которое понравится вам. Выберем цвет отличный от белого у меня будет голубой и нарисуем наши аватарку и баннер, по направляющим.
Теперь подберем картинку, у меня группа по тематики дизайна, пусть картинка будет такой.
Перетащим её в наш документ.
Теперь копируем и один слой перемещаем на слой над авой.
Возьмем инструмент прямоугольник и нарисуем два прямоугольника вверху и снизу авы. Сверху будем располагать название группы, снизу - призыв к действию.
Проделаем с прямоугольниками тоже самое, то и с картинками прилепим их к аве. И перекрасим в цвет, который нам нравиться. У меня синий.
Призыву к действию не хватает кнопочки и стрелочек. А для название сделаем подчеркивание.
Стрелки нарисуем с помощью белых линий, либо скачаем в интернете и вставим. Для кнопочки, опять берем прямоугольник со скругленными углами. Делаем все на слое ниже нашей надписи! Убираем заливку до 0.
Открываем стиль слоя и заходим в обводку, делаем её белой примерно 4 пикселя. Ту опять на ваше усмотрение.
Под названием проводим две прямые линии. Раскрашиваем их в цвета: одну - чуть темнее основного, вторю - чуть светлее.
У меня в задумке на картинке будут надписи, так что надо сделать её не такой выделяющейся. Наложим на нее однородный полупрозрачный фон. Я долго игралась с цветами и способами наложения и пришла к следующему результату. Фон бежевого цвета - непрозрачность 80%, режим наложения - умножение.
Теперь мне кажется не хватает рамки по краям, делаю копию авы, уменьшаю и проделываю те же действия,чт ои для кнопочки, убираю заливку и делаю обводку. Также поступаю и с баннером.
Теперь можно устанавливать в группу. Для авки просто жмем загрузить новую фотографию и загружаем. Для баннера. Ставим ссылку на меню.удаляем когда внизу появиться ссылка как на скрине и жмем загрузить фотографию. Жмем отправить и обязательно, чтобы было от имени группы. Потом жмем на время отправления и появиться под постом кнопочки: редактировать, удалить, закрепить. Жмем - закрепить.
А вот и наше готовое оформление.
Надеюсь объяснила более менее понятно, если возникнут вопросы с радостью на них отвечу и постараюсь помочь разобраться. С благодарностью приму обоснованную критику, так как только учусь всему этому и опыта не так много как хотелось бы.
P.S. Бонус - аватар и баннер + шрифт, которые мы делали в статье. Изменяем текст, цвета и картинку и получаем прикольный готовый дизайн.

VK Баннеры

от 3 500 руб.

RUB Заказать

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

Таргетированные платные записи и рекламные баннеры VK, промо-посты в сообществах.
Записи в ленте вашего сообщества (группы).
Оформление страницы группы – верхний баннер сообщества ВКонтакте (обложка), аватар, верхний баннер меню с wiki-разметкой.

В настоящий момент ВКонтакте позволяет размещать статичные баннеры-картинки, GIF-анимации и видео. HTML5 анимированные баннеры пока не используются на страницах сети.

Рассмотрим различные виды и особенности создания баннеров для VK подробнее:

Баннеры для таргетированной платной рекламы ВКонтакте.

Текстово-графические блоки в левой части сайта.

Небольшие объявления (тизеры), включающие картинку и текст. Чаще всего используются два вида:

Картинка + текст длиной до 70 символов.
Большая картинка.

Оба варианта могут включать заголовок длиной до 33 символов.

Размеры изображения для баннера с текстом – 145х85px.
Для большой картинки – 145х165px.
Можно размещать JPG, PNG, BMP или GIF (без анимации) весом не более 5мб.

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

Примечание: Стоит учитывать, что эти небольшие баннеры в левой части сайта не показываются в мобильной версии VK на смартфонах.

Рекламные записи в новостной ленте ВКонтакте

Запись с кнопкой.
Универсальная запись.
Карусель.

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

Включает в себя:

изображение (картинка JPG, PNG или GIF (без анимации) минимальным размером 537x240px (рекомендуется загружать размер 1074x480px для дисплеев повышенной четкости);
текст записи до 220 символов;
текст описания рядом с кнопкой до 80 символов;
кнопку с призывом к действию (“Перейти”, “Купить”, “Заказать”), который можно выбрать из предложенного списка.

Рекламная запись с изображением.

Рекламная запись с GIF-анимацией.

В такую запись можно включить анимированный GIF-баннер шириной до 1000px.

Полезным для рекламодателя бонусом является то, что GIF баннер ВКонтакте проигрывается автоматически, без нажатия кнопки «Пуск», в режиме автоплей. Такой анимированный баннер в VK привлекает дополнительное внимание пользователя и выделяется на странице.

Ограничения по весу GIF-анимации для показа в режиме автоплей установлены в размере 10-12мб. Возможно размещение GIF-баннера весом до 50мб., но он будет проигрываться только после нажатия пользователем дополнительной кнопки.

Рекламная запись с видео.

Видео баннер для VK представляет собой встроенный в рекламную запись видеоролик. Возможна загрузка видео на сервер ВКонтакте или встраивание со сторонних видеохостингов (YouTube, Rutube, Vimeo).

Ограничение на размер видео – 2мб., продолжительность – до 30 минут. Максимальное разрешение – 1080p.

Карусель

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

Каждая карточка содержит:

квадратное изображение товара (минимальный размер 400x400px).
описание товара длиной до 25 символов.
мотивационную кнопку, текст которой можно выбрать из предложенного списка (“Открыть”, “Купить”, “Перейти” и прочих).
при желании, цену товара (старую и новую).

Всего карточек может быть от 3 до 10. Количество текста на изображении товара не должно превышать 50% площади картинки.

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

Общие требования и модерация.

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

С большей долей вероятности модератор отклонит баннеры, которые содержат:

грамматические ошибки;
слишком много восклицательных знаков и смайлов;
фразы, написанные заглавными буквам разного регистра (CAPS LOCK);
вульгарные и вызывающие отвращение фотографии.

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

Баннеры в записях ленты вашего сообщества (группы).

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

Баннеры – статичные изображения (в форматах JPG, PNG, BMP, GIF) c минимальной шириной 510px.
Рекомендуется загружать картинки большего размера, для сохранения их качества при сжатии. Точных рекомендаций ВКонтакте не дает, однако часто используется 2-х кратное увеличение картинки для сохранения четкости.

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

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

Анимированные GIF-баннеры (до 10-12мб. для автоматического проигрывания, шириной до 1000px (будет уменьшена при загрузке до ширины записи).

Видео-баннеры (ролики с разрешением до 1080p). Могут быть просмотрены как в ленте сообщества, так и в окне видеоплеера ВКонтакте.

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

Баннеры в оформлении страницы сообщества (группы).

На данный момент владельцу сообщества ВКонтакте предлагается на выбор два варианта оформления дизайна страницы:

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

Горизонтальный баннер-обложка располагается по всей ширине страницы группы – 795px. Рекомендуется загружать картинку размером 1590х400px, визуально она будет уменьшена вдвое без потери качества.

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

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

Минимальный размер картинки аватара – 200x200px. Максимальный – 200x500px. Визуально размер маленького круглого аватара будет уменьшен до 50px., поэтому надо позаботиться о том, чтобы аватарка была четкой, понятно, а главное, легко узнаваемой и запоминающейся.

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

Комплексный подход к размещению рекламных баннеров и оформлению сообщества ВКонтакте в едином стиле позволяет повысить узнаваемость и привлекательность бренда компании. А сочетание разнообразных форматов баннеров VK позволяет реализовать любую креативную идею и сделать вашу рекламную SMM-кампанию по настоящему продуктивной.

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

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

Первый способ сделать свое сообщество продающим и привлекательным — это стандартная схема «аватар+баннер+меню».

Аватар

Аватар остался в размерах 200 на 500 пикселей (но все-таки лучше 400 на 1000 с запасом качества), хотя изначально при бета-тестировании нового дизайна рассматривался такой вариант размера как 200 на 300. Миниатюра теперь круглая, но если эту окружность вписать в квадрат, то его размеры будут 200 на 200 пикселей, как и было ранее.

Баннер (закрепленная запись)

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

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

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

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

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

Аватар: 200 на 500 пикселей (качество 400 на 1000 пикселей);
Миниатюра аватара 200 на 200px
Баннер или размер закрепленной записи в группе: 1024 на 680 пикселей, но не менее 510px по ширине;
Меню: ширина 606px;
Обложка 1590 на 400 пикселей.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В заключение

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