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

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

8 июля 2016 в 12:03

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

1. Контраст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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

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

Новый дизайн YouTube уже доступен для избранных
Новый дизайн YouTube уже доступен для избранных
5 лучших блокировщиков рекламы в браузере
5 лучших блокировщиков рекламы в браузере
Больше тестов для проверки умственных способностей.
Больше тестов для проверки умственных способностей.

×

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

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

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

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