Текст-эффект в виде вкусного печенья с глазурью

Текст-эффект в виде восхитительного печенья

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

Материалы для урока:

Текстуры дерева
Ржавая текстура

Шаг 1

Скачате 8 деревяных текстур и откройте в Photoshop файл «elso.png». Далее выберите Edit -> Define Pattern и назовите паттерн по вашему желанию.

Затем выберите File -> New и создайте новый документ размером 1150 x 768 px.

Создайте новый слой над слоем “Background” (Ctrl+Shift+N) и назовите его «Wood Pattern».

Возьмите инструмент Paint Bucket Tool, на верхней панели настроек инструмента выберите Pattern в качестве заливки и из выпадающего списка выберите паттерн, который мы создали в начале этого шага. Залейте слой текущим деревянным паттерном.

Создайте новый слой над слоем «Wood Pattern» на панели слоев и назовите его «Gradient». Возьмите инструмент Gradient Tool (G), измените цвет переднего плана на черный и на верхней панели настройки градиента выберите тип градиента «Foreground to Transparent» и «Diamond». Поставьте галочку у «Reversе». Проведите градиентом из центра до одного из краев холста.

Измените режим наложения (Blend Mode) слоя «Gradient» на Soft Light

Кликните по иконке «Create new fill or adjustment layer» в нижней части панели слоев, чтобы создать корректирующий слой, и выберите «Levels».

Перетащите черный ползунок влево до отметки «65», как показано на рисунке:

Итак, фон для работы с текстом-печеньками готов!

Шаг 2

При помощи инструмента Horizontal Type Tool (T) напишите желаемый текст. В уроке используется шрифт Bubblegum, размер шрифта — 250 px. Откройте панель настройки текста (Window -> Character) и установите значение параметра Tracking = 10, чтобы избежать наложения обводки букв

Далее нам нужно настроить кисть для создания обводки текста. Откройте панель настройки кисти (Window -> Brush) и выберите жесткую круглую кисть. На вкладке Brush Tip Shape установите размер кисти (Size) = 20, жесткость (Hardness) = 85% и Интервалы (Spacing ) = 68%

Перейдите на вкладку Shape Dynamics и установите следующее значение параметра Колебание размера (Size Jitter) = 100%. Далее поставьте галочку у параметра «Wet Edges». Убедитесь, что остальные значения параметров у вас такие же, как на рисунке ниже:

Вернемся к текстовому слою. Перейдите на текстовый слой на панели слоев, кликните по нему правой кнопкой мыши и выберите Create Work Path (Создать рабочий контур).

Создайте новый слой (Ctrl+Shift+N), назовите его «Stroke» и расположите под текстовым слоем. Измените цвет переднего плана на #a06600 и выберите инструмент Direct Selection Tool

Кликните правой кнопкой мыши по созданному ранее контуру (убедитесь, что вы находитесь на слое «Stroke») и выберите Stroke Path (Выполнить обводку контура)

В открывшемся окошке выберите Кисть (Brush) в качестве инструмента обводки и уберите галочку у параметра Simulate Pressure.

Таким образом мы выполнили обводку контура букв:

Шаг 3

Продублируйте текстовый слой, нажав Ctrl+J, и отключите отображение оригинального текстового слоя, нажав на иконку глаза слева от иконки слоя на панели слоев:

Кликните правой кнопкой мыши по копии текстового слоя и выберите «Rasterize Type».

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

Далее выберите Filter -> Blur -> Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу). Установите значение радиуса = 2.

Удерживая Ctrl, кликните по продублированному растеризованному слою с текстом и по слою «Stroke», чтобы их выделить. После этого выберите Layer -> Merge Layers (или нажмите Ctrl+E), чтобы слить слои.

Продублируйте полученный слой и отключите отображение этого слоя (нажмите на иконку глаза)

Шаг 4

Кликните дважды по продублированному слитому слою (в уроке он называется «Cookies copy» — это тот слой, который у вас сейчас является видимым), чтобы открыть окно настроек стиля слоя (Layer style). Установите следующие настройки:

Drop Shadow: (цвет #825a0c)

Inner Shadow: (цвет #986917)

Bevel and Emboss:

Контур: Notched Slope – Rounded
Цвет «Highlight Mode»: #e4d2b2
Цвет «Shadow Mode»: #c5a260

Загрузить нужный контур можно следующим образом:

Contour:

Контур: Half Round

Texture: (текстура Rusted Metal)

Вот, что у вас должно получиться:

Шаг 5

Сделайте видимым сверхний продублированный слой (в уроке он называется «Cookies copy 2»), для этого кликните по пустому квадратику слева от иконки слоя

Кликните дважды по слою «Cookies copy 2», чтобы открыть окно настроек стилей слоя и установите следующие настройки:

Color Overlay: (цвет #c5a464)

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

Шаг 6

Пришло время применить к нашему тексту несколько фильтров, чтобы текстура стала более ярковыраженной. Для начала, преобразуйте слой «Cookies copy 2» в смарт-объект. Для этого кликните по этому слою правой кнопкой мыши на панели слоев и выберите «Convert To Smart Object». Это нам нужно для того, чтобы применять фильры к цвету, полученному от стиля слоя «Color overlay» и впоследствии иметь возможность скорректировать результат применения того или иного фильтра

Измените цвет переднего плана на #c3a15f, а заднего – на #93713a

Далее выберите Filter -> Sketch -> Reticulation (Фильтр > Эскиз > Ретикуляция) и установите следующие настройки:

Вот, что у вас получится:

Затем выберите Filter -> Brush Strokes -> Ink Outlines и установите следующие настройки:

Результат:

Ну и наконец, выберите Filter -> Texture -> Craquelure (Фильтр > Текстура > Кракелюры). Настройки фильтра:

Результат:

Итак, с фильтрами мы закончили. Если вы хотите поэкспериментировать с настройками того или иного фильтра, кликните дважды по строке «Filter Gallery» на панели слоев, чтобы открыть окно настроек фильтра. Если вы хотите внести какие-то изменения в настройки, то делайте это сейчас, поскольку в следующем шаге мы растеризуем этот слой со смарт-объектом.

Шаг 7

Кликните правой кнопкой мыши по слою «Cookies copy 2» на панели слоев и выберите Rasterize Layer (Растрировать слой)

Этот слой больше не является смарт-объектом:

Находясь на слое «Cookies copy 2», выберите Image -> Adjustments -> Hue/Saturation (или нажмите Ctrl+U) и измените значение параметра Saturation (Насыщенность) на -50:

Далее выберите Image -> Adjustments -> Color Balance и установите следующие настройки для средних тонов (Midtones):

Измените режим наложения (Blend Mode) слоя «Cookies copy 2» на Soft Light (Мягкий свет), чтобы текстура приобрела светло-красноватый оттенок:

Шаг 8

Создайте новый слой (Ctrl+Shift+N), назовите его «Frosting» и поместите поверх всех слоев. Измените цвет переднего плана на #eae2cb, а заднего – на #c3a46c. Перед тем как мы будем рисовать глазурь, мы добавим слою несколько стилей – таким образом рисовать глазуть будет проще и интересней

Итак, кликните дважды по слою «Frosting» и установите следующие настройки стилей слоя (Layer style):

Drop Shadow: (цвет #ad7b40)

Inner Shadow: (цвет #9c958f)

Outer Glow: (цвет #e3ddd2)

Bevel and Emboss: (цвет «Shadow Mode» #cac8c4)

Texture: (текстура: Cells)

Satin: (цвет #838383)

Color Overlay: (цвет #ebe1c6)

Шаг 9

После того, как мы добавили стили слоя, нам нужно настроить кисть для нанесения глазури smile.gif Откройте панель настройки кисти (Window -> Brush или нажмите F5), выберите жесткую круглую кисть и на вкладке Brush Tip Shape (Форма отпечатка кисти) установите следующие настройки:

Size (Размер) = 45
Hardness (Жесткость) = 100%
Spacing (Интервалы) = 25%

На вкладке Shape Dynamics (Динамика формы) установите значение параметра Size Jitter (Колебание размера) = 75% и убедитесь, что все остальные значения параметров = 0:

Убедитесь, что вы находитесь на слое «Frosting» и начинайте добавлять «глазурь». Проводите кистью быстро и медленно, чтобы понять, как работает кисть в обоих случаях. Поскольку стили слоя уже применены, то вы заметите, что «глазурь» распределяется медленно и равномерно, прямо как настоящая!

Помните, что вы можете изменять размеры кисти, удалять и добавлять различные участки «глазури». Хорошенько поработайте над этим шагом, чтобы «глазурь» смотрелать максимально реалистично)

После того, как вы закончите добавлять глазурь, продублируйте (Ctrl+J) слой «Frosting», кликните правой кнопкой на копии этого слоя на панели слоев и выберите Clear Layer Style (Очистить стиль слоя):

Убедитесь, что цвета переднего и заднего плана = #eae2cb и #c3a46c

Находясь на копии слоя «Frosting» (в уроке копия называется «Frosting copy»), выберите Filter -> Noise -> Add Noise (Фильтр > Шум > Добавить шум). Настройки следующие:

Измените режим наложения (Blend Mode) слоя «Frosting copy» на Soft Light (Мягкий свет) и установите значение Непрозрачности (Opacity) = 50%. Таким образом мы сделаем насыщенней цвет глазури и придадим ей симпатичное свечение

Итак, с текст-эффектом мы закончили, теперь мы будем создавать решетку.

Шаг 10

Создайте новый документ размером 42 x 1 px с прозрачным фоном (Background contents: Transparent)

Нажмите Ctrl + R, чтобы у вас по краям рабочей области появилась линейка. Создайте направляющую, кликнув по левой вертикальной линейке, и, не отпуская левую кнопку мыши, протащите ее в центр вашего холста (поставьте галочку у параметра Snap (View > Snap), чтобы направляющая автоматически «примагнитилась» к центру вашего холста, когда вы будете примерно в его середине)

Этот пункт необязательный, но для удобства вы можете его выполнить: выберите Edit -> Preferences -> Cursors (Редактирование > Установки > Курсор) и поставьте галочку у опции «Show Crosshair in Brush Tip»

Вернемся к нашему холсту (для удобства вы можете его приблизить).Выберите круглую жесткую кисть размером 15 рх, цвет кисти — #5a391d. Расположите центр кисти за сверху пределами холста, зажмите Shift и проведите кистью сверху вниз.

Мы используем Кисть вместо заливки, поскольку при помощи кисти можно получить более ровный(плавный) результат.

Далее выберите Edit -> Define Pattern (Редактирование > Определить узор), назовите его «Vertical»

Затем выберите Image ->Image Rotation -> 90° CW (чтобы повернуть холст на 90 градусов), а затем снова выберите Edit -> Define Pattern. Назовите полученный паттерн «Horizontal»

Шаг 11

Вернемся к нашему основному холсту с текстовым эффектом. Создайте новый слой (Ctrl+Shift+N), назовите его «Rack» и расположите над оригинальным тестовым слоем (изображение которого в данный момент отключено). Выберите инструмент Rounded Rectangle Tool (Прямоугольник со скругленными углами), на верхней панели настройки инструмента выберите режим «Paths» (Контуры) и установите значение радиуса = 10 рх. Нарисуйте прямоугольник со скругленными углами вокруг текста как показано на риcунке:

Убедитесь, что цвет переднего плана = #5a391d, и обведите контур – так же, как мы делали в шаге 2 (правый клик по контуру > Stroke Path (Выполнить обводку контура) и уберите галочку у параметра Simulate Pressure)

Создайте новый слой, назовите его «Rack — V» и расположите над слоем «Rack». Возьмите инструмент Paint Bucket Tool (Заливка), выберите паттерн «Vertical» в качестве заливки и заполните им этот слой.

При помощи инструмента Rectangular Marquee Tool (Прямоугольная область) создайте прямоугольное выделение нужного размера (для примера см.рисунок), но обратите внимание на то, что все вертикальные линии должны находится внутри каркаса (или пересекая каркас)решетки. Оставьте по 10 — 15 px сверху и снизу – они нам понадобятся для создания тени.

Выберите Select -> Inverse (Выделение > Инверсия) и нажмите кнопку Delete, чтобы удалить ненужную область.

Создайте новый слой, назовите его «Rack — H» и поместите под слоем «Rack — V». Залейте этот слой паттерном «Horizontal». Вы можете передвинуть его по вашему желанию, используя трансформацию (Ctrl+T)

Снова выберите инструмент Rectangular Marquee Tool (Прямоугольная область) и создайте прямоугольное выделение нужного размера. На этот раз, оставьте по 10-15 рх слева и справа.