Офтоп
Philipp Kontsarenko
20 448

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

Директор по технологиям компании 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

{ "author_name": "Philipp Kontsarenko", "author_type": "editor", "tags": ["\u0444\u043e\u0442\u043e_\u0434\u043b\u044f_\u0441\u0430\u0439\u0442\u0430","\u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f_\u0434\u043b\u044f_\u0441\u0430\u0439\u0442\u0430","\u0444\u043e\u0442\u043e\u0433\u0440\u0430\u0444\u0438\u044f","\u043f\u043e\u0434\u043e\u0431\u0440\u0430\u0442\u044c_\u0444\u043e\u0442\u043e_\u0434\u043b\u044f_\u0441\u0430\u0439\u0442\u0430","\u043a\u0430\u043a_\u0441\u0434\u0435\u043b\u0430\u0442\u044c_\u043b\u0435\u043d\u0434\u0438\u043d\u0433","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d","\u0431\u043e\u043b\u044c\u0448\u0438\u0435_\u0444\u043e\u0442\u043e_\u0434\u043b\u044f_\u0441\u0430\u0439\u0442\u0430"], "comments": 16, "likes": 27, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 8815, "is_wide": true, "is_ugc": false, "date": "Fri, 19 Jun 2015 14:46:41 +0300", "is_special": false }
0
{ "id": 8815, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/8815\/get","add":"\/comments\/8815\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/8815"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791, "last_count_and_date": null }
16 комментариев
Популярные
По порядку
Написать комментарий...
40

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

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

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

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

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

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

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

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

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

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

Ответить
12

Тот случай, когда коммент лучше статьи

Ответить
11

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

Ответить

Комментарий удален

1

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

Ответить
0

Вы гениальны!

Ответить
0

Зацените наш кейс, жаль что когда делали не было этой статьи, но наверно теперь поменяем что нибудь после фидбэка

http://coder-ninja.com/restaurant/lang_search/0

Ответить
3

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

Ответить
1

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

Ответить
0

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

Ответить
1

срочно менять шрифт.

Ответить
0

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

Ответить

Комментарий удален

0

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

Ответить
0

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

Ответить
0

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

Ответить
–2

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

Ответить
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Баннер в ленте на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ] { "page_type": "default" }