Бизнес Поддержка по продвижению в интернете
Стать подписчиком

* Поля, обязательные для заполнения
Нажимая "Подписаться на новости", Вы принимаете условия обработки персональных данных.
Социальные сети
Расположение текста на фото. Оттачиваем мастерство.

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

Внимательно относитесь к элементам на фото. Это очень важно.

12 сентября 2016 в 12:03

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

1. Контраст

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Надеемся вам это было полезно и интересно.
Искренне ваша - Бизнес Поддержка.

По материалам блога IQSites.



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

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

Копирайтинг статей или как я отрабатывал навык написания продающего текста.
Копирайтинг статей или как я отрабатывал навык написания продающего текста.
Артём Нестеренко - мой учитель
Артём Нестеренко - мой учитель
Вальс с деньгами.
Вальс с деньгами.

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