Контрастность
Это степень различия между элементами по цвету, яркости, тону или другим визуальным характеристикам, которая помогает разделять их и сохранять читаемость.
Что в видео-уроке:
В уроке разбираем, как работать с текстом поверх фотографий и сохранять достаточный контраст. Научимся выбирать подходящее расположение изображения, использовать затемнение, градиенты и локальные подложки и свободнее управлять кадрированием.
Контраст напрямую влияет на читаемость
Когда изображение используется изолированно на прозрачном фоне, контраст текста обычно проще контролировать через цвет: например, белый текст на чёрном фоне или тёмный текст на светлом. С полноэкранной фотографией ситуация сложнее, потому что под текстом постоянно меняются оттенки, детали и яркость.
Если фон и текст становятся слишком близкими по тону, надпись начинает растворяться и теряет читабельность. В таком случае необходимо либо менять цвет текста, либо дополнительно обрабатывать сам фон.
Текст не должен перекрывать лицо человека
Если на фоновой фотографии есть человек, особенно важно не размещать текст поверх глаз, носа, рта, ушей и других значимых частей лица. Даже если надпись технически читается, такое пересечение выглядит неаккуратно и мешает воспринимать эмоцию человека.
Лучше кадрировать изображение и располагать текст так, чтобы лицо оставалось свободным. Небольшое пересечение с менее значимой частью изображения иногда допустимо, но голову и лицо лучше сохранять максимально чистыми.
Разносите текст и главный объект по разным сторонам
Один из самых простых вариантов — заранее выбирать фотографию, где основной объект находится в противоположной стороне от текста. Если текст расположен слева, главный объект изображения лучше разместить справа, и наоборот.
Так композиция становится понятнее: текст получает свободную область, а изображение сохраняет свою доминанту. Дополнительно можно разводить элементы и по вертикали, например поднять текст выше, а основной объект оставить ниже.
Кадрирование должно поддерживать композицию
Даже хорошую фотографию можно испортить неправильным кадрированием. Если главный объект слишком сильно прижат к краю, текст залезает на лицо или часть человека случайно обрезается, композиция начинает выглядеть неуверенно.
Иногда достаточно немного сдвинуть фотографию, чтобы уравновесить текст и изображение. При этом важно контролировать обрезку второстепенных объектов: случайно оставленный нос, часть головы или другая небольшая деталь у края кадра будет создавать визуальный шум.
Затемнение помогает отделить текст от сложного фона
Если на фотографии нет одной чёткой доминанты и фон состоит из множества деталей, можно использовать затемнение. Поверх изображения добавляется полупрозрачная тёмная заливка, которая снижает активность фотографии и повышает контраст текста.
Степень затемнения зависит от изображения. Обычно не стоит перекрывать фотографию настолько сильно, чтобы она теряла смысл. Задача — сохранить содержание кадра, но сделать фон спокойнее в области текста.
Градиент позволяет затемнять только нужную часть
Вместо равномерного затемнения можно использовать линейный градиент. Он особенно удобен, когда текст расположен только с одной стороны и нет необходимости затемнять всё изображение.
Градиент можно направить слева направо, сверху вниз или по диагонали. Важно растянуть переход так, чтобы не появлялась резкая видимая граница между тёмной и светлой областями.
Цвет градиента необязательно делать чёрным
Чёрный подходит не для каждого изображения. Иногда лучше взять цвет непосредственно из фотографии и использовать более тёмный оттенок синего, серого или другого присутствующего в кадре цвета.
Так затемнение лучше вписывается в общую атмосферу. При необходимости цвет можно взять пипеткой и затем скорректировать, чтобы получить более цельный результат.
Режимы наложения помогают сохранить фотографию
Градиентную заливку можно сочетать с режимами наложения, например Soft Light. Такой приём позволяет одновременно изменить оттенок изображения и сохранить видимость деталей.
Это полезно, если нужно убрать нежелательный серый подтон, добавить фотографиям общий цветовой характер и при этом усилить контраст текста.
Радиальный градиент работает вокруг выбранной области
В некоторых случаях удобнее использовать не линейный, а радиальный градиент. Он распределяет цвет вокруг центральной области и позволяет, например, оставить фотографию светлее в центре, а края затемнить.
Форму градиента можно менять от овальной до круглой и регулировать область перехода. Такой приём хорошо работает, когда нужно выделить конкретный объект в центре или, наоборот, освободить пространство под текст вокруг него.
Градиент помогает скрывать границы фотографии
Иногда выбранного изображения физически не хватает по ширине, и при нужном кадрировании появляется видимый край фотографии. Это не означает, что изображение обязательно нужно менять.
Линейный градиент может плавно растворить границу в фоне. Благодаря этому фотографию можно поставить в композицию так, как нужно дизайнеру, а не подстраивать весь макет под её исходные размеры.
Контраст можно усиливать локально под текстом
Ещё один вариант — создать отдельную подложку только под текстовой областью. Это может быть цветная фигура с радиальным градиентом или сильным эффектом размытия.
Такой элемент помогает локально отделить текст от фотографии, не затемняя весь кадр. При этом цвет подложки лучше подбирать в тон самому изображению, чтобы она не выглядела отдельным пятном.
Подложка должна соответствовать стилистике проекта
Не каждый проект допускает отдельную плашку или цветное пятно под текстом. Иногда такой элемент создаёт лишний визуальный шум и выглядит чужеродно.
Поэтому использовать подложки стоит только тогда, когда они поддерживают общую стилистику. Если похожий приём уже встречается в проекте, его легче органично повторить.
Выбирайте способ под конкретную фотографию
Для сохранения контраста можно использовать разные решения:
- изменить цвет текста;
- выбрать другое расположение текста и объекта;
- затемнить всё изображение;
- добавить линейный градиент;
- использовать радиальный градиент;
- применить режим наложения;
- создать локальную подложку под текст.
Не существует одного универсального способа. Выбор зависит от самой фотографии, расположения контента и характера проекта.
Контраст даёт больше свободы при работе с визуалом
Знание этих приёмов позволяет не зависеть от исходной композиции фотографии. Можно выбирать сильные изображения по смыслу и качеству, а затем уже адаптировать их под макет с помощью кадрирования, затемнения и градиентов.
Главное — следить, чтобы фотография сохраняла смысл, текст оставался читаемым, а все дополнительные эффекты поддерживали композицию, а не становились отдельным декоративным шумом.
