Войти при помощи:
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:
лайкни нас в социальных сетях
Сегодня 29 лайков
186 463
Всего лайков на сайте

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

22 июля 2016, 12:09 | 

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

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

Контраст

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

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

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

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

27.jpg    28.jpg    29.jpg

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

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

Комментарии
2 комментария
Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Аркадий
    1
    комментарий
    0
    читателей
    Аркадий
    6 месяцев назад
    Мне вообще не хватает технических рекомендаций про дизайн, поэтому такие статьи – как глоток свежего воздуха. Я еще здесь читаю – [censored]/atricles - есть интересные статьи про создание меню, размер картинок и другие нюансы, которые надо знать.
    +
    0
    -
    Ответить
    Поделиться
  • Артем
    6 месяцев назад
    Очень познавательно, спасибо!
    +
    0
    -
    Ответить
    Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА ЛАЙКНИ
9 бесплатных инструментов для управления репутацией
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Вообще, инструментов гораздо больше... По мониторингу - не упомянуты Крибрум, IQBuss. Достойные новые сервисы появляются - Соцредактор, например. Бесплатные есть еще babkee.ru И далее...
ВКонтакте запустил счетчик просмотров записей
Гость
1
комментарий
0
читателей
Полный профиль
Гость - бредятина! как товарищ пояснил, что таким образом станет понятно что вызывает наибольший интерес. чувак, открою тебе маленькую тайну, когда я захожу на страницу к кому то, непроизвольно получается просмотр записей, а эта считалочка только покажет до каких записей дошел гость)
ВКонтакте рассказал, какие инструменты будут запущены в 2017 году
Гость - Всё там понятно. Это фичи для сммщиков.
Facebook объявил о запуске нового инструмента Advanced Measurement
Тирион Ланнистер
2
комментария
0
читателей
Полный профиль
Тирион Ланнистер - уииии
6 распространенных ошибок в аналитике активностей в соцсетях
Alexander Abramov
3
комментария
0
читателей
Полный профиль
Alexander Abramov - За обзор и советы - очень большое спасибо!
Как рассказать о новом продукте без космических бюджетов на рекламу
Vladimir Lapshin
1
комментарий
0
читателей
Полный профиль
Vladimir Lapshin - Жаль только, что сам продукт - дорогущая хрень, не достойная, чтобы ее рекламировали. Все равно никогда не взлетит.
Места знать надо, или В чем сила геотегов
Иван Залой
1
комментарий
0
читателей
Полный профиль
Иван Залой - Вот и чекинься в друзей... Стоит кнопку нажать, как грабитель к тебе в квартиру завалится. Как жить-то теперь?...
Пользователи ВКонтакте смогут работать с документами Microsoft Office прямо в соцсети
Гость - Про Яндекс.Браузер забыли, он тоже открывает такие файлы.
Тренды рекламы в Facebook: прогноз на 2017 год
Dmitry Barkov
1
комментарий
0
читателей
Полный профиль
Dmitry Barkov - 1 - полноценных работодателей будет не так много, ведь рост у нас идет за счет самозанятых. Это микробизнес с микробюджетами. Качество исполнителей будет очень низким, требования клиентов - завышенными. Крупные компании рост не дадут, смотрите исследования того же HH ("где ищут сотрудников"). 2 - рост мобилки как бы очевиден ) проблема в том, что ядро нашего ФБ - столичная аудитория. А по последним исследованиям Вымпелкома, наибольший рост мобильного трафика идет за счет регионов и городов с числом жителей <1 млн. Реклама уйдет во Вконтакт. 3 - Очень мало наших кейсов. Все больше зарубежных. Например в медицинской нише ФБ стоит в самом конце по эффективности рекламных каналов. 4 - лайфстрим это хорошо. Очень интересно узнать, как это воспринимают молодые ( 18-25 лет). Хороший креатив для бренда - высокий бюджет. Это же будет ограничением для входа малому и среднему бизнесу. Выстрелят единицы, кто сможет найти цепляющий сюжет. Скорее всего, тревел, спорт, мода, бьюти и спа, дизайн (туда же недвижка), стройка. Очень интересно как встраивать нативку в эти стримы :) 5 - желание ФБ закольцевать трафик на себе поянтно. Так же как Яндекс это делает с 2010 года. Сейчас интерфейс ФБ настолько убогий, что не подходит для нормального серфинга. Искать четкие ответы на вопросы в нем неудобно. Основа контента - поток мысли. Четко структурированных статей, как в выдаче, в ФБ капля в море. А подготовка материалов для интсантвью как-то не пошло в России. Возможно, эти единицы и перехватят такой траф. 6 - с чатботами тоже сложно. Крупные игроки тестят ботов в работе. Например, кейс Кока-Колы интересен. Но полноценно использовать чатботы пока никто из наших не умеет. У мелких и средних (если такие есть) бизнесов большой скепсис к этой технологии. Вряд ли большая активность чатботов будет в 2017 году. По крайней мере со стороны брендов. Чек разработки высок, а отдача не ясна. 7 - Ничего сказать не могу. Может быть есть ресерчи на тему, как покупает в ФБ Российский сегмент. Но ввиду того, что ядро - Москва, то покупают неактивно. Конечно, ИМХО :)
Тема Лебедев + Nike. А за кого ты?
Егор Гонин
2
комментария
0
читателей
Полный профиль
Егор Гонин - Сложно как-то оценить даже дизайн кроссовок, будучи интернет-маркетологом. Одно могу сказать: Артемий - молодец. Достиг небывалых высот. А главное - как личность целостный. Придерживается своих парадигм и не боится быть собой.
ТОП КОММЕНТАТОРОВ
Комментариев
152
Комментариев
139
Комментариев
126
Комментариев
109
Комментариев
88
Комментариев
67
Комментариев
64
Комментариев
60
Комментариев
60
Комментариев
52
Комментариев
45
Комментариев
41
Комментариев
40
Комментариев
39
Комментариев
38
Комментариев
32
Комментариев
25
Комментариев
23
Комментариев
19
Комментариев
19
Комментариев
18
Комментариев
18
Комментариев
17
Комментариев
17
Комментариев
17

Отправьте отзыв!
Будь в курсе




Рассылка
Facebook
Вконтакте
Партнеры проекта [Уи лав ю соу мач!]
Наверх