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

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

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

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

Как это сделать? В Сети вы найдёте множество примеров и обсуждений того, как усилить воздействие текста при помощи фотографии. Ниже собраны самые интересные приёмы пользователей.

Текст, вписанный в пространство фотографии

laurawall-design.com

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

Текст как часть изображения

gogoro.com

Детали мопеда используются как основание для размещения текста. Тонкие и яркие линии букв переходят в очертания предметов. Отсутствие визуального шума обеспечивают фокусные точки — чёрные крышки приборных панелей.

Текст, размещённый на прямоугольнике или другой фигуре для улучшения читабельности

daucybio.fr

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

Прозрачный текст, через который видно фоновое изображение

carladasso.com

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

Уменьшение яркости фотографии для выделения текста

onepagelove.com

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

Использование минималистичной фотографии для эффектной расстановки акцентов

dribbble.com

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

Вспомогательные элементы для фокусирования внимания на тексте и отделения его от фоновой фотографии

aquatilis.tv

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

«Параллакс» текста и фотографии

soyuzcoffee.com

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

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

gnosh.co.uk

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

Особенно хорошо смотрится использование контрастного шрифта по отношению к фотографии, при этом текст вписан в пространство изображения.

pinterest.com

Главное в совмещении фотографии и текста — простота.

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

Это упрощённая версия страницы.

Читать полную версию
Если нашли ошибку, выделите текст и нажмите Ctrl + Enter
Andre Ibragimov
07.08.15 08:12
canva
Владимир Ткаченко
07.08.15 08:17
сложно? Есть программы и попроще, в основном рассчитанные на добавление шаблонных текстов с такими же шаблонными стилями, используются они для редактирования фоточек для вконтактика. Если преследуешь те же цели - вперед, доставай телефон, в маркете такого сабжа полно. Ну а если хочешь нарисовать что-то сам, ставь Photoshop, Illustrator, учи мат-часть и вперед, гляди попробуешь, а это твое :)
Anton Geer
07.08.15 20:25
Еще неплохой прием, к которому сам неоднократно прибегал - блюр изображения. Допустимо в том случае, когда изображение не играет первостепенной роли. Хорошо работает, когда на изображении много деталей или необходим тонкий шрифт. Читаемость возрастает на глазах. Главное - не переборщить с блюром, чтобы зритель мог однозначно ответить, что изображено на фоне.
Златоуст Артемий
13.08.15 13:16
Просто и гениально! Спасибо Лайфхакеры!))
Читать все комментарии