×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
0 21011

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

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

Контраст

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

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
Ссылочный апдейт Google: что изменится для SEO-специалистов в рунете
Тимур
6
комментариев
0
читателей
Полный профиль
Тимур - Понял, спасибо за информацию.
3 основные ошибки, которые допускают владельцы сайтов при продвижении
Виктор Гаврюков
31
комментарий
1
читатель
Полный профиль
Виктор Гаврюков - Не обращай внимания_) Если у тебя хороший ресурс, то ты будешь первоисточником, и все кто своровал, автоматически начнут на тебя ссылаться, точнее, так гугл будет считать_)
Зарабатываем с помощью текстов: как создать уникальный контент и монетизировать сайт
Максим Зубарев
1
комментарий
0
читателей
Полный профиль
Максим Зубарев - Просто каждый должен заниматься своим делом и о нем и писать ))) сапа хороша в ссылках, вот о линкбилдинге их материалы заходят хорошо. Сапа не пишет статьи ))) Поэтому ничего удивительного
Тильда для SEO-продвижения и бизнеса: плюсы и минусы конструктора сайтов
Сергей Садовничий
2
комментария
0
читателей
Полный профиль
Сергей Садовничий - Есть страницы где 79 для мобайла / 97 для десктопа без вообще каких либо заморочек. Есть страницы на Тильда у которых показатели для мобайла 60 - и эти страницы находятся в ТОП 1-3 по всем интересующим ключам. С показателями по скорости 60 Google Search Console заявляет, что страница оптимизирована для мобильных устройств и является удобной для пользователей. Рекомендую в первую очередь делать акцент на контенте, качестве внутренней оптимизации, наличии коммерческих факторов (если это не инфо страница) и над ссылочным а уж потом пытаться подтягивать показатели по PageSpeed Insights. Но как правило страницы выходят в ТОП и необходимости добиться PageSpeed Insights за 80 нет!
Сравнительная статистика уровня жизни SEO-специалистов в семи странах, включая Россию
Рустам
1
комментарий
0
читателей
Полный профиль
Рустам - Средняя температура по больнице, подсчет даже близко не отображает действительность, особенно учитывая разность цен и уровня зп в разных частях больших стран (США, Канада, Россия)
Скучное, но эффективное SEO: 3 кита успешной поисковой оптимизации
Bquadro
2
комментария
0
читателей
Полный профиль
Bquadro - Не совсем так) Совет про техническую оптимизацию и структуру сайта равноценен как для коммерческого сайта, так и для информационного. Эти два правила универсальны и влияют на ранжирование в поиске вне зависимости от типа ресурса.
Известность бренда SEO-компаний 2021
Mike
9
комментариев
0
читателей
Полный профиль
Mike - я конкретного человека спросил. ваша реклама не особо интересует. тем более вы даже не удосужились дать примеры статей
Как доработка структуры вывела сайт в ТОП-10 Google и увеличила трафик в 2 раза. Кейс Связной Трэвел
Дмитрий
3
комментария
0
читателей
Полный профиль
Дмитрий - Вероятнее всего было обновление Google и позиции были снижены в связи с низкой скоростью загрузки страниц (так как доработке ведутся не только по SEO, но и в целом по функционалу сайта, появляются новые скрипты). В этот период в Google Search Console увеличилось количество страниц с низкой скоростью загрузки. Мы выявили несколько проблем, которые снижают скорость загрузки страниц и выдали рекомендации по их устранению. Пока данные рекомендации находятся в работе. Также был проведен анализ EAT факторов и проверка сайта на соответствие требованиям Google к YMYL сайта, выданы рекомендации по доработке данных факторов (ждем внедрения наших рекомендаций, поделимся потом результатами).
Как оптимизировать картинки для SEO-продвижения: чек-лист
Алексей Махметхажиев
6
комментариев
0
читателей
Полный профиль
Алексей Махметхажиев - Надо упомянуть про ленивую загрузку lazy load, что её можно сделать с вредом для картинок и их индексации и можно сделать всё правильно. Есть отложка вредная.)
Рост ботных переходов на сайт: как интерпретировать и что делать
Mike
9
комментариев
0
читателей
Полный профиль
Mike - как это проверить? что товары выводится именно на основе спроса, а не по заданным алгоритмам?
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
115
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
94
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
62
Комментариев
60
Комментариев
59

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