Тень текста в Фотошопе

Очередной перевод замечательного урока по теням текста в Фотошопе от дизайнера Collis, основателя проекта psd.tutspus. В своем уроке Коллис применяет много устаревших техник приема, что в целом не так уж и плохо. Урок написан давно, с тех пор в Фотошопе появилось много нового. Я текст из урока на свой манер. PSD файл со всеми слоями можно будет скачать в конце статьи. Вместо пиксельных заливок я пользуюсь заливочными слоями Solid. Вместо прямого применения градиента использую специальные градиентные слои. Любые использования фильтров прикрепляю к смарт слою, чтобы иметь контроль за настройками и не переделывать работу по 100 раз. Тем не менее урок очень полезен для новичков, чтобы освоить основы работы с пикселями в Фотошопе. Поехали.

Лучшая книга по рисованию, которую я когда либо читал Drawing on the Right Side of the Brain. Не смотря на это я ужасно рисую. Однако теперь я намного лучше понимаю свет и тени. В этом небольшом уроке мы изучим основы света и теней, чтобы получить впечатляющий эффект текста для веб дизайна.

Источник света

До того как мы начнем, я приведу небольшую диаграмму того, как свет соприкасается с объектом.  Как видите свет падает с одной стороны, тень объекта образуется с другой стороны. Учитывайте, что под тенью я имею ввиду не стиль слоя Drop Shadow в Фотошопе. В нашем случае нам нужно, чтобы объект был трехмерным.

Градиент на рабочей области

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

Создаем текст

Теперь поместим на рабочую область текст. Я выбрал очень крутой шрифт Agency FB которые имеет очень острые углы форм букв. Цвет букв #c2c8d4

Нажмите Ctrl и кликните по иконке слоя текста, чтобы загрузить выделение. Создайте новый слой. Внутри выделенной области создайте новый градиент, от цвета #495a79 до невидимости. Сейчас наша цель — затемнить нижний угол надписи.

Свет и тень

Установите цвет заднего фона foreground на черный (это можно сделать кликнув по клавише D). Теперь CTRL+клик по иконке слоя с текстом и создаем новый слой ниже текста. Сдвиньте выделение на 1 пиксель ниже и правее стрелочками. И нажмите Alt+Backspace, чтобы залить его черным цветом. Затем опять сдвиньте выделение ниже и правее на 1 пиксель. И опять залейте черным. Проделайте это раз 30. Именно поэтому я и пользуюсь шорткатами вместо Edit > Fill

Так же обратите внимание, что мы передвигаем область выделения а не сам слой. Поэтому у вас должен быть выбран инструмент Marquee tools. Если у вас выбран не он, а например Move Tool (V), то при нажатии на стрелочки будет сдвигаться весь слой вместе с пикселями.

 Вот что у нас должно получиться. Уберите выделение и переключитесь на слой с тенью. Примените к ней фильтр Filter > Blur > Motion Blur с настройками -45 и 30 пикселей.

Установите слою с тенью режим наложения Multiply 40% невидимости Opacity, затем нажмите SHIFT и нажмите стрелочку вниз и влево на клавиатуре один раз. Это передвинет слой на 10 пикселей. После этого у вас могут остаться некоторые заблуренные части тени выше букв. Если так и есть, просто удалите их ластиком Eraser Tool.

Теперь продублируйте слой с тенью, нажмите SHIFT и сдвиньте слой её ниже и правее. Снова примените эффект Motion Blur с расстоянием 50px, а режим наложения нового слоя установите на Multiply и 20% невидимости Opacity.

Теперь создайте новый слой поверх всех слоев, нажмите CTRL и кликните по иконке слоя с текстом чтобы загрузить выделение. Залейте слой белым цветом. Не убирайте выделение, оно нам ещё нужно. Сдвиньте его на 1 пиксель ниже и правее. Нажмите DELETE, чтобы удалить остаток слоя. Новому слою, который по сути является кромкой текста задайте 80% невидимости.

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

Внешний свет

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

Нажмите Ctrl+T чтобы трансформировать и повернуть прямоугольники. Обычно мы нажимаем ENTER чтобы утвердить вариант, но в этот раз сделайте правый клик мышкой. Появится выпадающее меню из которого можно выбирать виды трансформирования. Выберите Perspective. Захватите за верхние уголки и сдвиньте их ближе друг к другу.

В режиме наложения установите Overlay и 20% невидимости. Перейдите в фильтры Filter > Blur > Gaussian Blur, где установите 8 пикселей размытия.

Получится следующий эффект.

Так как полоски по идее являются светом, логично, что они как то взаимодействовали с бликами по краям текста. Сделайте CTRL и клик по слою с светом, это загрузит выделение. Затем перейдите на слой с окантовкой текста и нажмите иконку маски Add Layer Mask  на панеле слоев. Это создаст маску на основе выделения, которая скроет часть слоя.

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

Теплый оттенок

Для начала создайте новый слой и залейте его розовым цветом #9d506c.

Режим наложения Color и невидимость 20%. Поверх теплого розового оттенка мы смешаем немного желтого. Вам нужно поместить розовый слой ниже верхнего слоя с текстом, чтобы слой применялся только к поверхности заднего фона.

Создадим слой над розовым слоем. Залейте его полностью белым цветом и примените фильтр Filter > Render > Lighting Effects. Я не часто пользуюсь этим эффектом, но у него есть одна очень крутая настройка под названием Two O’clock Spotlight, которую можно выбрать в стилях Style на самом верху. В нашем случае элипс нужно растянуть побольше.

Теперь к слою с светом примените режим наложения Overlay. Продублируйте слой, уберите невидимость до 40% и поместите его над всеми слоями. Буквы тоже должны получить желтый оттенок.

Заключение

Наконец мы вновь продублируем свет и поставим 60% режима наложения. Примените к слою пустую маску. Выберите инструмент градиента Gradient Tool с цветом от черного к белому. Кликните по иконке маски и проведите градиент так, чтобы белый цвет шел сверху, а черный с низу по диагонали.

На этом все, удачных вам экспериментов.

Скачать фаил

Чтобы скачать мой PSD фаил нужно кликнуть по кнопочке Like для Фэисбука. После этого появится ссылка на скачку.


Скачать фаил

P.S. Зачем платить дороже за то, что выглядит так же, а качеством не хуже? В интернет магазине multitime.ru  можно купить копии часов RADO по сходной цене.