Как оформить обложку сайта – первый экран

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

Никита Обухов

Основатель Tilda Publishing

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

Содержание

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

Делаем обложку сайта. С чего начать

Основное правило при создании обложек: главное — это текст, фотография стоит на втором месте.

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

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

Главная страница образовательного журнала платформы для создания сайтов Tilda Publishing.

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

Шаблон сайта компании ремонта квартир. Фото на обложке: Depositphotos

Бесплатные изображения для сайта можно найти на профессиональных фотостоках, распространяющих картинки по лицензии Creative Commons Zero (CC0). Это значит, что изображение освобождено от ограничений авторского права, то есть его можно как угодно использовать и изменять, в том числе в коммерческих целях.

Примеры ресурсов с качественными изображениями: Unsplash, Pexels, Stocksnap, Rawpixel.

Яна Плющева

Дизайнер Tilda Publishing

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

Как выбрать фотографию на обложку

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

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

1. Располагайте текст на однородной области фотографии

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

Шаблон Floristry studio в Тильде

Доставка еды Elementaree: elementaree.ru

Расписание тренировок MyVenYoo: myvenyoo.com

Фотография содержит мелкие детали, но в пустое пространство в центре заголовок вписывается идеально

Шаблон онлайн-магазина в Тильде

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

Описание трудно прочесть из-за неоднородности фона. Сайт онлайн-фоторедактора Pixlr: pixlr.com

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

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

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

Шаблон лендинга для конференции на Тильде

Яна Плющева

Дизайнер Tilda Publishing

Моя цель — подобрать такое изображение, чтобы пользователь точно понял тему страницы. Это значит, что фотография должна отражать тему либо конкретно (интерьер со стульями для мебельной мастерской), либо косвенно (красивое морское побережье для лендинга турагентства). Чтобы подобрать изображение с косвенной темой, нужно понять, что в итоге получит клиент, или поставить фотографию с атрибутами, характерными именно для этой темы.

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

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

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

Атрибуты массажного кабинета собраны в композицию. Фото выглядит как иллюстрация

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

2. Работайте с простыми фигурами

Впишите текст в пространство фотографии. Например, расположите его на стене дома. Однотонный фон не мешает чтению.

Шаблон на Тильде из категории «Контакты».

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

Фон кажется однородным, но текст проваливается в детали и не читается

3. Ставьте текст в область с незначимыми деталями

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

Шаблон «Персональный гид» в Тильде

Курсы по созданию и проведению презентаций: presentation10.com

Сайт диджитал-компании 80/20: 8020-digital.de

Если человек на снимке располагается по центру, не ставьте текст на лицо. Лучше опустить его ниже, в районе корпуса.

Текст не закрывает лица героев снимка. Сайт Московского Велопарада: i-bike-msk.ru

Сайт кавер-группы Hard Candy Show: hardcandyshow.ru

Магазин солнцезащитных очков Westward Leaning: westwardleaning.com

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

Оптимальный размер фотографии для обложки в Тильде

Формат: jpg
Размер: 1680×900 px
Кол-во точек на дюйм: 72 dpi
Цветовая модель: RGB
Степень сжатия: 10

Подобрали фон, но текст плохо читается. Что делать

Глушить градиентом.

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

Лэндинг образовательного путешествия школы ИКРА в Красной поляне. open.ikraikra.ru

Сайт диджитал агентства. dotbeto.com

Обложка CR15 в Тильде с затемнением в 80%

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

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

Настройки обложки в Тильде. Две настройки фильтра — цвет и непрозрачность. Чем выше процент непрозрачности, тем плотнее заливка цветом.

Из-за затемнения фон кажется слишком мрачным. Исправляем

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

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

Справочный центр Тильды: help-ru.tilda.ws

Обложка сайта lordz.ch

Сайт студии веб-дизайна SpicyWeb: spicyweb.com.au

Страница конференции для маркетологов OnBrand: onbrand.me

Чтобы сделать цветной градиент в Тильде, задайте цвет верхнего и нижнего фильтра в настройках. Можно поставить однотонное тонирование или сделать комбинацию из пары оттенков. Интенсивность цвета фона зависит от значений в поле «Непрозрачность».

Настройки цвета фильтра в Тильде

Добавляем цвета

Можно красить не только фон, но и текст. Или работать с тонированием фона и цветом текста одновременно. Но тут нужно быть очень аккуратным, чтобы сайт не стал аляповатым и неаккуратным.
Совет: выберите два цвета и используйте один в качестве основного (90%) и второй как акцент (10%).

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

Сочетать два цвета — не самая простая задача. Но если с ней справиться, получается ярко и необычно. Промостраница музыкального сервиса Spotify

Более простой вариант — добавлять один яркий цвет к белому или черному. Сайт агентства презентаций Slides Agency. slides.agency

Пример использования очень яркого цвета в качестве акцента

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

Чтобы подобрать подходящий цвет для текста или фона пользуйтесь онлайн-инструментами.

На Colorscheme легко составить цветовую схему из нескольких цветов, которые хорошо сочетаются друг с другом.

Ресурс Materialpalette поможет создать цветовую палитру для материального дизайна и подскажет, каким оттенком оформить основной текст, а какой поставить на фон.

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

Какие еще есть способы оформления?

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

Спецпроект Амплифера: amplifr.com/school-grants

Бюро презентаций RocketSlides: rocketslides. pro

Яна Плющева

Дизайнер Tilda Publishing

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

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

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

Шаблон сайта ювелирного магазина в Тильде

Страница книги по интерьерному скетчингу: quicklybook. ru

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

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

Диапазон видимости на мобильных устройствах: от 0 до 980 px.
Диапазон видимости на десктопных устройствах: от ≤980 px.

Корректировка мобильной версии сайта

Краткая инструкция по созданию обложки

Выберите фоновое изображение, которое не спорит с текстом: без сюжета в центре и мелких деталей.

Размещайте текст на однотонной, однородной области снимка.

Если мелкие детали мешают чтению, приглушите фон темным градиентом.

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

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

Текст: Никита Обухов, Яна Плющева
Редактура, дизайн, верстка: Лера Мерзлякова, Ира Смирнова
Иллюстрации: Юлия Засс

Если материал вам понравился, расскажите о нем друзьям. Спасибо ✌️

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

Дэвид Рудник: «Не существует учебника, который научит создавать что-то новое»

#madeontilda Школа дизайна Controforma

Оформление сайта — правила и требования работы с текстом и изображениями

В чем заключается работа дизайнера — правильный дизайн от Дэниэла Бурка

Как делать красивые статьи на Тильде

Визуальная иерархия сайта: оформление и организация контента

Флэт (flat) дизайн: лучшие практики плоского дизайна

Как правильно писать тексты для сайта

Картинки для сайта — как подбирать фото и изображения на фотостоках

Где скачать иконки для сайта бесплатно?

Где найти фото — руководство по поиску картинок для сайта или статьи

Анализ и подготовка контента при создании сайта

Как написать текст для лендинга — создание текста для landing page

Шрифт для сайта — как выбрать или поменять шрифты

Размеры изображений для 9 социальных сетей — справочник

Необходимый минимум книг для дизайнеров

Работа с обложкой

TILDA HELP CENTER

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

Фоновое изображение

Как правильно подобрать фоновое изображение: размеры, формат, пропорции

Перейти

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

Настройка заголовка, подзаголовка и остального текста

Перейти

Высота обложки

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

Перейти

Фильтр на обложке

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

Перейти

Видео в обложке

Настройка видео, которое будет отображаться на фоне или при клике на кнопку Play

Перейти

Мобильная версия

Как сделать так, чтобы обложка хорошо смотрелась на мобильных устройствах

Перейти

Форма на обложке

Настройка приема данных сразу на первом экране

Перейти

Таймер на обложке

Добавление таймеров обратного отсчета до определенного времени и даты

Перейти

Конвертация в Zero Block

Как конвертировать обложку и доработать в редакторе Zero Block

Перейти

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

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

Видимая часть браузера

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

Фоновое изображение

Изображение для фона обложки загружается в Контенте блока → Фоновое изображение.

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

Оптимальный размер изображения для фона:

Формат: jpg
Размер по ширине: 1680 px
Кол-во точек на дюйм: 72 dpi
Цветовая модель: RGB
Степень сжатия: 10

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

Справочная статья об оптимизации изображений для сайта

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

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

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

Наполнить обложки текстом можно двумя способами: с помощью панели «Контент» блока и при клике на текст на странице редактирования страницы.

Редактирование текста при клике на блок

Редактирование текста в Контенте блока

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

Форматирование текста с помощью верхней панели

Изменения форматирования в настройках блока

Чтобы сделать классную обложку, читайте статью «Как сделать обложку» с практическими примерами сочетания текста и фонового изображения и статью «Как сделать продающий оффер (УТП) для сайта» для того, чтобы ваша обложка помогла привлечь внимание в первые 10 секунд.

Изменение высоты обложки

Узкая обложка — это обложка по высоте не 100%, а около 60 или 70%. В этом случае у обложки скорее утилитарная, чем имиджевая функция, ведь акцент смещается на информацию, которая следует за ней.

Для создания таких обложек в настройках блока есть параметр «Высота». Задавать высоту можно либо в пикселях (например, 400px), либо в процентах от высоты экрана (vh, 1vh равен 1% области просмотра экрана). Задавать высоту в vh предпочтительнее.

Цвет обложки: настройка фильтров

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

Настройки фильтров в Контенте блока

Пример обложки нашего справочного центра — фильтр постепенно переходит в сплошной оранжевый цвет

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

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

Градиент и заливка цветом

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

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

Видео в обложке

Вместо статичного фонового изображения обложки можно поставить видеоролик. Два  способа это сделать.

Ссылка на ролик YouTube

Загружаете или находите ролик на YouTube. Заходите во вкладку Контент и вставляете в нужное поле ссылку на ваш ролик. Получается обложка с видео.

Our Company

Experts in the art

Art Basel stages art shows for high quality modern and contemporary art and is sited annually in Basel, Miami Beach and Hong Kong

Ссылка на ролики в форматах webm и mpeg4

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

Заходите во Контент обложки и вставляете в нужные поля ссылку на ваш ролик в обоих форматах.

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

Важный момент: Cейчас загрузить свой видеофайл на Тильду не получится, но можно использовать сторонние сервисы, которые отдают прямую ссылку на файл.
Некоторые из популярных облачных сервисов тоже отдают прямую ссылку на файл, например, для получения прямой ссылки на файл на Dropbox нужно заменить в ссылке dropbox.com на dl.dropboxusercontent.com. Также вы можете загрузить файл на свой хостинг, например, на Selectel c помощью инструкции http://help-ru.tilda.ws/file-uploading#selectel.

Обложка в мобильной версии

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

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

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

Форма на обложке

Форма приема данных является частью дизайна обложек CR26 (одно поле подписки), CR26AN (форма с несколькими полями в строку), CR32 (вертикальная форма справа), CR34 (форма записи на обложке с таймером), CR36 (обложка с видео/изображением c одной стороны и формой с другой).

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

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

Справочная статья о настройке форм приема данных

Добавление таймера обратного отсчета

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

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

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

Конвертация обложки в Zero Block

Блоки с обложками — это продуманные примеры хорошего дизайна, которые автоматически адаптируются под все устройства. Но иногда нужно добавить элемент или сделать свою собственную обложку. Это можно сделать с помощью редактора Zero Block.

Справочная статья о Zero Block

Многие блоки с обложками можно конвертировать в Zero Block для последующей доработки. Для этого нужно зайти в настройки блока, прокрутить вниз и нажать на кнопку «Конвертировать в Zero Block».

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

Пример: как обрезать изображение для обложки

Вертикальное изображение

Квадратное изображение

Узкое горизонтальное изображение

Горизонтальное изображение с соотношением сторон 16:9

Бесплатный онлайн-редактор фотографий для обложек Facebook

Бесплатный онлайн-редактор фотографий для обложек Facebook — Fotor

Начните с различных шаблонов фотографий для обложек Facebook одним движением

Графика обложки Facebook — самая заметная часть вашей страницы. Независимо от того, разрабатываете ли вы дизайн для своего личного профиля в Facebook или для бизнес-страницы, вам нужно будет придать ему выдающийся визуальный вид. Создатель баннеров Facebook от Fotor предлагает широкий выбор шаблонов фотографий для обложек Facebook, которые соответствуют требованиям к размеру фотографий для обложек Facebook. С их помощью вы можете за считанные секунды создавать и персонализировать свои собственные потрясающие обложки временной шкалы Facebook. Попробуй сейчас!

Более простой способ создать обложку для Facebook

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

Создайте свои обложки для Facebook

Настройте свои баннеры для Facebook

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

Создайте свои фотографии для обложек Facebook

Универсальное средство для создания графического дизайна Facebook

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

Создайте фото для обложки Facebook

Почему стоит выбрать программу Fotor для создания обложек для Facebook?

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

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

Экономьте время и деньги.

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

Правильный размер обложки Facebook.

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

Загрузите собственное изображение и логотип.

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

Можно переключать другие форматы и размеры.

Хотите использовать дизайн обложки Facebook в другом месте? Нажмите кнопку «Изменить размер», чтобы легко изменить его размер до любых других размеров, которые вам нужны.

Легко скачать и сохранить.

На выбор доступны JPG, PNG, PDF и другие форматы сохранения.

Создайте фото для обложки Facebook

Как создать обложку для Facebook?

• Нажмите кнопку «Создать фото для обложки Facebook».
• Найдите «Шаблоны» в левом меню инструментов и выберите «Обложка Facebook».
• Затем вы можете выбрать один из сотен предустановленных шаблонов фотографий для обложки Facebook, чтобы ваш дизайн был на высоте.
• Или вы также можете загружать свои фотографии, перетаскивать их на холст и создавать свои собственные с нуля.
• Изменяйте и проектируйте, настраивайте, выбирая тексты, шрифты, наклейки, узоры, текстуры и фоновые рисунки. Не забывайте управлять наложениями, чтобы максимизировать визуальное воздействие вашей обложки.
• Сохраните обложку Facebook, затем выберите нужный формат и размер. Вы также можете поделиться им напрямую в социальных сетях.

Создайте обложку Facebook

Часто задаваемые вопросы об обложке Facebook

Рекомендуемые популярные обложки Facebook

Популярные категории обложек Facebook

Как создать обложку для веб-сайта

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

Никита Обухов

Тильда Основатель и генеральный директор

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

Содержание:

Обложка веб-сайта: Начало работы
Как выбрать обложку
Обложка затрудняет чтение текста. Как это исправить
Затемнение делает фон слишком мрачным. Как это исправить
Добавление цветов
Дизайн обложки Идеи для вдохновения

Обложка веб-сайта: начало работы

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

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

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

Главная страница магазина толстовок, jelsanaves.tilda.ws

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

Шаблон сайта для компании по ремонту домов. Фото на обложке: Depositphotos

Бесплатные изображения для ваших цифровых проектов доступны на профессиональных веб-сайтах со стоковыми фотографиями, распространяющих изображения под лицензией Creative Commons Zero (CC0). Это означает, что изображение свободно от ограничений авторского права: другими словами, его можно использовать и изменять любым возможным способом, в том числе в коммерческих целях, не спрашивая разрешения.

Вот несколько источников бесплатных высококачественных стоковых фотографий: Unsplash, Pexels, Stocksnap, Rawpixel.

Яна Плющева

Старший дизайнер Тильды

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

Как выбрать обложку

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

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

1. Разместите текст на чистом незагроможденном участке фотографии

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

Студия флористики, шаблон Тильда

Доставка еды Elementaree: elementaree.ru

Расписание тренировок MyVenYoo: myvenyoo.com

На фото есть мелкие элементы, но название идеально вписывается в пустое место в центре

Онлайн Магазин, шаблон Тильда

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

Сообщение трудно прочитать из-за неравномерного фона. Обложка веб-сайта онлайн-фоторедактора: pixlr.com

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

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

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

Лендинг для конференции, Тильда шаблон

Яна Плющева

Старший дизайнер Тильды

Моя цель — подобрать изображение, которое правильно передаст посыл. Это значит, что товар или услуга должны быть представлены на фото либо прямо (интерьер со стульями в случае мебельной мастерской), либо косвенно (красивое побережье для сайта турагентства). Чтобы выбрать фотографию, которая косвенно связана с темой, подумайте, что клиенты ожидают получить, или включите изображения атрибутов, связанных с этой конкретной темой.

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

Гостевой дом, шаблон Тильда

Летний лагерь, шаблон Тильда

Услуги тайского массажа, шаблон Тильда

Стоматологическая клиника, шаблон Тильда

2. Работа с простыми формами

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

Шаблон Тильда (раздел «Контакты»)

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

Фон выглядит однородным, но текст теряется среди элементов и становится нечитаемым

3. Разместите текст в области с менее важными элементами

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

Шаблон «Частный гид» на Тильде

Консультант по ораторскому искусству

Сайт digital-агентства: 8020-digital. de

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

Промо-страница Performance, шаблон Тильда

Кавер-группа Hard Candy Show Сайт: hardcandyshow.ru

Магазин солнцезащитных очков Westward Leaning: westwardleaning.com

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

Рекомендуемые характеристики изображения для обложек Tilda

Формат: jpg
Размеры: 1680×900 пикселей
Количество точек на дюйм: 72 dpi
Цветовая модель: RGB
Коэффициент сжатия: 10

Изображение на обложке затрудняет чтение текста. Как это исправить

Затемните изображение с помощью градиентных фильтров.

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

Бизнес-конференция, Тильда шаблон

Сайт цифрового агентства. dotbeto.com

Обложка CR15 на Тильду с затемнением 80%

Текст намного легче читать на контрастном фоне. Но старайтесь не переусердствовать с затемнением, так как объекты на фотографии могут стать неразличимыми. Посмотрите на исходную яркость изображения, чтобы решить, как применить градиент: для некоторых фотографий достаточно 20 %, а другие должны быть затемнены на 70 % или больше. Попробуйте разные варианты.

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

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

Затемнение делает фон слишком мрачным. Как это исправить

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

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

Справочный центр Тильды: help.tilda.ws

Академия танцев: lordz. ch

Обложка веб-сайта цифрового агентства

Веб-страница студии дизайна SpicyWeb: spicyweb.com.au

Маркетинговая конференция OnBrand: onbrand.me

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

Цвет фильтра Настройки на Тильде

Добавление цветов

Вы можете раскрасить не только фон, но и текст. Кроме того, вы можете одновременно сочетать тонирование фона и цвет текста. Однако вы должны быть очень осторожны, чтобы избежать кричащего и кричащего вида вашего веб-сайта.

Совет: выберите два цвета и используйте один в качестве основного цвета (90%), а другой — в качестве акцентного (10%).

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

Сочетать два цвета — непростая задача. Но если умудриться, получается ярко и необычно. Рекламная веб-страница Spotify

Еще более простой вариант — добавить один яркий цвет на белый или черный фон. Обложка веб-сайта Slides Agency

Пример использования очень яркого акцентного цвета

Чтобы осветлить страницу и не сделать ее беспорядочной, добавьте всего один акцентный цвет

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

Coolors — это генератор цветовых схем, который помогает быстро проверить, хорошо ли сочетаются несколько цветов.

Materialpalette помогает создать цветовую палитру для материального дизайна, предлагая варианты цвета для основного текста или фона.

ColorHunt предлагает готовые палитры. Чтобы добавить оттенок на свою страницу, скопируйте его шестнадцатеричный код.

Дизайн обложки Идеи для вдохновения

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

Усилитель: amplifr.com

Лос-Анджелес Агентство дизайна и разработки веб-сайтов: vrrb.com

Яна Плющева

Старший дизайнер Тильды

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

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

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

Видео руководство по созданию интернет-магазина на Тильде

Ювелирный магазин, шаблон Тильда

Лепесток — Ответственный кредит для современного мира:petalcard. com

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

Отрегулируйте положение текста и изображений для обоих блоков. Затем используйте параметр «Блокировать видимость на устройствах» на панели настроек.

Диапазон видимости для мобильных устройств — от 0 до 980 пикселей.
Диапазон видимости для настольных устройств – от ≤980 пикс.

Как настроить мобильную версию сайта

Краткое руководство по созданию обложки

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

This entry was posted in Популярное