Обложки для сайта: сколько стоит разработать дизайн обложки на заказ у фрилансеров

Блок «Обложка» — Поддержка

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

В этом руководстве

Обучающее видео

Добавление блока «Обложка»

Чтобы добавить блок «Обложка», щёлкните значок + Вставка блоков и выполните поиск по ключевому слову «обложка». Щёлкните его, чтобы добавить блок в запись или на страницу.

💡

Чтобы быстро добавить новый блок «Обложка», в новой строке можно также набрать «/обложка» и нажать Enter.

Чтобы вставить блок «Обложка», воспользуйтесь командой «/обложка»

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

Выбор изображения

После вставки блока у вас будет две опции, чтобы задать изображение или видео: Загрузить и Выбрать медиафайлы:

1. Нажмите Загрузить , чтобы добавить новое изображение или видео со своего устройства.
2. Нажмите Выбрать медиафайл, чтобы выбрать изображение или видео на сайте, в Google Фото, библиотеке бесплатных фотографий Pexels или Openverse.

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

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

Позже этот цвет можно изменить в настройках блока.

Выбор блока «Обложка»

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

Выбор блока «Обложка» в виде списка.

Советы по выбору изображения

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

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

После выбора изображения на нём можно написать заголовок. Это пригодится, например, при создании нового раздела записи или страницы. Вы также можете добавить другие блоки, которые будут отображаться поверх блока «Обложка», например блок «Кнопка» или блок «Абзац».

Панель инструментов блока

После того как вы щёлкнете блок, поверх него появится панель инструментов со следующими опциями:

Панель инструментов блока «Обложка»

Среди этих опций:

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

Выравнивание

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

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

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

Расположение содержимого

Используйте функцию «Расположение содержимого», чтобы настроить расположение текста и другого содержимого на изображении:

Перемещение содержимого внутри блока с помощью функции «Расположение содержимого»

Выравнивание по всей высоте

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

Применение двухцветного фильтра

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

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

Показ избранного изображения в блоке «Обложка»

Используйте блок «Обложка», если вы хотите, чтобы избранное изображение автоматически отображалось в верхней части записи или страницы.

1. Добавьте избранное изображение в свою запись или на страницу.
2. Чтобы добавить Блок «Обложка», щёлкните значок + Вставка блока или введите «/обложка» в новую строку и нажмите Enter.
3. На панели инструментов блока «Обложка» щёлкните Добавить медиафайлы, а затем — Использовать избранное изображение. После этого автоматически подтянется текущее избранное изображение и будет добавлено в блок «Обложка».

Замена изображения

Это ещё одна опция панели инструментов блока «Обложка», которая появляется после добавления начального изображения или видео. Функция

Заменить позволяет выбрать новый медиафайл для блока «Обложка».

Замена изображения или видео в блоке «Обложка».

Настройки блока

Панель настроек блока

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

Настройки блока находятся на боковой панели.

Чтобы добавить эффект волны в нижней или верхней части изображения обложки, используйте раздел «Стили» в настройках блока «Обложка».

Фиксированный фон

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

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

Повторяющийся фон

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

Это просто одно изображение, повторенное много раз с помощью опции «Повторяющийся фон».

💡

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

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

Попробуйте «поиграть» с этими настройками, чтобы найти вариант, соответствующий вашим требованиям.

Средство выбора точки фокуса

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

Альтернативный текст

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

Очистка медиафайлов

Чтобы очистить обложку и использовать сплошной цветной фон, нажмите «Очистить медиафайлы», как указано ниже:

Нажмите «Очистить медиафайлы», чтобы убрать изображение обложки

Цвет наложения

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

Добавьте цветное наложение и установите уровень его непрозрачности.

Непрозрачность

Этот ползунок позволяет установить уровень непрозрачности наложения для изображения обложки. При перемещении ползунка в сторону значения 100 наложение становится более тёмным и непрозрачным, а при перемещении в сторону значения 0 ― более светлым и прозрачным. При значении непрозрачности 100 наложение становится полностью непрозрачным, а изображение обложки — невидимым. При значении непрозрачности 0 наложение полностью исчезает, оставляя видимым только изображение.

💡

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

Настройки оформления

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

Если настройка не отображается, щёлкните три точки справа от элемента Настройки оформления (как показано справа). Затем можно выбрать необходимую опцию:

• Размер шрифта
• Семейство шрифтов
• Внешний вид
• Высота строки
• Оформление
• Регистр
• Интервалы

Настройки оформления на боковой панели «Настройки блока» с дополнительными опциями.

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

Кроме того, можно указать конкретное значение, щёлкнув значок слайдера над опциями по умолчанию (он отмечен цифрой 1 на снимке экрана ниже). Вы можете изменить единицы измерения, щёлкнув в области, отмеченной цифрой 2 на снимке экрана ниже. Можно выбрать пиксели, em или rem.

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

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

Параметр Высота строки задаёт интервал над текстом и под ним. При выборе значения «ноль» обязательно проверьте свой сайт на мобильном устройстве.

Параметр Оформление содержит опции подчёркивания и перечёркивания.

С помощью параметра Регистр можно изменять регистр текста: все прописные буквы, заглавная первая буква или все буквы строчные.

Параметр Интервалы задаёт интервал между всеми знаками в тексте. Значение единицы измерения по умолчанию (пиксели) можно изменить на проценты, em, rem, vw и vh. Дополнительные сведения об относительных единицах можно найти здесь.

Размеры

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

Вы также можете добавить отступ, чтобы увеличить пространство вокруг содержимого блока «Обложка».

Видео в блоке «Обложка»

Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

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

Обратите внимание, что блок «Обложка» не воспроизводит звук видеофайла. Если нужно, чтобы видео было со звуком, используйте блок «Видео».

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

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

Дополнительно

На вкладке дополнительных настроек можно добавить к блоку класс CSS, что позволяет записывать пользовательские CSS и настраивать стиль блока по своему усмотрению. Дополнительные сведения.

Ваша оценка:

Обучающая платформа VK — Размеры изображений для оформления сообщества

Размер аватара для сообщества

Размер миниатюры аватара — 200×200 пикселей.

Минимальный размер целого аватара — 400×400 пикселей.

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

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

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

Оформление аватара на мобильной версии сайта и в приложениях: с живой обложкой и без неё

Оформление аватара на десктопе в сообществе с обложкой

Оформление аватара на десктопе в сообществе без обложки

Размер главной обложки для сообщества

Размер главной обложки сообщества — 1590×530 пикселей.

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

Пример отображения обложки сообщества

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

Размер живой обложки для сообщества

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

• Свёрнутая обложка — часть, которую пользователь видит, когда заходит в сообщество.

• Развёрнутая обложка — часть, которая раскроется на весь экран после клика по свёрнутой обложке.

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

Видимые области свёрнутой и развёрнутой обложки

Размер изображений для записей

Минимальный размер квадратного изображения — 510×510 пикселей.

Для прямоугольного изображения рекомендуем соотношение сторон 3:2.

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

Размер обложки для статьи

Размер изображения для обложки статьи — 510×286 пикселей.

Не забывайте, что часть иллюстрации закроет текст заголовка и кнопка «Читать».

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

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

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

Рекомендуемый размер изображения для обложки сниппета — 537×240 пикселей.

Вы можете поменять обложку сниппета, кликнув по иконке с камерой

Размер обложки для фотоальбома

Рекомендуемый размер изображения для обложки альбома — 1200×800 пикселей.

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

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

Размер изображений для витрины товаров

Рекомендуемый размер изображений для товаров — 1000×1000 пикселей.

Пример витрины товаров в сообществе

Размер видеозаписей для сообщества

Минимальный размер для качественного отображения видео — 1280×720 пикселей.

Максимальный объём загружаемого файла — 5 ГБ.

Если вам важно не потерять качество видео, загружайте записи с размером не менее 1920х1080 пикселей

Размер фото и видео для историй

Минимальный размер для фотографий и видео — 720×1280 пикселей.

Технические характеристики для видеозаписей:

• до 15 секунд;

• не больше 10 МБ;

• кодек h.264;

• звук AAC.

Используйте фото и видео вертикального формата.

Публикация историй доступна всем сообществам ВКонтакте

Форматы для изображений и видеозаписей

Загружайте изображения в формате JPG, GIF или PNG.

Загружайте видео в форматах AVI, MP4, 3GP, MPEG, MOV, FLV, F4V, WMV, MKV, WEBM, VOB, RM, RMVB, M4V, MPG, OGV, TS, M2TS, MTS.

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

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

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

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

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

Содержание:

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

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

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

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

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

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

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

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

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

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

Яна Плющева

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Яна Плющева

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сайт диджитал-агентства: 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 пикс.

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

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

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

Разместите текст на ровной и однородной области изображения.

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

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

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

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

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

См. также:

17 советов по подготовке интернет-магазина к праздничным распродажам

Предстоящие работы: как привлечь новых клиентов

Создание уникального торгового предложения (УТП) для веб-сайта

Электронный маркетинг: как Чтобы запустить информационную кампанию

Полное руководство по нулевому блоку

10 правил цифрового сторителлинга

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

Как улучшить навигацию по веб-сайту

Браузер обложек

A1 Приключения в неизвестном Все звездные комиксы Альфа-рейс Арчи            Астро Сити Мстители      A-Next Мстители Мстители (1998) Мстители Юнайтед Лос Венгадорес Лос-Венгадорес (Мексика) Новые Мстители Рехер Мстители Западного побережья Чудо-человек Молодые Мстители Бэтмен      3D Бэтмен Звездный Бэтмен и Робин, мальчик-чудо Девушка-летучая мышь Бэтмен Приключения Бэтмена и Робина Бэтмен и люди-монстры Бэтмен (немецкий) Бэтмен (Польша) Бэтмен — Инопланетяне Бэтмен – Гудини Бэтмен – Охотница Бэтмен — Спаун Бэтмен — Дух Приключения Бэтмена Бэтмен и безумный монах Бэтмен и аутсайдеры Книги о Бэтмене Бэтмен Хроники Бэтмен Экстра Семья Бэтмена Бэтмен Серия Агила Бэтмен Сондерхефт Бэтмен наносит удар Супергруппа Бэтмена Похищение Черное и белое Книга Мертвых Культ Темный рыцарь возвращается Темный рыцарь снова наносит удар Темная победа Лицом к лицу Линия округа Готэм Готэмские рыцари Готэмские ночи Джаз Джекилл и Хайд Путешествие в рыцаря Легенды о Темном рыцаре Долгий Хэллоуин Манбат Никогда Ничейная земля Орфей Восхождение Тень летучей мыши Гибель, пришедшая в Готэм Поворотные моменты 100 год Брюс Уэйн, агент SHIELD Женщина-кошка Женщина-кошка (2001) Приключения Темного Когтя Детективные комиксы Дальнейшие приключения Бэтмена Готэм в газовом свете Легенды Темного Когтя Найтвинг Робин Робин II Битва планет Черная магия Кость Книги      Ace Books Американские куртки Book Книги Эйвон Баллантайн Книги Петух Книги Битлз Книги Беркли Бестселлеры (2006 г. ) Бестселлеры (2007 г.) Бестселлеры (2008 г.) Бестселлер Mystery/Thriller (2008) Научная фантастика/фэнтези-бестселлер (2006 г.) Научная фантастика/фэнтези-бестселлер (2007 г.) Научная фантастика/фэнтези-бестселлер (2008 г.) Книги об искусстве Книги о Китае Книги о коллекционировании Книги о дружбе Книги о Японии Книги о литературе Книги о любви Книги о СМИ Книги о фильмах Книги о воспитании детей Книги по психологии Книги о рок-н-ролле Книги об успехе Книги о видеоиграх Книги по обучению и интеллекту Книги по политике Книги Баффи — истребительница вампиров Книги века Книги Чарльза Диккенса Детские книги Классические детские книги Кулинарные книги Дизайн обложки Хуана Пабло Камбарьере Книги Креста Книги о киберпанке Книги Dell Книги по дизайну Дайджесты Книги Док Сэвидж Доктор Кто Книги Книги Дугласа Адамса Суперобложки Книги по экономике Книги Элвиса Пресли Итон Книги Каверы Джорджа Солтера Гигантские книги Книги с золотыми медалями Графические книги Величайшие книжные обложки Величайшие романы всех времен Книги по рукоделию Книги гармонии Книги Хиллмана Книги о хип-хопе Книги по истории Я умею читать фильмы Журнал пехоты Айзек Азимов Книги Дж. Р.Р. Книги Толкиена Книги Льва Книги по математике Книги наставника Книги монарха Библиотека романов Книги О’Рейли Старые Книги Книги о пеликанах Книги о пингвинах Вымпел Книги Перма Книги Филип К. Дик Карманные книги Популярная библиотека Книги по программированию Книги пирамид Быстрое чтение Научные книги Книги по самопомощи Книги с печатями Книги Южного Парка Книги Спектры Книги по «Звездному пути» Книги по «Звездным войнам» Книги Стивена Кинга Ташен Книги Винтаж книги Винтаж Научная фантастика Война миров Книги о Людях Икс Капитан Америка            Капитан Марвел мл. Церебус Претенденты неизвестного Конан            Жуткий DC Special      100 страниц, супер-впечатляющих 1-й выпуск, специальный 52 80 стр. Гигант Приключения во вселенной DC Лучшее из округа Колумбия Кризис на Бесконечных Землях DC Comics представляет Специальный округ Колумбия Суперзвезды DC Поколения Поколения 2 Поколения 3 Тайное происхождение Тайное происхождение (1986) Тайное общество суперзлодеев Витрина Супер DC Гигант Семья суперкоманд Смельчак Сорвиголова (1998) Темная лошадка      детка Шеваль Нуар Темная лошадка представляет Призрак Продолжать Грендель: Дитя войны Хеллбой Безумец Натан Никогда Следующие мужчины Nexus: Песня палача шпион Звездные войны Империя Звездных войн Истории Звездных войн Звездные войны: Темная Империя Звездные войны: Месть ситхов Звездные войны: Война ситхов Усаги Ёдзимбо Икс Х-винг Темные тайны Дик Трейси Дисней      Альманак Дисней Авентурас в Патополисе Библиотека Баркса Бигль Мальчики Чип и Дейл Die Tollsten Geschichten von Дональд Дак Дональд Дак Дональд Дак и компания Дональд Дак (голландский) Приключения Дональда Дака Хьюи, Дьюи и Луи: младшие сурки Калле Анка и Ко Микки Маус Журнал Микки Мауса Микки Маус Сондерхефт дядя Скрудж Приключения дяди Скруджа Презентация Уолта Диснея Комиксы и рассказы Уолта Диснея Х Микки Дилан Дог жуткий Электра Эпический Fantagraphics      Acme Новинки Библиотека Черная дыра Полные комиксы Crumb Comics Восьмой мяч Ненавидеть Путешествие Ллойд Ллевелин Любовь и ракеты Непослушные биты Пого Шизо Фантастическая четверка Претенденты на фантастику Фантастическая четверка Фантастическая четверка (1998) Человек-факел Лос 4 Фантастикос Лос 4 Фантастико (1969) Комиксы Marvel Серебряный Серфер Серебряный серфер (1987) Серебряный серфер (2003) Конечная Фантастическая четверка Flash            Запретные миры Четыре цвета Из-за неизвестного Игры      Игры для Apple II Игры Atari ST Самые продаваемые игры (2006 г. ) Самые продаваемые игры (2007 г.) Самые продаваемые игры (2008 г.) C64 Игры DOS-игры Игры мечты Игры для мальчиков GameCube Игры Японские игры Разное Игры Игры для РЭШ Игры для PlayStation Игры для Windows 3.x Игры ZX Spectrum Джин Отри Комиксы Немецкие            Призраки Истории любви девочек Зеленый Фонарь      Зеленый Фонарь Зеленый Фонарь (1960) Зеленый фонарь (1990) Зеленый фонарь (2005) Зеленый Фонарь/Зеленая Стрела Железный фонарь Рука судьбы человек-ястреб Дом тайн Дом секретов Утка Говард Халк      Халк Халк (2000) Халк (2008) Халк (2008): Варианты Халк (французский) Халк и Power Pack Халк и Вещь: Тяжелые удары Халк и Росомаха: шесть часов Скаар — сын Халка Мировая война Халк Мировая война Халк: Варианты Человеческая муха Изображение      10 Муза Бронзовый век Вознесение атеист Люфт малиновый Проклятие отродья Киберфорс Опасная девушка Тьма Смертельный удар Божественное право Г.И. Джо Поколение 13 Девушки 1963 непобедимый Маг Макс Мега Дракон и Тигр Благородные причины Нулевой пациент Питт Полномочия ПвП Обложки Роба Лайфилда Сэм и Твич Дикий дракон Порождать Спаун: Темные века Дух Дао Разделение изображения Штормовой дозор Верховный Команда Янгблад Теллос Земли войны Ветворкс Ведьмин клинок Янгблад Янгблад (2008) Страйк-файл Youngblood Захватчики Железный человек      Железный человек Железный человек (1998) Железный человек (2005) Военная машина Судья Дредд — 2000 г. н.э. Лига Справедливости            Kingdom Come Лесси Looney Tunes             Журналы      1895 г. После наступления темноты Журнал Эйнсли Американская девушка Американское наследие Американский журнал Американский мотоциклист Американский стрелок американский еженедельник Амра Изображение Архитектурный дайджест Арена37c Аргентинские журналы Азия Научная фантастика Азимова Ассошиэйтед воскресный журнал Поразительные истории Автоматический возраст Автомобиль Дайджест бейсбола Парад красоты Сказки на ночь Журналы-бестселлеры (2008 г.) Лучшие дома и сады Черная кошка (журнал) Черный мир Блендер Приятного аппетита Мальчики из Англии Журнал для мальчиков Брэд Питт и Анджелина Джоли Браво Бюллетень ученых-атомщиков Байт Каперсы Автомобиль и водитель Коллекционер автомобилей Авто Крафт Легковые автомобили Автомобили и запчасти Журнал Касселя Шевроле Высокая производительность Китайские электронные журналы Китайские журналы Журнал Цинциннати Сине-Мондиаль Кино Кинотеатр Зевксис Кинотеатры Кинематограф Студенческий юмор Еженедельник Кольера Колониальные дома Чтение комиксов Ежемесячные значения комиксов Вычислить Компьютер и видеоигры Кулинарный свет Деревенский джентльмен КантриСтиль Крушение Склеп Ктулху Кухня дома Цикл Велосипедный мир Разграничитель Денгеки Джи Подробности Кавер-пародии на Декстера Die Sprechblase Багги Dune и горячие VW черное дерево Экономист ЭЯГ Электрический экспериментатор Развлечения Еженедельно эсквайр Сущность Этюд Журнал для всех Инженерный журнал на каждый день Глазастый Фэнтези и научная фантастика Судьба Фильм Веселье гибкий Еда и вино Друг дурака Фруктовый сад и дом Гей парижанка концерты Имбирь Готическая Библия Гурман GQ Журнал Херста Хобби Япония Хобби-журнал Хот-род Хот-Роддинг Интервью Интерзона Железный человек Японские журналы Джет Л’Экран Францис Ла Пари Жизнь Жизнь (юмористический журнал) Лин Лонг Войти Главная Жизнь Безумный Безумная Аргентина Безумный Китай Безумная Финляндия Безумный Специальный Безумные обложки «Звездных войн» Журнал Meccano Механикс иллюстрированный Только мужчины Здоровье мужчины Конструктор моделей Современный Механикс Мотор Мотоциклист Автоспорт Моторный тренд Юмор из фильмов Мышцы и фитнес NASCAR иллюстрированный Национальная география Национальный пасквиль Новые миры Нью-Йорк Житель Нью-Йорка Внедорожный Байкеры вне закона Парад Парижские ночи Пеп Физическая культура Популярная механика Популярная наука Порше Панорама Положительный Pour Vous Практическая электрика Журнал Премьер Премьера Чистый 2 QST Радио Крафт Новости радио Красная книга Откровение Ревю кино Дорога и трек Стержень и на заказ Род Действие Негодяй Катящийся камень Раундель Королевский Рраах Субботний вечерний пост Наука и изобретения Наука и механика Научный американский Скрипт Коротковолновое ремесло Шокс Кожаные наклз Смитсоновский институт Южные акценты Южная жизнь Спортивная машина Графика Иллюстрированный спортивный автомобиль Веселье Святой Николай Звездный путь: Следующее поколение Журнал Strand Стрит Роддер Уличная сцена Солнце Супер Шевроле Супер Форд Иллюстрированный Super Stock и Dragster Суонк Театр Чистокровные и классические автомобили Бит тигра Время Титтер Путешествия и отдых Турбо и высокотехнологичная производительность Телевизионное действие + Обратный отсчет До мальчика Урания Различные журналы Вегетарианские времена Мода Фольксваген и Порше Волшебник Манга      3 x 3 Ожен 50 правил для подростков ХОРОШО Ай Ёри Аоши Акира Акума На Эрос Ангельская пыль Ангельское сердце Святилище Ангела Энн Фрикс Апокалипсис Ноль яблочное семя Ария Астробой Аяши Но Церера Банзай Барон Гонг Битва Басара Сволочь Боевой ангел Алита Боевой связующий плюс Берсерк Клинок Бессмертного Обвинять Отбеливать Кровавый меч Синий Нижний Бремен Бронза: Зецуай с 19 лет. 89 Кантарелла Капитан Цубаса Девочка-кошка Нуку Нуку Сменить командира Гоку Чисудзи Чобиты Хрно Крестовый поход Хроно Крестовый поход Карандаш Шин-Чан Средняя школа Кромарти Плачущий Фриман Д. Н. Ангел Дайсуки Пустынный коралл Детектив Конан Дигимон Додекаин Руки дракона Голова дракона Жемчуг дракона Жемчуг дракона Z Пьяный Кулак Манекен Оскар Орел Эдем Эйкен F-3 Бандит Пламя Рекки Навечно Сила ладони Будды Цельнометаллическая паника Полнолуние Фусиги Юги G-вкус гаджет Гадирок Галактический ангел Галс Геймерз Небеса рана Генсикэн Получить сторонников Призрак в доспехах Девочки Браво Бог Дитя Гокиндзё Моногатари Золотой мальчик Гравитация Проблема с гремлинами Гандам 0079 Артиллерийский марш Девушка-стрелок Кошки-оружейники Хагане Послание с небес Хикару Но Идти Хосин Энги Горячий трюк Как рисовать чиби Как рисовать мангу Как рисовать мангу — новое поколение Как рисовать робототехнику Как рисовать роботов-трансформеров Охотник х Охотник Имадоки Ину Яша Джинки Джун Маленькая Королева Кайкан Фраза Камунагара Каре Первая любовь Кеншин Кимба Kingdom Hearts Кирара Кидзуна Кодомо-но-омоча Девушка кунг-фу Джулин Лилинг-По Маленькая снежная фея Сахар Локи Рагнарёк Одинокий волк и детеныш Режим любви Волшебные друзья Магистр Неги Маги махороматический Дом Иккоку Манга EX Манга История любви Манга Твистер Мангазин Мангазин 3 Мармеладный мальчик Марс Мехарайдер Расплавленное чувство Мелодия Русалки Модель Больше звездного света в вашем сердце Najica Blitz Tactics Нару Тару Наруто Навсикая Неоновый Бытие Евангелион Неотопия Неотопия 2 Неотопия 3 Неотопия 4 Средняя школа ниндзя Средняя школа ниндзя 2 Благородный доспех Алебарда Официальный как рисовать Robotech О моя богиня Один кусочек Онигами Восточные герои Отелло Чужеземцы Оз Манга Миротворец Курогане Девочка-персик Пибо Манга Пилигрим Ягер Пита Тен Покемон Приключения покемонов Предварительно Принц тенниса Психическая Академия Пукка Панкс Куагмайр США Куагмайр США 2 Рагнарёк Ранма 1/2 РГ Веда Роботех Роботех (1997) Хрустальный мир Роботех Роботех Воины Роботех: академический блюз Роботех: фильм Роботех: Вермильон Рунический солдат Руруни Кеншин Сэйлор Мун Сайюки Самурай Deeper Kyo Самурай Мужчина Сара Сеймаден Сенкайден Хосин Энги Серафическое перо Умиротворенность Shadowgear Король-шаман Она: Абсолютное оружие Сильбастер СильверКросс Отстукивать ритм Гонщик Дух чудес Спригган Стальной ангел Куруми Уличный боец Субару Супер крошечные руки дракона Тактика Тенджо тенге Легенда о мече Те, кто охотится на эльфов Токио Мью Мью Сумерки X Война Двойной сигнал Утена Бродяга Ангел тщеславия Венера в любви Венера Войны Видео Девушка Ай Видения Эскафлона Что Майкл ксенон Якитате Ями Но Мацуэй Йоцуба Вы умеете рисовать мангу Ю-Ги-О Порошок зомби Marvel Special     100 величайших чудес всех времен 100% Макс.