Поделиться , , Google+, Pinterest,

Опубликовано в:

Текст на фотографии — советы и примеры

Digital-агентство Red Collar перевело заметку Джонатана Катрелла о рекомендациях для дизайнеров по удачному расположению текстов поверх фотографий.

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

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

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

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

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

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

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

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

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

6eab4457bbbce1890bb3

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

f541144aa0dc1b4e8244

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

Ещё примеры:

cd6a55916adb1d967b58

ayr.com

5848b33a9287deaba10d

geckoboard.com

8c01f38211ff55431678

anodpixels.com

5aad0f139d8d0ef0cdf6

obakkifoundation.org

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

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

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

78d9453da493a9d93e9a

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

b0dee9e56feba6566cbc

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

Ещё примеры:

771fe4b6d1ac119b5b66

themostnorthernplace.com

011d07f70ae5a18d5fd6

eup.volkswagen.no

648e33d0404e7f0aa153

dtelepathy.com

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

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

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

a20311a0961064d9c222

5716fc96ce468babfc27

Ещё примеры:

9548f2fbccde6725cf4c

une.ch

b93148c46d3e5ed8cd41

gloriasrestaurants.com

9fed8c97af95075be13f

atelier-serge-thoraval.com

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

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

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

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

Примеры:

5f92cef100ecb798e2f4

blood-and-water.animalplanet.com

b7706292f2e857285a8b

pixelgrade.com

c2329f139b7d12534c43

formula1data.com

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

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

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

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

2d836f2fea96957fa97f

6eb63ee3ba0ce007f4ec

Ещё примеры:

9dae77c33c87b8cc2667

danielladraper.com

0b7ad5807e0ccdda6126

lobagola.com

67e2632ac7b1115e50c7

vivaco.com

Источник: vc.ru

comments powered by HyperComments