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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итог

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

Что должно быть на обложке сообщества

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

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

  • Заголовок. Не переусердствуйте с креативом. Потенциальные подписчики должны сразу понять по заголовку, куда они попали и какую полезную информацию в паблике они могут почерпнуть.
  • Подзаголовок. С его помощью вы можете расшифровать или дополнить заголовок. Старайтесь быть лаконичными в формулировках.
  • Логотип. Если у вашей компании есть красивый и качественный логотип, разместите его в «шапке» группы. Этот элемент повысить узнаваемость вашего бренда.
  • Контактные данные. Телефон или email тоже можно указать на обложке группы. Например, если вы занимаетесь доставкой еды на дом и у вашей компании есть единый телефон для приёма заказов, разместите его в «шапке».
  • Фото ЦА. Ещё один способ донести до будущего подписчика, что ему будет полезна группа. Однако перед тем как разместить фотографию или картинку с ЦА, не забудьте провести анализ и составить портреты потенциальных клиентов.
  • Фото продукта. Если вы собираетесь продавать через паблик товары, используйте качественные фотографии продукции в «шапке».

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

Примеры хороших и плохих обложек для шапки группы ВКонтакте

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

Ещё один пример удачной обложки. «Шапка» не перегружена информацией - на ней присутствует только заголовок, логотип и фотографии товара. Детальная информация о деятельности сообщества размещена в статусе.

Лаконично, просто и со вкусом. На обложке нет ничего лишнего. Все нужные данные - часы и график работы, адрес, контактные телефоны - указаны в информации сообщества.

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

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

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

Чтобы сделать обложку в , не нужно проходить долгую регистрацию и покупать лицензию. Для входа можно использовать Google-аккаунт или профиль на Facebook.

Шаг 1. После авторизации в Canva приступайте к созданию обложки. Сделать это можно двумя способами - вручную, указав размеры «шапки» . Когда вы нажмёте на кнопку «Создать обложку для группы ВК», Canva откроет новый шаблон с рекомендуемыми размерами - 1590×400 пикселей - и вариантами макетов.

Шаг 2. Если вы не знаете, что разместить на обложке, поэкспериментируйте с бесплатными макетами. Примерьте варианты обложек, попробуйте изменить цвет фона, положение надписей, рамок и логотипов.

Шаг 3. Чтобы поменять фон обложки, загрузите в редактор своё изображение, кликнув по иконке «Загрузки» и нажав на кнопку «Загрузить собственные изображения».

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

Шаг 4. Чтобы наложить текст на обложку, кликните по иконке «Текст» и ознакомьтесь с типами надписей и шрифтами.

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

Шаг 5. Когда обложка будет готова, сохраните изображение, кликнув по кнопке «Скачать» в верхней части меню.

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

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

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

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

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

  1. Она позволяет улучшить оформление.
  2. Удается придать странице особенный стиль.
  3. Вам понравится новый дизайн.
  4. Обложка может рассказать о тематике сообщества.
  5. Группы с красивым оформлением вызывают наибольший интерес у пользователей.
  6. Люди будут охотнее подписываться на сообщество.
  7. Удается адаптировать изображение под полную и мобильную версию сайта.
  8. Создать обложку довольно легко, данная процедура не должна вызвать проблем.

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

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

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

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

Обложка для группы ВК: размер

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

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

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

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

Программа для создания обложки для группы в ВК

Доступные способы создания шапки для группы:

  1. Скачать готовую картинку для обложки.
  2. Сделать ее через онлайн-сервис.
  3. Заказать у специалистов.
  4. Воспользоваться фоторедакторами и создать самостоятельно.

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

Можно воспользоваться специальными программами – Adobe Photoshop, Pixelmator и т. д. Но вы должны уметь работать с данными приложениями, для их освоения потребуется время.

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

Adobe Photoshop – самая популярная программа для редактирования изображений. В ней можно быстро создать обложку при наличии определенных навыков. Основное преимущество данного способа – удается разработать уникальный дизайн.

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

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

  • Сразу укажите название файла.
  • Размер – 1590x
  • Фон – прозрачный.
  • Цветовой режим – цвета RGB 8 бит.
  • Разрешение – 72 пикселя на дюйм.

Теперь найдите картинку в интернете, скопируйте ее и вставьте в программу. Для адаптации размера нужно:

  1. Зайти в пункт «Редактирование».
  2. Затем в «Трансформирование».
  3. Теперь выберете раздел «Масштабирование».
  4. Зажмите Shift.
  5. Левой кнопкой мыши захватите угол изображения.
  6. Адаптируйте картинку под границы.
  7. Для подтверждения действия нажмите на Enter.

Нужно написать название сообщества. Для этого необходимо:

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

У вас получилась довольно простая обложка. По инструкции ее может сделать практически любой пользователь. Естественно, для создания шапки со множеством элементов потребуется куда больше времени.

  1. Открыть в меню «Файл».
  2. Выбрать пункт «Сохранить для Web».
  3. Указать набор PNG-24.
  4. Сохраните картинку.

Как выгрузить готовое изображение?

Для загрузки картинки в группу потребуется:

  • Зайти в сообщество.
  • Выбрать в меню пункт для управления.
  • Найти вариант с обложкой сообщества.
  • Выбрать пункт для загрузки.
  • Откроется форма для добавления.
  • Можно выбрать картинку в проводнике или перетащить ее в окно.
  • Загрузите ее на сайт.
  • Подтвердите сохранение.

Выйдите на основную страницу сообщества и оцените результат. Если вы соблюдали рекомендации относительно размеров, то картинка поместится полностью.

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

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

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

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

Но зачем нужна динамическая шапка? Вариантов ее использования множество:

  1. Можно выводить вашу CRM-систему.
  2. Удается создать таймер.
  3. Выводить день недели, дату, время.
  4. Показывать имена последних вступивших.
  5. Предоставлять дополнительную информацию.
  6. Такие обложки подойдут для групп компаний.

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

Как это работает?

Принцип довольно прост:

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

Зачем нужен скрипт?

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

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

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

Как подключить скрипт?

После выполнения проекта специалисты предоставят вам:

  1. Макет оформления.
  2. Исходники в формате PSD.
  3. Скрипт.
  4. Лицензионный ключ для привязки.

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

Для работы скрипта потребуется куда-то установить его. Есть несколько вариантов:

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

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

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

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

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

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

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

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


Эта статья также доступна на следующих языках: Тайский

  • Next

    Огромное Вам СПАСИБО за очень полезную информацию в статье. Очень понятно все изложено. Чувствуется, что проделана большая работа по анализу работы магазина eBay

    • Спасибо вам и другим постоянным читателям моего блога. Без вас у меня не было бы достаточной мотивации, чтобы посвящать много времени ведению этого сайта. У меня мозги так устроены: люблю копнуть вглубь, систематизировать разрозненные данные, пробовать то, что раньше до меня никто не делал, либо не смотрел под таким углом зрения. Жаль, что только нашим соотечественникам из-за кризиса в России отнюдь не до шоппинга на eBay. Покупают на Алиэкспрессе из Китая, так как там в разы дешевле товары (часто в ущерб качеству). Но онлайн-аукционы eBay, Amazon, ETSY легко дадут китайцам фору по ассортименту брендовых вещей, винтажных вещей, ручной работы и разных этнических товаров.

      • Next

        В ваших статьях ценно именно ваше личное отношение и анализ темы. Вы этот блог не бросайте, я сюда часто заглядываю. Нас таких много должно быть. Мне на эл. почту пришло недавно предложение о том, что научат торговать на Амазоне и eBay. И я вспомнила про ваши подробные статьи об этих торг. площ. Перечитала все заново и сделала вывод, что курсы- это лохотрон. Сама на eBay еще ничего не покупала. Я не из России , а из Казахстана (г. Алматы). Но нам тоже лишних трат пока не надо. Желаю вам удачи и берегите себя в азиатских краях.

  • Еще приятно, что попытки eBay по руссификации интерфейса для пользователей из России и стран СНГ, начали приносить плоды. Ведь подавляющая часть граждан стран бывшего СССР не сильна познаниями иностранных языков. Английский язык знают не более 5% населения. Среди молодежи — побольше. Поэтому хотя бы интерфейс на русском языке — это большая помощь для онлайн-шоппинга на этой торговой площадке. Ебей не пошел по пути китайского собрата Алиэкспресс, где совершается машинный (очень корявый и непонятный, местами вызывающий смех) перевод описания товаров. Надеюсь, что на более продвинутом этапе развития искусственного интеллекта станет реальностью качественный машинный перевод с любого языка на любой за считанные доли секунды. Пока имеем вот что (профиль одного из продавцов на ебей с русским интерфейсом, но англоязычным описанием):
    https://uploads.disquscdn.com/images/7a52c9a89108b922159a4fad35de0ab0bee0c8804b9731f56d8a1dc659655d60.png