Как сделать обложку сайта

Добавил пользователь Евгений Кузнецов
Обновлено: 09.09.2024

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

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

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

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

Более 2000 рекламных агентств и фрилансеров уже работают с сервисом.
Подключиться можно самому за 1 день.
Зарабатывайте с первого потраченного рубля, без начальных ограничений, без входного барьера.
Выплаты на WebMoney, на карту физическому лицу, реинвестирование в рекламу.
У вас остаются прямые доступы в рекламные кабинеты, рай для бухгалтерии по документообороту и оплатам.

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

Рекомендованный размер обложки для группы ВКонтакте — 1590x400 пикселей.

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

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

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

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

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

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

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

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

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

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

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

Как создать обложку для группы ВК в Canva

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

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

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

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

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

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

Заключение

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

Здесь сразу видна фоновая фотография и заголовок, который можно отредактировать:

Настройки:

Здесь видны три текстовых блока, которые размещены на обложке. Их можно отформатировать в редакторе и задать им стили. Для тех, кто хочет самостоятельно дополнительно настроить текст, есть возможность HTML-редактирования (кнопка ).

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

Стиль:

Здесь можно поменять фотографию обложки и задать множество различных параметров. Например, 100vh — это высота экрана, сейчас это 100% от высоты экрана. Можно сделать, например, 50, и обложка будет занимать половину экрана.

Есть вид обложки: можно сделать обложку статичной или прокручивающейся.

Можно установить вместо фоновой фотографии видео. Для этого нужно вставить ссылку на нужное видео с Youtube или Vimeo. С бэкграундным видео есть нюанс: оно не проигрывается на телефонах, и там будет виден просто серый фон.

Можно настроить уровень непрозрачности, задать отступы.

Фоновую картинку можно:

загрузить с компьютера;
добавить из избранных;
выбрать из стандартного набора обложек;
найти на фотобанке (все картинки из фотобанка Pixabay доступны для бесплатного использования).

Для увеличения скорости загрузки страницы изображение обложки оптимизируется. При этом оно сжимается до 2000 px по горизонтали. Чаще всего, при оптимизации изменение качества изображения незначительно.

Вам необходимо сделать сайт, но вы не знаете каким он должен быть? Что разместить на нем, как оформить, с чего начать? Одни сплошные вопросы! А самое главное — хочется чтобы он был современным, удобным, стильным, понятным. Как же этого добиться? Где взять идею и хоть какие-то примеры?

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

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

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

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

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

Фоновое изображение за текстом

Яркие фоны красные, сочные тона

Сочный фон и неоновые оттенки

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

Помощь в подборе цвета

1. Пользуйтесь подсказками различных сервисов по подбору цветов, которые могут сочетаться друг с другом. Одним из таких сервисов является ColorScheme (можете пройти по ссылке, откроется в новом окне).

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

2. Второй сервис, который я сама очень люблю — это IMGonline (ссылка кликабельна и откроется в новом окне). Фотографии и изображения, которые у вас есть для размещения на сайте вам очень помогут определиться с выбором цвета. Просто загрузите фотографию в сервисе и она выдаст вам: палитру цветов, используемых на фотографии и номер этого цвета в rgb.

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

Требования заказчика

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

Выбор цвета и темы (светлой или темной) так же зависит от ниши в бизнесе, для которого делается сайт.

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

Читайте также: