IQSites - умный конструктор сайтов
+7 (911) 11-8888-1
Звоните прямо сейчас
Социальные сети
Расположение текста на фото. Оттачиваем мастерство.

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

8 июля 2016 в 12:03

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

1. Контраст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



Подписка на обновления блога
Хотите оперативно получать новости компании из корпоративного блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* Поля, обязательные для заполнения
Нажимая "Подписаться", Вы принимаете условия обработки персональных данных.
Теги: Советы

Другие статьи блога

Правильная защита фотографий. Как наложить водяной знак новичку?
Правильная защита фотографий. Как наложить водяной знак новичку?
IQSites выяснили почему Трамп стал президентом США
IQSites выяснили почему Трамп стал президентом США
Формы захвата в IQSites
Формы захвата в IQSites

×

Информация, за которую другие щедро платят!

Подпишитесь на блог IQSites и получайте свежие лайфхаки конверсии сайтов, привлечения трафика и клиентов, тренды веб-дизайна, реальные кейсы и многое другое. Это всё ещё бесплатно!
* Поля, обязательные для заполнения

Нажимая "Подписаться", Вы принимаете
условия обработки персональных данных.

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(14) "54.198.142.121" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "89106462e0832e50e7d152f025bf2ef6" }