IQSites - умный конструктор сайтов
+7 (911) 11-8888-1
Звоните прямо сейчас
Социальные сети
Как сделать текст читаемым? Простые решения в Photoshop.

Как сделать текст читаемым? Простые решения в Photoshop.

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

19 августа 2016 в 11:19

Что может быть хуже сливающегося с фоном текста, который невозможно читать? Соответственно первое, о чем стоит позаботиться, это сделать текст так, что бы он на контрасте отличался от фона. Самые распространенные приемы - светлый шрифт на темном фоне и наоборот, темный шрифт на светлом. Для достижения таких эффектов достаточно открыть Photoshop и затемнить/осветлить будущий фон секции:

Как сделать текст читаемым? Простые решения в Photoshop.
Как сделать текст читаемым? Простые решения в Photoshop.

Один из наиболее простых способов сделать это - открыть нужную картинку, выбрать инструмент "Заливка" (1), создать новый слой (2), залить изображение черным цветом (или белым, если вы осветляете) и потянуть за ползунок "Непрозрачность" (3) до наиболее оптимального уровня.

Однако если вы хотите результат "посочнее", то существует еще один метод:

Как сделать текст читаемым? Простые решения в Photoshop.
Как сделать текст читаемым? Простые решения в Photoshop.

Мы применим более гибкий инструмент. Новый слой создавать не нужно, достаточно выбрать "Кривые" (1) и немного поэкспериментировать с ползунками, результат вышел вполне приемлемым для фона.

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

Как сделать текст читаемым? Простые решения в Photoshop.

Минута дополнительных работ с кривыми, и результат стал еще приемлемее:

Как сделать текст читаемым? Простые решения в Photoshop.

Осветление происходит по тем же принципам, что и затемнение, а значит текст будет уже темным:

Как сделать текст читаемым? Простые решения в Photoshop.

Это достаточно базовые принципы работы с контрастом текста и фона, их можно применять на своем сайте, будучи уверенным в качестве своей работы.



Подписка на обновления блога
Хотите оперативно получать новости компании из корпоративного блога? Просто заполните форму ниже.
Вы сможете отписаться в любой момент.
* Поля, обязательные для заполнения
Теги: Обучающая статья

Другие статьи блога

Как открыть PSD если Photoshop'а под рукой не оказалось?
Как открыть PSD если Photoshop'а под рукой не оказалось?
Делаем заметный призыв к действию на сайте.
Делаем заметный призыв к действию на сайте.
Сногсшибательное видео для фона сайта? На смартфон? Легко!
Сногсшибательное видео для фона сайта? На смартфон? Легко!

×

Информация, за которую другие щедро платят!

Подпишитесь на блог IQSites и получайте свежие лайфхаки конверсии сайтов, привлечения трафика и клиентов, тренды веб-дизайна, реальные кейсы и многое другое. Это всё ещё бесплатно!
* Поля, обязательные для заполнения

Нажимая "Подписаться", Вы принимаете
условия обработки персональных данных.

Наверх
array(5) { ["id"]=> int(0) ["ip"]=> string(13) "54.225.39.142" ["language"]=> string(2) "en" ["gmt"]=> int(0) ["guest_id"]=> string(32) "b5c17da855527a3640641a61393a87c2" }