Россия+7 (495) 960-65-87

7 советов по расположению текста на фотографии

Россия+7 (495) 960-65-87
Шрифт:
0 15582

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

Все перечисленные приемы также отлично работают с фоновым видео в вебе.

Контраст

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

1. Контраст светлого и темного

Разницу между светлым и темным увидеть проще, чем соотнести оттенки. За счет этого контраста можно достичь объемности и реалистичности изображения.

2. Контраст по тону

Его можно продемонстрировать с помощью всех чистых цветов в их предельной насыщенности.

Жёлтый, красный и синий цвета обладают наиболее сильно выраженным цветовым контрастом.

3. Контраст дополнительных цветов

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

Контраст светлого и темного

01.png

Самый простой и всегда работающий способ — фон делаем потемнее, а текст белым или в светлых тонах. Можно подобрать изначально темную фотографию или затемнить светлую, главное, чтобы при первом беглом взгляде глаз мог легко прочитать слово или предложение. Также можно сделать картинку менее контрастной.

02.png

Если затемнение фона нежелательно (например, надо показать сочную, яркую картинку), то текст должен быть темнее, и, желательно, в общей цветовой гамме фотографии. Обязательно нужно следить за тем, чтобы в месте расположения текста на фото не было темных объектов, при попадании на них текст перестает читаться или теряет некоторые буквы.

Сервис Adobe Color CC позволяет подобрать цветовую гамму из пяти цветов на основе загруженной фотографии.

Примеры правильного использования

            03.jpg    04.jpg    05.jpg

Примеры неудачного использования

          06.jpg    07.jpg    08.jpg

Контраст по тону

09.png

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

Примеры правильного использования

10.jpg    11.jpg    12.jpg

Контраст дополнительных цветов

13.png

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

14.jpg

Цветовой круг Итенна

Примеры правильного использования

15.jpg    16.jpg    17.jpg

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

1. Использование глубины резкости

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

2. Интеграция текста в картинку

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

3. Размещение на однородном цвете

Самый очевидный способ не дать тексту потеряться на пространстве фотографии — это разместить его на однородном плашечном цвете.

Использование глубины резкости

18.png

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

Примеры правильного использования

19.jpg    20.jpg    21.jpg

Интеграция текста в картинку

22.jpg

Самый интересный с визуальной точки зрения прием, создающий композиционную пару из текста и фотографии. Единственный минус — это достаточно высокие требования к владению графическими редакторами, ведь риск получить некачественный результат достаточно велик. Главное правило, чтобы текст и картинка были простыми, ведь первоначальная функция текста не должна потеряться.

Примеры правильного использования

    23.jpg    24.jpg

25.jpg

Размещение на однородном фоне

26.png

Беспроигрышный вариант — текст всегда будет легко читаться. Для плашки под текстом действуют те же правила контраста, что описаны выше.

Примеры правильного использования

29.jpg    27.jpg    28.jpg      

Не теряйте суть

Ну и напоследок хочу заметить, что главное — это способность в конечном итоге без труда прочитать нужный посыл (если не стоит другой цели), поэтому пользуясь советами не теряйте суть. Лучшее расположение всегда видно невооруженным глазом. А если в процессе обработки глаз замылился, то на помощь всегда могут прийти знакомые и друзья и дать объективную оценку, насколько им удобно воспринять информацию "на лету"

(Голосов: 1, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
    ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
    Сколько ссылок помогут продвинуть молодой сайт
    Павел Андрейчук
    33
    комментария
    0
    читателей
    Полный профиль
    Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
    Сайт на WordPress: за и против
    Мира Смурков
    1
    комментарий
    0
    читателей
    Полный профиль
    Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
    Обзор популярных CMS: плюсы и минусы
    Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Гость - как по мне joomla! самая удобная и гибкая система из всех современных (я про wp раньше так думал, пока меня в Extrit не убедили в обратном). Раньше всегда оставался на техподдержке, потому что сам заполнять не мог, а теперь делаю это сам, потому что админка простая как палка. + на других цмсках при просьбе что-то добавить мне либо цену загибали овер 100500 либо говорили - нереально, делай новый сайт. А на joomla норм
    Google обошел Яндекс по популярности в России в 2018 году: исследование SEO Auditor
    Рамблер
    1
    комментарий
    0
    читателей
    Полный профиль
    Рамблер - Вот вроде отечественный - это сказано верно.. «Я́ндекс» — российская транснациональная компания, зарегистрированная в Нидерландах. Так говорится в Википедии. И с хрена ли ОТЕЧЕСТВЕННЫЙ поисковик зарегистрирован в Европе? И где платится основная часть налогов? Ну-ууу, точно не в России. И если запахнет жаренным, то был Яндекс и нет Яндекса!
    8 методик в SEO, от которых давно пора отказаться
    Евгений Сметанин
    11
    комментариев
    0
    читателей
    Полный профиль
    Евгений Сметанин - Факторов вообще очень много, согласитесь, вы будете использовать максимальное их количество, особенно, если в ТОПе засели агрегаторы с сумасшедшими ПФ. В таких случаях, вхождение ключа в домен для маленького профильного сайта, сыграет свою положительную роль. Конечно же, если контент на страницах хорошего качества. У меня есть несколько успешных кейсов на эту тему. На сайте продают несколько видов товаров, а выстреливает в ТОП тот, название которого присутствует в доменном имени. Как корабль назовешь, так он и поплывет, верно?))
    Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
    Roman Gorkunenko
    1
    комментарий
    0
    читателей
    Полный профиль
    Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
    Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
    Дмитрий
    11
    комментариев
    0
    читателей
    Полный профиль
    Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
    Идеальный каталог для продвижения сайта: структура и функционал
    Татьяна Ягутьева
    6
    комментариев
    0
    читателей
    Полный профиль
    Татьяна Ягутьева - Уважаемый Денис, сделайте сами напишите свою статью. Посоветуйте другую универсальную CMS, желательно идеальную по всем параметрам. Битрикс очень сильно зависит от разработчика. Если у него прямые руки - бардака не будет. А вообще, конечно, холивар на тему CMS/конструкторов/фреймворков - наверное, вечный. Давайте не будем начинать :)
    Как выбрать подрядчика для продвижения сайта: 7 уровней воронки поиска
    aashutosh
    1
    комментарий
    0
    читателей
    Полный профиль
    aashutosh - data science training institute in noida- Webtrackker Technology (8802820025) providing Data Science Training in Noida. Get ✓ 40 Hours Learning training✓ 70 Hrs Projects ✓ 24 X 7 Support ✓ Job Assistance. WEBTRACKKER TECHNOLOGY (P) LTD. C - 67, sector- 63, Noida, India. E-47 Sector 3, Noida, India. +91 - 8802820025 0120-433-0760 +91 - 8810252423 012 - 04204716 EMAIL:info@webtrackker.com webtrackker.com/Best-Data-Science-Training-Institute-in-Noida.php
    Какой сюрприз! 8 историй про новогодние подарки от digital-компаний
    Мистер Гость
    1
    комментарий
    0
    читателей
    Полный профиль
    Мистер Гость - У нас был более универсальный digital-подход - дарили электронные подарочные карты)
    ТОП КОММЕНТАТОРОВ
    Комментариев
    910
    Комментариев
    834
    Комментариев
    554
    Комментариев
    540
    Комментариев
    483
    Комментариев
    373
    Комментариев
    345
    Комментариев
    262
    Комментариев
    246
    Комментариев
    171
    Комментариев
    156
    Комментариев
    137
    Комментариев
    121
    Комментариев
    100
    Комментариев
    97
    Комментариев
    97
    Комментариев
    96
    Комментариев
    80
    Комментариев
    74
    Комментариев
    67
    Комментариев
    60
    Комментариев
    59
    Комментариев
    57
    Комментариев
    56
    Комментариев
    55

    Отправьте отзыв!
    Отправьте отзыв!