О популярности метода наложения текста на фоновое изображение можно говорить и не наговориться. Достаточно открыть номинации на лучший сайт дня/недели/месяца на Awwwards или cssdesignawards и увидеть собственными глазами многообразие фантазии веб-дизайнеров. Если присмотреться, то можно увидеть и гораздо большее. Где-то дополнительно использовались градиенты, затемнения, эффекты шрифта, а иногда при, казалось бы, похожих фотографиях текст размещается в разных местах. И дело здесь вовсе не в погоне за уникальностью.
На изображении может быть что угодно. Но что представляет собой ваш пользовательский интерфейс? Сможет ли эффект наложения всегда быть читаемым? Разумеется, ни одни веб-дизайнер не хочет, чтобы посетители или заказчик напрягали зрение и долго думали: «что же там написано-то»? И это тем более важно, если вы создаете дизайн сайта/приложения для смартфона. На маленьких экранах и текст-то маленький, а значит, и читать его сложнее. А если вокруг еще и картиночек много, то и совсем может приключиться беда.
Тем не менее, существуют некоторые методы сочетания или даже обработки такого эффекта, при котором можно быть уверенным в том, что текст будет видимым и разборчивым.
Текст и изображения в веб-дизайне
Для начала давайте посмотрим на некоторые особо яркие примеры сочетания текст и фонового изображения. Это проекты: Indykpol, Ginetta, New Vista Behavioral Health, 100 Days of Winter, Harajuku Dacci Pasta Labo, A Little Italian Food Workshop, Peter Zilka, Family Legacy, purpleandgrey, catscarf, Hero Image.
А теперь стоит обратить внимание на некоторые моменты этих сайтов: laferme, storymarketing, foster-designs, Article Cards
Везде ли удобно читать то, что написано? Например, давайте оттолкнемся от последних двух примеров. Представьте, если бы волны располагались бы ниже, текст бы уже не читался легко и быстро.
Фоновое изображение может быть разным и веб-дизайнер всегда готов к тому, что придется работать с самыми разными образцами. И нет, мы не говорим о том, что все плохо, нужно все делать совсем наоборот. Скорее, хотим обратить внимание на то, что текст и фоновое изображение не должны быть сами по себе.
Именно поэтому мы посмотрим, как сделать наложение текста удобным для чтения. И нет, разумеется, универсального решения. Все сводится к вашему личному предпочтению или даже подходящий метод для одного проекта совсем «не в кассу» будет выглядеть на другом.
Эффект холста
Холст представляет собой твердый полупрозрачный градиент, находящийся между изображением и текстом. В таком варианте текст может быть всегда белым, а градиент на холсте может быть от 40% непрозрачности от черного к белому (или прозрачному). Но опять же, это дело личного вкуса. Хотя именно 40% непрозрачности от черного к белому/прозрачному работает наилучшим образом. В таких композициях можно увидеть, что изображение плавно замирает, текст обретает больше контраста и становится доступным для чтения. Для примера, мы создали и 30% и 69% непрозрачности. Вид, конечно, оставляет ждать лучшего.
Преимущества
- Простое и популярное решение
- Улучшенная контрастность текста
- Едва заметные изменения в общей конструкции
Недостатки
- Резкие градиенты могут разрушить привлекательность изображения
- Можно слишком сильно затонировать фон и суть его будет не видна
Безусловно, использование холста популярно, особенно если градиент накладывается только на половину всего изображения. Но существуют и иные способы.
Тонирование
Если изображение для вас неважно, то его можно затонировать полностью черным цветом в 40% непрозрачности. Иногда использовать холст нет смысла, ибо текст частично все равно теряет свою четкость. Приходится делать промежуточный фон под все слова.
Преимущества
- Полезно для больших заголовков, текстовых блоков, которые размещаются на всей площади изображения
- Когда в приоритете текст, а не фоновая фотография
Недостатки
- Изображение скрывается целиком
- Фоновое изображение вообще может быть уменьшено, словно существует только для эстетики
Цветовые наложения
Очень похоже на тонировку, но вместо того, чтобы использовать черный и белый, можно взять иные цвета. В целом, выбор метода цветового наложения позволяет нейтрализовать напряженность композиции. Он блокирует практически все цвета и превращает фотографию в монотонную.
Какой цвет выбрать? Зависит от бренда. Но опять же, суть в том, чтобы текст был видим и четок.
Мягкие градиенты
Наверно, самый непростой вариант добавления контраста текста при сложном фоне. Не стоит использовать яркие и кричащие цвета, которые хороши сами по себе, но плохо сочетаются вместе. Для удобства воспользуйтесь coolors или Kuler, чтобы подобрать цвета, которые сработаются в сочетании друг с другом и будут подходить под композицию.
Сравните два градиента и поймете, о чем идет речь.
Преимущества
- Лучший вариант акцента на цвете бренда (если его уместно использовать)
- Однотонная часть градиента лучше подчеркивает текст
Недостатки
- Не подходит для фотографий с людьми, фауной, поскольку черты лиц и мордочек плохо узнаются. Они скрываются за общей тонировкой и плохо различимы.
Размытие
Эффект размытия по Гауссу позволяет смягчить изображение и сделать текст более видимым. Те, кто обладают iPhone, уже знакомы с такой техникой. В дизайне iOS размытие используется для обозначения глубины. В то время как в Android используется тень для обозначения глубины (высоты).
Не стоит размывать слишком сильно, образы должны оставаться видимыми и узнаваемыми.
Преимущества
- Помогает уменьшить значимость изображения
- Текст проще выделить на фоне фотографии
Недостатки
- Изображение полностью приносится в жертву удобству чтения
- Не решается проблема с подбором цвета для текста
- Не задействуются цвета бренда; нет соответствия большинству общепринятых стилей
Выделение текста
В данном случае мы изменяем цвет фона для самого текста, имитируя, тем самым, выделение маркером на бумаге части текста. Метод хорошо работает, если конструкция состоит из небольшого текстового объема и очень большого количества свободного фона. И, да, выделение не всегда бывает черным. Это может быть доминирующий цвет самой фотографии, цвет бренда.
Черное и белое
Иногда фотографии с текстом на карточках или блоках обесцвечивают, что позволяет действительно сделать текст более контрастным. Но не всегда это только черный и белый. Рассмотрите варианты преобладания серых оттенков, отдельно приглушенных или сочетания цветного фона и обесцвеченного. Сравните несколько вариантов ниже.
Эффект Glitch
Но между тем, иногда для главной станицы или промо-страницы, лэндинга хочется сделать что-то особенное и не ограничиваться общепринятыми стандартами. Для этого можно сочетать текстовые эффекты с методом наложения. И речь даже не идет о том, чтобы немного размыть тень за текстом и позволить ему размещаться на белой пене.
Попробуем просто найти красивое оформление текста и, возможно, даже незаурядное.
Открываем наше изображение, создаем слой-копию и немного осветляем с помощью Корректирующего слоя «Цветовой тон/Насыщенность». Если изображение и без того светлое, то можно особо и не осветлять.
Создаем текстовой слой с заголовком, названием, текстом. Подбираем шрифт, при необходимости с помощью Свободного трансформирования (Ctrl+T) увеличиваем размер. Цвет текста совершенно неважен, но вот шрифт желателен жирный. Иными словами, буковки должны быть широкими, в противном случае, никакого эффекта видно не будет.
Переходим на наш фон и делаем еще одну копию. Перемещаем её над текстом. Нажимаем ПКМ на слое в Панели слоев и выбираем из меню «создать обтравочную маску». Дополнительно слой с фотографией можно покрутить, деформировать и подобрать ту часть, что на буквах будет лучше смотреться.
Теперь создадим еще один пустой слой и разместим его между текстом и фоном. Выделим его на панели слоев, зажимаем Ctrl + ЛКМ по слою с текстом. У нас на экране появится выделение букв. Выбираем темно-серый цвет и, будучи на новом пустом слое, заливаем контур.
Активируем инструмент Перемещение и с помощью стрелок на клавиатуре немного двигаем наш слой в желаемую сторону. Открываем Фильтр -> Размытие - > Размытие по Гауссу и размываем нашу тень так, чтобы явной она не была. Но наличие её все же нужно для придания глубины. Можно сделать совершенно плоское изображение, но оно «потеряется».
Создаем еще один слой и размещаем между тенью и фоном. Рисуем на нем серый прямоугольник с закругленными углами.
Создаем еще одну копию фонового слоя и размещаем его прямо над прямоугольником, а режим наложения выбираем «мягкий свет».
Теперь выделяем на панели слоев слои с тенью, текстом и текстурой и делаем общую копию трех слоем (Ctrl+J). Много тени, понимаем, но иначе пока нельзя. Потом уберем.
Выделяем только два слоя (Море и Фон копия 8), выбираем инструмент Выделение. Выделяем часть буквы или, может, часть всего слова, переходим на инструмент Перемещение и с помощью стрелок на клавиатуре сдвигаем часть рисунка по направлению тени. Если сдвинуть в противоположную сторону у вас получится сильное затенение. Если тень отключить – сольется. А так получается разбитый текст.
Можно разбить весь, можно частями, можно только одну букву – вариаций много. Можно немного уменьшить слои с буквами и тенью, размыть границу прямоугольника и прочее и прочее. Если теней много, их можно размыть, снизить яркость слоя. Можно даже текстуру другую использовать.
Разумеется, что такой эффект не для массового использования, нежели вариации, приведенные нами в начале материала. Но для оформления отдельных категорий, разделов, страниц такой эффект найдет себе применение и жизнь.
Существует много сайтов с эффектом Glitch, хотя они и являются по большей части авторскими: wmnvm, oxtral, michaelvillar, jigsaw, bobby
Аналогично можно создавать текст над лесами или горами, но нижнюю часть букв слегка разрушить частичками скал или листвой, создавая, тем самым, эффект, будто бы тест вырвался из глубин земли. При этом эффект не должен быть ярким и контрастным, иначе он полностью заполнит собою визуальное пространство и посетители не будут больше ничего видеть, акценты будут не правильно расставлены.
Выводы
Мы рассмотрели разные методы, которые делают текст читабельным и не жертвуют при этом фоновым изображением. Даже в случае с разбивкой текста (Glitch), его (текст) можно понять, а морские волны и пену – разглядеть и узнать.
Хороший дизайн – продуманный дизайн. Дизайн, что обладает сбалансированными эстетическими визуальными эффектами, удобством и ясностью. Но и этого порой недостаточно. Может быть очень красиво, но непонятно, неприятно. Как вы видели, есть идеи смешивать разные виды, сочетать разные методы и привносить что-то новое. Вашему воображению нет предела.
Главное - правильные акценты и легкость эффекта. Даже если вы создаете текст, сквозь который видно фоновую фотографию, разбивка или добавление эффекта рваности должны быть воздушными. Любой стиль дизайна не обладает тяжеловесностью. Четкостью – да, контрастом – да, но не перегрузкой фотоэффектов. Даже наш эффект при малом размере смотрится понятно, четко и легко, ибо разрывы и тени неяркие и не «тяжелые».