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

В архиве три шаблона: для ВК, Фейсбука и Ютуба. Файлы в формате PSD (Photoshop). Они имеют рекомендованный размер и уже расставленные направляющие под разные размеры экранов (настольные компьютеры и мобильные девайсы).

Разметка для шапки группы/паблика Вконтакте

Хочу сразу предупредить, что на мобильных устройствах шапка обрезается по краям и немного сверху. Об этом ВК ничего не пишут при загрузке обложки. Методом научного тыка я определил ширину безопасной области в 1200 px (внутренние направляющие макета). Если окажется, что я все же промахнулся, сообщите мне в комментариях. Поправлю.

Разметка обложки группы/паблика Facebook

• 820×312 px для настольных компьютеров,
• 640×360 px для мобильных устройств,
• 851х315 px а вот этот размер считается у них оптимальным и самым быстрозагружаемым.

Почему-то для мобильных размер больше, чем рекомендуемый размер обложки для ПК. В макете сделал размер 851х360.

Разметка обложки канала Youtube

• 2560х1440 px для телевизоров,
• 2560х423 px для настольных компьютеров и ноутбуков,
• 1855×423 px для планшетов,
• 1546×423 px для мобильных.

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

На этом все. Надеюсь, вам пригодится. Спрашивайте в комментариях, если что-то неясно. Успехов вам в творчестве!

Хотите украсить свою группу в ВК (Вконтакте) и создать для неё уникальную шапку (обложку)? В данной статье я расскажу о том какого размера и формата она должна быть, как добавить шапку в ВК, так же выложу исходник PSD (формат photoshop-а) шаблона нужного размера.

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

Что из себя представляет шапка в группе в ВК? Это просто картинка, размером 1590×400 и форматом - JPG, GIF или PNG. Находится она сверху в группе ВК, выглядит так:

Шаг 1. Создаём изображение нужного размера.

Для начала нам необходимо создать саму картинку, для этого я использовал Photoshop (Скачать готовый шаблон в формате PSD можно ). Открываем фотошоп, выбираем в меню «Файл» -> «Создать» («File» -> «Create»).

Появится окно, где необходимо укачать размеры изображения, ширина у нас будет 1590 px, высота 400. Цветовые режимы можно оставить по умолчанию. Нажимаем «ОК»

Хочу заметить, что изображение может быть и большего размера, при добавлении изображения ВК сам предложить его обрезать по нужным ему размерам. Выше ширины 400 px не советую что-то добавлять, ВК отрежет часть картинки.

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

Шаг 2. Меняем шапку в группе ВК.

Далее нам необходимо загрузить в группу ВК наше изображение. Для этого заходим в нашу группу, в правом верхнем углу (под аватаркой группы) нажимаем «три точки» (…), из выпадающего меню выбираем «Управление сообществом».

Появится окно с предложением загрузить изображение, нажимаем «Выбрать файл»

Выбираем наше изображение и появляется окно с возможностью обрезать изображение, так как у нас всё соответствует нужным размерам нажимаем «Сохранить и продолжить»

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

Менять шапку (обложку) Вы можете сколько угодно раз.

Вот мы и создали свою шапку для группы в ВК.

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

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

Размеры обложки сообщества Вк и новые функции

Чтобы загрузить обложку, зайдите на страницу управления сообществом и на первой же странице нажмите «Загрузить» напротив пункта «Обложка сообщества». Обложка имеет размер 795x200 px или 1590x400 px для экранов повышенной чёткости.

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

На месте закрепленной записи теперь располагаются в виде вкладок три типа информации:

• закрепленная запись
• информация о сообществе
• меню сообщества (если оно сделано)

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

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

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

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

6 лайков

Тема этой статьи — новый дизайн ВКонтакте. Снова поменялось , теперь можно установить горизонтальную обложку в группе. Оформление вашего сообщества ВК с такой шапкой намного интереснее. Откровенно говоря, здесь не требуются знания Photoshop. А можно без особых навыков сделать красивую картинку даже в PowerPoint, Fotor, Canva, Pixlr Editor.

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

Загрузка новой обложки

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

Затем кликаем на последнюю, и загружаем новую обложку группы ВКонтакте. Вот тут и можно понять, что файл загрузки может быть любой величины! Но не меньше, чем размер 1590×400 px. Создаем прототип обложки в любом редакторе. Далее мы можем выделить и сохранить ту область, которая соответствует требованиям ВК. Вот подсказка, где найти изображение для обложки, каким редактором воспользоваться, чтобы

Чем интересен новый дизайн ВКонтакте?

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

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

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

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

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

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

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

P.S. Надеюсь эта информация Вам пригодится.

P.S.S. Включайте свою креативность и удачи Вам во всех начинаниях!

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

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

“СтопХам” также идут в ногу со временем: на их страничке можно увидеть превью свежего видео и имя последнего вступившего участника. К сожалению, хотя информация о количестве просмотров меняется в реальном времени, это - не настоящий embed, и посмотреть ролик прямо во ВКонтакте не выйдет.

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

Одним словом, вариантов применения масса. Вопрос лишь в том, как создать подобную красоту? На самом деле, не так уж и сложно.

Конструкторы для создания динамических обложек ВКонтакте

Чтобы получить в свое распоряжение интерактивную шапку, можно пойти двумя путями:

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

2. Использовать онлайн-конструктор - гораздо дешевле, но при этом вы будете ограничены набором виджетов, который вам предоставили разработчики.

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

Google услужливо подсказывает название - DyCover. С точки зрения цены вариант неплохой: ребята берут 100 рублей в месяц за одно сообщество, тогда как их конкуренты, LetsCover, ровно в два раза больше. Впрочем, у последних есть прогрессивная скидка за объем, так что данная площадка придется по вкусу тем, кто занимается SMM профессионально и ведет одновременно несколько проектов.

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

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

Как верно заметил электронный помощник, перед созданием динамической обложки необходимо подобрать подходящий фон. Оптимальные размеры бэкграунда - 1590 на 400 пикселей, однако все значимые графические элементы и сами виджеты следует располагать на центральном отрезке 1196 на 400. Все дело в том, что на мобильных устройствах баннер обрезается (по 197 пикселей с каждой стороны), а значит, поклонники портативных девайсов попросту не увидят важную информацию.

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

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

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

Теперь перейдем в раздел “Виджеты” и оценим их ассортимент. С первого взгляда список не особо впечатляет.

На самом деле первое впечатление обманчиво. Так, например, виджет “Текст” позволяет создавать как обычные текстовые блоки, так и подгружать ячейки из Google-таблиц, задействовать каскадные стили или JSON. “Подписчик” отображает имена самых активных пользователей, лучших комментаторов (по количеству или лайкам), репостеров, авторов (по рейтингу записей из “предложки”), именинников или последних вступивших в группу. “Статистика” транслирует общее число подписчиков, количество юзеров онлайн, а также сводные данные, включая гендерное распределение. Таким образом, комбинируя представленные инструменты, вы сможете конструировать динамические обложки ВКонтакте практически любой сложности.

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

1. Текст (название города);
2. Фигура (полупрозрачный белый круг);
3. Дата и время;
4. Погода.

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

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

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

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

Стоят ли динамические обложки своих денег?

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