Лого vc.ru

Как расположить текст на фотографии: советы и приемы

Как расположить текст на фотографии: советы и приемы

Директор по технологиям компании Whiteboard Джонатан Катрелл изучил примеры удачного расположения текста поверх фотографий и составил пять рекомендаций для дизайнеров.

Digital-агентство Red Collar подготовило для рубрики «Интерфейсы» перевод заметки Шоафа.

Поделиться

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

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

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

Пометка: принципы, рассмотренные в статье, можно смело применять и к комбинации видео и текста.

1. Контраст с помощью цвета и яркости

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

Некоторые советы для достижения нужного контраста:

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

В этом примере мы используем WebKit-фильтры для управления контрастом и яркостью изображения, которые мы устанавливаем с помощью дополнительного тега. Фильтр без префикса выглядит так: filter: brightness(40%) contrast(70%).

Сложно читать: нет фокуса ни на тексте, ни на изображении

Читать намного легче; требуется CSS-фильтр

Ещё примеры:

ayr.com

geckoboard.com

anodpixels.com

obakkifoundation.org

2. Контраст с помощью размера и расположения

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

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

Плохой пример — плохой контраст, неверное положение текста

Хороший контраст, лучшее расположение

Ещё примеры:

themostnorthernplace.com

eup.volkswagen.no

dtelepathy.com

3. Читаемость с помощью глубины

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

Это легко делается простым расположением текста в зонах с меньшим фокусом, как на этом примере:

Ещё примеры:

une.ch

gloriasrestaurants.com

atelier-serge-thoraval.com/a>

purplerockscissors.com

4. Выбор объекта изображения

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

Некоторые советы:

  • Выбирайте изображения, показывающие полное предложение. Пользователь должен чётко видеть объект изображения и понимать действие, запечатлённое в изображении, если такое вообще есть.
  • Не выбирайте изображения со слабыми фокусными точками.
  • Держите в голове значение «понятности» изображения. Если изображение более или менее вызывает чувства и меньше передаёт детали, тяжёлые наложения или фильтры могут применяться без потери действенности изображения.

Примеры:

blood-and-water.animalplanet.com

pixelgrade.com

formula1data.com

5. Фишка с трёхмерностью

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

Правило большого пальца: чем меньше текст, тем вероятнее он окажется в Z-позиции.

В этом примере мы используем текст на переднем плане, который кажется, стоит ближе к нам, чем кусты на заднем плане. Несмотря на высокий уровень детализации заднего плана, наши глаза естественным образом отличают более длинные контуры и бóльшие формы букв, понимая текст куда легче, чем на «плохом» примере. На «плохом» примере буквы будто бы стоят в той же Z-позиции, что и листья на заднем плане. И из-за этого их становится трудно читать.

Ещё примеры:

danielladraper.com

lobagola.com

vivaco.com

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

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

Вы что? Лебедев уже давно делал такие гайды!

0

Нуу, что ж так мало. Можно столько приемов напридумывать:

- Вписать текст в пространство фотографии (как пункт 5, только смелее).
Примеры: www.awwwards.com/awards/submissions/2015/06/556ecf95bc13e.jpeg
www.awwwards.com/awards/sites_of_the_day/2015/03/themarmalade.jpg
www.awwwards.com/awards/sites_of_the_day/2015/02/vo2.jpg

- Пойти дальше и сделать текст частью изображения.
Примеры:
www.awwwards.com/awards/sites_of_the_day/2015/04/words-can-save-website.jpg

- Положить под текст прямоугольник или другую фигуру, непрозрачную или полупрозрачную, решив тем самым проблему читабельности.
Примеры: www.awwwards.com/media/cache/thumb_sotm/awards/screenshots/2014/03/531d905f4c601.jpeg
www.awwwards.com/awards/sites_of_the_day/2015/02/HELLO-monday-agency-15.jpg
www.awwwards.com/awards/images/2014/11/jova-website.jpg
www.awwwards.com/awards/images/2013/11/hki-hellohikimori-.jpg

- Использовать "прозрачный" текст, через который видно фоновое изображение.
Примеры:
www.awwwards.com/awards/sites_of_the_day/2015/04/while-you-are-young-1.jpg
www.awwwards.com/awards/images/2014/11/talkpr-agency.jpg
www.dailydesignables.com/wp-content/uploads/2014/06/digital-marketing-postcard-facebook2-675x406.jpg

- Обесцветить фотографию, чтобы текст лучше читался, а вас считали стильным парнем. Если при этом текст цветной - то победа вообще обеспечена.
Примеры: www.awwwards.com/awards/sites_of_the_day/2015/03/White-Frontier-Brewery-1.jpg
www.awwwards.com/awards/images/2013/12/paper-tiger-website.jpg
www.awwwards.com/awards/images/2014/08/jakob-de-boer-site.jpg

- Использовать очень минималистичную фотографию для эффектной расстановки акцентов. Лень искать примеры, и так понятно, что чем меньше "шума" под текстом, тем лучше)
Хотя вот и пример:
www.awwwards.com/awards/images/2013/11/mobileindex.jpg
www.awwwards.com/awards/images/2013/11/mixd-.jpg

- Использовать вспомогательные элементы для фокусировки внимания на тексте и отделения текста от фоновой фотографии (пятно фокуса\расфокуса под текстом, хипстерские рамочки и полосочки и т.п.)
Примеры:
www.awwwards.com/awards/images/2014/03/grain-mortar.jpg
www.awwwards.com/media/cache/thumb_sotm/awards/screenshots/2014/03/532a27c4606f3.jpeg

- "Параллакс" текста и фотографии. Стильно, модно, как-на-бехансе. Никогда не примет заказчик)
Примеры:
www.awwwards.com/awards/images/2014/09/R+CO-WEBSITE.jpg
www.awwwards.com/media/cache/thumb_sotm/awards/screenshots/2014/09/541ff6ff5ebb5.jpeg

- Помнить всем известные правила построения композиции, особенно когда расположение текста чуть сложнее, чем "по центру", а текста больше, чем 1 строчка. Элементами такой композиции может выступать не только сам текст, но и детали фотографии, на которой он размещается.
Примеры:
www.awwwards.com/awards/images/2013/11/sotd-moma-magritte-21-10-13.jpg
www.awwwards.com/awards/images/2013/11/sotd-tria-12-10-13.jpg

Коммент относится к полиграфии, а статья про применение текстов поверх фоток в вебе.

Вернее сказать с полиграфическим уклоном ) Картинка поверх картинки

0

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

Дизайнер говорит что писал человек-вода.

0

Зацените наш кейс, жаль что когда делали не было этой статьи, но наверно теперь поменяем что нибудь после фидбэка
coder-ninja.com/restaurant/lang_search/0

0

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

Кому лень по ссылке переходить

0

Ну а для тех, кто не дизайнер canva.com Правда с поддержкой русских шрифтов там проблема.

0

Постарался изменить сегодняшнюю фотографию, добавив ей выразительности и смысла. Вроде помогло.

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

Сейчас обсуждают
Арчибальд

Конечно! Некоторые не опускаются до ножей и кредиток,а строят свои капиталы на пирамидах!

PewDiePie сохранил лидерство в рейтинге самых высокооплачиваемых YouTube-блогеров по версии Forbes
0
Сергей Запухляк

Я разработчик уникального плеера ВК для Mac. Вчера попросил оставить использование API, готов был сделать плеер бесплатным, на что получил ответ:

Добрый день!

Мне очень жаль, но мы ничего не можем Вам предложить.

С уважением,
ВКонтакте

«ВКонтакте» закроет публичный доступ к аудиозаписям для сторонних приложений
0
Сергей Запухляк

Я разработчик плеера ВК для Mac. Вчера попросил оставить использование API, готов был сделать плеер бесплатным, на что получил ответ.

«ВКонтакте» закроет публичный доступ к аудиозаписям для сторонних приложений
0
Арчибальд

Нажрутся своих гамбургеров,а потом снашивают друг-друга в попы.

Рекламная война брендов фастфуда: кампании McDonald’s, Burger King, Pizza Hut и Subway
0
Дмитрий Панфилов

*Соискатели не знают, как искать работу*
совершенно лишнее знание, если бы рекрутёры сами не организовывали эти "7 кругов ада"

*Наши специалисты готовы раскрыть все секреты прохождения собеседований*
сами придумали "секреты", сами их и раскрывают. Пока бесплатно ;)

Алёна Владимирская и оператор Wi-Fi в московском метро запустили проект с бесплатными карьерными советами
1
Показать еще