Резкое подчеркивание текста

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

Вот я рисую в Фотошопе как в старые добрые времена. Пусть и использую векторные шейпы почти для всего, но растр со счетов не списываю. И вот почему: в макетах нужна чёткость. Чёткие макеты нравятся чётким пацанам! Шутка.

Сегодня разберем подчеркивание текста. Напомню, подчеркивание используется для обозначения ссылок. Возьму для примера обычный текст в Фотошопе и подчеркну несколько слов:

Как видите, подчеркивание получилось «мыльным», причем при увеличении видно, что линия выглядит по-разному на двух строках:

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

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

ШАГ 1: установим точное межстрочное расстояние

В панели настроек текстового слоя установим точное значение межстрочного интервала в пикселях:

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

ШАГ 2: подтянем слой

Интересная особенность векторных форм в Фотошопе (а текст — это векторная форма) в том, что их можно двигать меньше, чем на пиксель. Но для этого нужно увеличить просмотр. Вот такая хитрость. Итак, зумим на максимум, нажимает ⌘+T (Edit → Free Transform) и двигаем стрелками клавиатуры слой чуть выше или ниже, пока подчеркивание не станет идеальной линией:

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

Отично! Теперь подчеркивание стало чётеньким. А о том, как делать полупрозрачное подчеркивание, я расскажу в другой раз.