Начальный экран — первое, что видит посетитель сайта, и на этом этапе принимает решение: остаться на странице и читать дальше или закрыть вкладку. Рассказываем, как избежать частых ошибок при работе с обложкой сайта и какие приёмы использовать при добавлении текста на изображение 👉
Основное правило при создании обложек: главное — это текст, фотография стоит на втором месте. Сообщение важнее всего, а фоновое изображение задаёт правильную атмосферу. Поэтому стоит подобрать фотографию, которая не затрудняет чтение и соответствует тематике сайта.
Как выбрать фотографию на обложку
Когда на фотографии слишком много мелких деталей в месте, где располагается текст, это затрудняет чтение. Если текст сливается с фоном и плохо читается, человек может не обратить на него внимания, пропустить и не найти важную информацию.
Чтобы этого избежать, старайтесь выбирать фотографию без мелких деталей. Это может быть открытое пространство на пейзаже, небо, зелёный лес — всё зависит от тематики сайта, его задачи и вашей фантазии. Главное, чтобы текст читался легко.
Добавляйте текст в область с незначимыми деталями
Впишите текст в пространство фотографии так, чтобы он не перекрывал её важные части. Например, когда человек на фотографии расположен справа, размещайте текст на левой половине снимка, и наоборот.
Что делать, если текст плохо читается
Затемните фотографию
Если на выбранной вами фотографии текст читается с трудом, приглушите её тёмным фильтром: это повысит комфортность чтения. Значение непрозрачности фильтра будет зависеть от тона начального изображения. Одной фотографии хватит затемнения в 20%, а другую придётся заглушить на 70%.
Добавьте цветной фильтр
Другой способ добавить настроения сайту и улучшить читабельность — затонировать фотографию. Воспользуйтесь цветными фильтрами вместо стандартного чёрного. Сделайте градиент из фирменного или основного цвета сайта. Или подберите оттенок, подходящий палитре самого изображения.
Как добавить фильтр на изображение?
Чтобы добавить цветной фильтр для обложки, перейдите в Настройки блока и выберите нужные оттенки и прозрачность для полей Цвет фильтра в начале и Цвет фильтра в конце. Если выбрать разные цвета, получится цветной градиент. Следите за тем, чтобы текст смотрелся достаточно контрастно на фоне выбранного вами цвета. Если нужно, измените процент непрозрачности.
Если работаете в Zero block, для текста можно добавить цветной шейп — плашку, но фоне которой текст будет более заметным и удобным для чтения.
Основное правило при создании обложек: главное — это текст, фотография стоит на втором месте. Сообщение важнее всего, а фоновое изображение задаёт правильную атмосферу. Поэтому стоит подобрать фотографию, которая не затрудняет чтение и соответствует тематике сайта.
Как выбрать фотографию на обложку
Когда на фотографии слишком много мелких деталей в месте, где располагается текст, это затрудняет чтение. Если текст сливается с фоном и плохо читается, человек может не обратить на него внимания, пропустить и не найти важную информацию.
Чтобы этого избежать, старайтесь выбирать фотографию без мелких деталей. Это может быть открытое пространство на пейзаже, небо, зелёный лес — всё зависит от тематики сайта, его задачи и вашей фантазии. Главное, чтобы текст читался легко.
Добавляйте текст в область с незначимыми деталями
Впишите текст в пространство фотографии так, чтобы он не перекрывал её важные части. Например, когда человек на фотографии расположен справа, размещайте текст на левой половине снимка, и наоборот.
Что делать, если текст плохо читается
Затемните фотографию
Если на выбранной вами фотографии текст читается с трудом, приглушите её тёмным фильтром: это повысит комфортность чтения. Значение непрозрачности фильтра будет зависеть от тона начального изображения. Одной фотографии хватит затемнения в 20%, а другую придётся заглушить на 70%.
Добавьте цветной фильтр
Другой способ добавить настроения сайту и улучшить читабельность — затонировать фотографию. Воспользуйтесь цветными фильтрами вместо стандартного чёрного. Сделайте градиент из фирменного или основного цвета сайта. Или подберите оттенок, подходящий палитре самого изображения.
Как добавить фильтр на изображение?
Чтобы добавить цветной фильтр для обложки, перейдите в Настройки блока и выберите нужные оттенки и прозрачность для полей Цвет фильтра в начале и Цвет фильтра в конце. Если выбрать разные цвета, получится цветной градиент. Следите за тем, чтобы текст смотрелся достаточно контрастно на фоне выбранного вами цвета. Если нужно, измените процент непрозрачности.
Если работаете в Zero block, для текста можно добавить цветной шейп — плашку, но фоне которой текст будет более заметным и удобным для чтения.
