Как сделать шапку в ВК в группе за 5 минут: как нарисовать шапку для сообщества + что такое живые обложки в группе и как их делать и видео урок

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

Как сделать шапку в ВК в группе

Из статьи вы сможете узнать следующие:

  • Какие размеры должен иметь баннер и как его загружать в сообщество ВК?
  • Как создать красиво шапку в ВК для своей группы с помощью Фотошоп CS6?
  • Рассмотрим, что такое живая обложка сообщества вк и как ее загрузить?
  • Как в фотошопе наложить текстуру на текст и сделать его объемным?
  • Дополнительный видео урок к статье + исходники для моей шапки для скачивания.

Как сделать шапку в вк в группе за 5 минут без знаний Фотошопа + пример





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

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

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

Важно: Размер главной обложки должен быть 1590х400 пикселей. Это размер главной шапки для нашего сообщества.

Загружаем шапку для сообщества ВК

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

как нарисовать шапку для сообщества ВК

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

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

Создание рамки в Фотошопе и вставка текста

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

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

2019 08 20 09 03 46

Совет: Для рисования рамки нам необходимо создать новый слой, иначе пункт «обводки» будет неактивен. Старайтесь каждый элемент делать на новом слое чтобы всегда можно было что-то удалить и подправить.





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

2019 08 20 09 05 24

Отлично. Мы получили белую рамку в фотошопе и теперь нам надо наложить текст на верхнюю границу рамки и нижнюю. Снимать пунктирное выделение надо комбинацией клавиш «Ctrl+D».

Тут просто выбираем инструмент «текст», подбираем красивый шрифт и пишем нужные нам надписи. Я использовал для текста шрифт: Blogger Sans. Вверху я написал «АВТОРСКИЙ БЛОГ», а внизу «SEO-БЛОГГИНГ-ЗАРАБОТОК», ну в принципе это тематика моего проекта.

2019 08 20 09 07 01

2019 08 20 09 07 39

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

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

2019 08 20 09 09 19

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

Как только выделили нужные нам области для вырезания нажимаем комбинацию клавиш «Ctrl+Delete» а потом снимаем выделение как писал выше. Вот такую прерывистую линию мы получаем в итоге:

2019 08 20 09 11 09

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

Как в фотошопе наложить текстуру на текст

Теперь переходим к более трудному и важному элементу это центральная надпись в которой будет главное название (в моем случае адрес моего блога FIRELINKS.RU). Для текста я выбрал шрифт: Phanton Extra Black. Все шрифты приложу к статье и под видео на своем канале.

Текст я пишу обычно с включенным Caps Lock, чтобы он смотрелся эффектнее. Как только написали текст переходим в правом нижнем меню в раздел эффекты «fx» и выбираем тиснение нашего текста, чтобы придать небольшой объём. Настройки выставляем как показано на скриншоте ниже:

2019 08 20 09 25 24

Чтобы наложить текстуру (любую картинку) на наш текст и сделать его более красочнее, нам необходимо найти нужную нам картинку. У меня название блога как вы знаете переводится «ОГНЕННЫЕ ССЫЛКИ», ну и тематика должна быть связана с огнем и пламенем.

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

2019 08 20 09 29 31

ВАЖНО: Слой с картинкой текстуры должен быть выше слоя с нашим текстом как показано на рисунке выше.

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

2019 08 20 09 31 19

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

2019 08 20 10 12 54

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

ИТОГ ШАБЛОН

— СКАЧАТЬ ШРИФТЫ  И ИСХОДНИКИ ИЗ УРОКА —

Живая обложка сообщества вк: что это такое и как сделать

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

Размеры для фотографии или видео должны быть:

  • 1080х1920 пикселей4
  • Длительность не более 30 сек для видео;
  • Записаны в кодировке H.264 (в Премьере делает все просто);
  • Вес файла не более 30 мб.

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

2019 08 22 14 29 24

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

capture 2

Заключение + видео

Для более полного понимания как сделать шапку в вк в группе я записал подробное видео в котором все разложил по полочкам, а вы сможете всегда заглянуть и посмотреть видео подписавшись на мой Ютуб канал: https://www.youtube.com/channel/UCl3eMhLphIS5XavLmLBvO_w.

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

Рейтинг
( 1 оценка, среднее 5 из 5 )
Руслан Галиулин/ автор статьи
Если вы решили чему-то научиться и познать что-то новое в сфере заработка в интернете и построении бизнеса, то вы на правильном пути, и мой блог — Вам в помощь.
Понравилась статья? Поделиться с друзьями:
Галиулин Руслан
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: