Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Основы » 5 способов увеличения контрастности текста при расположении его поверх изображений

5 способов увеличения контрастности текста при расположении его поверх изображений

Автор: sondar | Категория: Уроки Photoshop » Основы | 4-12-2014, 21:02
Одним из последних трендов в веб-дизайне стало использование в качестве фона изображений с высоким разрешением. Здесь очень важно, чтобы текст, помещенный поверх такого фона, выглядел достаточно контрастно. Четкость и легкость восприятия – очень критичная составляющая информации, передаваемой через веб-сайт.

Данный урок по фотошопу познакомит вас с пятью способами оптимизации контраста при расположении текста поверх изображений.

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

5 способов увеличения контрастности текста при расположении его поверх изображений


Прежде всего нужно создадим новый слой и назовем его “Наложение цвета”. Далее, возьмите образец цвета с поверхности показанной ниже рубашки (нажмите и удерживайте для этого клавишу I), и при помощи сочетания клавиш Shift + F5 залейте выбранным цветом созданный слой.

5 способов увеличения контрастности текста при расположении его поверх изображений


Наконец, уменьшите Непрозрачность (Opacity) залитого цветом слоя до 50%, и сместите его под слой с текстом.

5 способов увеличения контрастности текста при расположении его поверх изображений


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

5 способов увеличения контрастности текста при расположении его поверх изображений


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

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

5 способов увеличения контрастности текста при расположении его поверх изображений


Очевидно, лучше всего будет смотреться какой-нибудь светлый цвет. Например, белый.

5 способов увеличения контрастности текста при расположении его поверх изображений


Следующим шагом нужно применить стиль слоя Тень (Drop shadow). Уменьшите Непрозрачность (Opacity) до 52%. Затем задайте Размах (Spread): 16% и Размер (Size): 10 пикселей. Угол должен быть примерно -144 градуса.

5 способов увеличения контрастности текста при расположении его поверх изображений


Как видите, применение простого стиля слоя заметно улучшило контрастность.

5 способов увеличения контрастности текста при расположении его поверх изображений


3. Лини
Это – один из наиболее легких способов улучшения контрастности. Достаточно просто добавить две белые линии под и над надписью, зрительно отделив, таким образом, текст и фон.

5 способов увеличения контрастности текста при расположении его поверх изображений


Добавленные две линии…

5 способов увеличения контрастности текста при расположении его поверх изображений


…обеспечивают улучшают восприятие двух элементов дизайна.

4. Оттенение
Еще один способ улучшения восприятия текста за счет усиления контраста – добавление под текст оттененной фигуры. Чтобы вам легче было понять о чем идет речь, я покажу на примере.

На примере ниже надпись практически невозможно прочесть, потому, что она сливается с фоном. Разделитель между строками текста теряется среди деталей здания на фоне.

5 способов увеличения контрастности текста при расположении его поверх изображений


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

Залейте фигуру черным цветом и задайте белую обводку толщиной 3 пикселя.

5 способов увеличения контрастности текста при расположении его поверх изображений


Сместите слой с фигурой под слои с текстом и его разделителем, после чего уменьшите Непрозрачность данного слоя до 57%.

5 способов увеличения контрастности текста при расположении его поверх изображений


Результат выглядит более профессионально, да и воспринимается намного лучше

5 способов увеличения контрастности текста при расположении его поверх изображений


5. Размытие фона
Пятый и последний способ улучшения контрастности – применение к фону легкого эффекта размытия.

На исходном изображении текст различить довольно трудно:

5 способов увеличения контрастности текста при расположении его поверх изображений


Чтобы это исправить, для начала нужно превратить фоновое изображение в смарт-объект. Кликните по слою с фоном на палитре слоев ПКМ, и выберите в открывшемся контекстном меню пункт Преобразовать в смарт-объект (Smart Object).

5 способов увеличения контрастности текста при расположении его поверх изображений


Пройдите в меню Фильтр > Размытие > Размытие по Гауссу (Filters/Blur/Gaussian Blur)

5 способов увеличения контрастности текста при расположении его поверх изображений


Задайте радиус размытия 3.8 пикселей.

5 способов увеличения контрастности текста при расположении его поверх изображений


Вот теперь контраст заметно лучше, и текст стал более различимым:

5 способов увеличения контрастности текста при расположении его поверх изображений


Надеюсь, урок вам понравился. Не стесняйтесь задавать вопросы и оставлять свои комментарии.


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

Другие новости по теме:


Просмотров: 22618 | Напечатать | Комментарии (0)

Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Легкое тонирование при помощи режимов наложения
Легкое тонирование при помощи режимов наложения


Хотите поближе познакомиться с магией тонирования? Методов и техник тонирования существует великое множество, но сегодня я познакомлю вас с такой техникой, которая, за счет использования режимов наложения слоев, максимально упрощает весь процесс.

Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Мы в соц сетях

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.