IQSites - smart website builder
Social networks
Расположение текста на фото. Оттачиваем мастерство.

Расположение текста на фото. Оттачиваем мастерство.

Несколько практических рекомендаций по удачному расположению текста на изображениях от директора компании Whiteboard - Джонатана Катрелла.

July 8, 2016 at 12:03 pm

С ростом скоростей интернета, использование крупных изображений на сайтах/блогах становится всё более актуальным. А сама идея расположения текста на фоновом изображении является неотъемлемой частью современного веб-дизайна. Картинка+текст способны в краткое время завлечь посетителя, задав правильную атмосферу освещаемой статьи. Мы собрали 5 основных советов по сочетанию текста и фоновой картинки.

1. Контраст

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

Неправильная работа с контрастом:

Расположение текста на фото. Оттачиваем мастерство.

Правильная работа с контрастом:

Расположение текста на фото. Оттачиваем мастерство.

2. Размер и расположение

Ещё один вариант наладить дружбу между текстом и картинкой - выбор правильного расположения текста. Например возьмем такое изображение:

Расположение текста на фото. Оттачиваем мастерство.

Расположение текста выбрано неудачно, ведь выше есть более подходящая однородная область (небо), переместим наш заголовок туда, и получим куда более приемлемый вариант:

Расположение текста на фото. Оттачиваем мастерство.

3. Акцент на фокусе

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

Расположение текста на фото. Оттачиваем мастерство.

И применяем данный прием:

Расположение текста на фото. Оттачиваем мастерство.

4. Смысловое соотношение

Цель хорошей картинки - красиво дополнить смысл текста (заголовка), когда текст не подкрепляется сходной по смыслу картинкой, у посетителя создается ощущение дизориентации и таких ситуаций допускать не следует.

Примеры правильного смыслового соотношения фото и заголовка:

Расположение текста на фото. Оттачиваем мастерство.
Расположение текста на фото. Оттачиваем мастерство.

5. Трёхмерность

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

В этом примере шрифт текста довольно маленький и создается впечатление что он должен стоять позади кустов, но он на переднем плане и это снова дает некоторую дизориентацию:

Расположение текста на фото. Оттачиваем мастерство.

Правильно будет сделать более крупный заголовок, соответствующий ближайшим деталям (деревья, кусты) изображения:

Расположение текста на фото. Оттачиваем мастерство.

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

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



Subscribe to Blog Updates
Would you like to quickly receive the company news from the corporate blog? Just fill in the form below.
You can unsubscribe at any time.
* To be filled in
I Agree To Terms of Service

More articles

Чем заменить Photoshop? 4 бесплатных альтернативы.
Чем заменить Photoshop? 4 бесплатных альтернативы.
Как сохранить здоровое зрение если вы - веб-дизайнер?
Как сохранить здоровое зрение если вы - веб-дизайнер?
Полезные сервисы Google, о которых вы могли не знать.
Полезные сервисы Google, о которых вы могли не знать.

Go up
array(5) { ["id"]=> int(0) ["ip"]=> string(13) "34.231.21.123" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "ff09bfc3f71be9dfef7d876aa9238d31" }