Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Пять способов выделить текст на фоновом изображении

24 декабря 2014 | Опубликовано в Уроки | 11 Комментариев »

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

 

1. Наложение цвета

На нашем изображении видно что надпись теряется на фоне. Надпись очень сложно прочесть, так как фоновое изображение изобилует деталями и само по себе отвлекает. Текстура “Buffalo Wings” полностью теряется из-за перегруженности фотографии. Давайте исправим это.

5 Ways to Improve Contrast When Placing Text Over Images 1

Для начала создайте новый слой и назовите его “color-overlay”. Возьмите пипетку (нажав на клавишу «I»). Выберите цвет с рубашки стоящего слева мужчины. Залейте новый слой этим цветом (Shift + F5).

5 Ways to Improve Contrast When Placing Text Over Images 2

Укажите слою opacity/непрозрачность  в 50% и перетащите его под слой с текстом.

5 Ways to Improve Contrast When Placing Text Over Images 3

Как вы можете заметить, появился контраст между надписью и фоном. Текст легко читается и текстура “Buffalo Wings” хорошо видна.

5 Ways to Improve Contrast When Placing Text Over Images 4

2. Тень

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

Для начала нам нужно выбрать подходящий цвета для текста.

5 Ways to Improve Contrast When Placing Text Over Images 5

Конкретно в этом случае подойдет светлый оттенок, желательно вообще белый цвет.

5 Ways to Improve Contrast When Placing Text Over Images 6

Теперь укажите слою new layer style/новый стиль слоя и выберите вариант drop shadow/тень. Укажите opacity/непрозрачность в 52%. Настройте Spread/Размах на 16% и Size/Размер на 10px. Угол должен быть примерно в -144 градусов.

5 Ways to Improve Contrast When Placing Text Over Images 7

В результате простого наложения тени, у нас получилась отличная выделяющаяся на фоне надпись.

5 Ways to Improve Contrast When Placing Text Over Images 8

3. Линии

Это самый простой способ сделать надпись заметнее. Просто добавьте тексту две линии — одну ниже, вторую выше надписи — это выделит вашу типографику на фоне фотографии.

5 Ways to Improve Contrast When Placing Text Over Images 9

Всего две линии создают такой ощутимый контраст между фоном и текстом.

5 Ways to Improve Contrast When Placing Text Over Images 10

4. Подкладка

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

Как мы видим, исходной версии не хватает контраста между текстом и фото. Надпись просто теряется на изображении из-за деталей здания.

5 Ways to Improve Contrast When Placing Text Over Images 11

Чтобы исправить это, возьмите инструмент Custom Shapes/Заказные фигуры (U) и создайте фигуру. Не столь принципиально какой формы будет ваша подкладка. Вы можете сделать ее просто кругом или прямоугольником, или же создать фигуру в стиле ретро как в нашем примере.

Укажите фигуре черный цвет заливки и белую обводку толщиной в 3pt.

5 Ways to Improve Contrast When Placing Text Over Images 12

Перетащите подкладку под слой с текстом и укажите ей Opacity/Непрозрачность в 57%.

5 Ways to Improve Contrast When Placing Text Over Images 13

Результат выглядит профессионально и стильно. А главное — надпись отлично читается и выделяется на фоне изображения.

5 Ways to Improve Contrast When Placing Text Over Images 14

5. Размытие фона

Пятый и последний способ привлечь внимание к надписи — незначительное размытие фона.

Вновь возьмем пример, в котором текст теряется из-за детализированного изображения на фоне.

5 Ways to Improve Contrast When Placing Text Over Images 15

Для начала нам нужно конвертировать фон в смарт-объект. Для этого просто кликните правой кнопкой по слою и выберите Convert to Smart Object/Преобразовать в смарт-объект.

5 Ways to Improve Contrast When Placing Text Over Images 16

Затем в меню выберите Filters>Blur>Gaussian Blur/Фильтры>Размытие>Размытие по Гауссу.

5 Ways to Improve Contrast When Placing Text Over Images 17

Укажите радиус размытия в 3.8 px.

5 Ways to Improve Contrast When Placing Text Over Images 18

Мы добились желаемого контраста между фоном и текстом.

5 Ways to Improve Contrast When Placing Text Over Images 19

Автор урока Maria Wendt

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Дениска
    Thumb up Thumb down +2

    Полезная вещь!

    Ответить

  2. acid
    Thumb up Thumb down 0

    Отлично, спасибо!

    Ответить

  3. kseniailchenko@gmail.com
    Thumb up Thumb down -4

    Комментарий скрыт из-за рейтинга

    Ответить

  4. Eugene
    Thumb up Thumb down 0

    Полезно, но не понятно зачем в последнем примере переводить фон в смарт-объект?

    Ответить

    Brym Ответ:

    Thumb up Thumb down +12

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

    Ответить

  5. Анна
    Thumb up Thumb down +1

    имхо в 3-ем примере текст читался лучше без линий, на нем и так концентрировалось внимание. А с линиями — все рябит

    Ответить

  6. Андрей
    Thumb up Thumb down 0

    Полезная статья, спасибо =)

    Ответить

  7. Ярослав
    Thumb up Thumb down 0

    Для начинающих очень полезно. Дам изи совет, применяйтей сразу несколько способов смотрится очень хорошо :)

    Ответить

  8. slavapro
    Thumb up Thumb down 0

    еще тень можно сымитировать подложив ту же надпись только более темного цвета с небольшим смещением, хорошо прокатывает в графических редакторах где встроенные средства тени бледны.

    Ответить

  9. Иван
    Thumb up Thumb down 0

    Круто! А как на счет текста, который принимает задний фон, как бы вырезая из наложения? Т.е. есть задний фон, на нем располагается какое-то наложение цветом, потом идет слой с текстом, но текст вырезан в наложении, и получается принимает задний фон:)

    Ответить

Оставить ответ


9 − = восемь

Вставить изображение