Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создаем деревянный декорированный текст в Photoshop

7 февраля 2014 | Опубликовано в Уроки | 1 Комментарий »

В этом уроке мы создадим типографический эффект в Adobe Photoshop. Мы будем работать с текстурами и паттернами. Также много времени уделим работе со стилям слоев.

 

 

Финальный результат

Finished

Исходники

1.  Текстура дерева
2.  Шрифт Janda Manatee
3. Паттерны от Ransie3.
4.  Цветочная ткань от sofi01.
5.  Diagonal Noise паттерн от Christopher Burton.
6. Градиенты от ilnanny.

Шаг 1

Создайте новый документ размером 1152 x 864 px. Затем дублируйте слой фона.

Step 01

Кликните дважды по названию слоя в палитре Layers (Слои), чтобы открыт окно Layer Style (Стили слоев). Примените следующие стили с настройками как на картинках ниже.

Gradient Overlay/Наложение Градиента:

Step 02

Для градиента используйте два цвета: #ffffff и #3f3f3f.

Step 03

Pattern Overlay/Перекрытие Узора:

Step 04

Таким образом у нас получится темная текстура дерева.

Step 05

Шаг 2

Создайте надпись, все заглавными буквами, используя шрифт “Janda Manatee”. Цвет текста — белый, размер — 250 pt, расстояние между буквами (Tracking) установите в 25.

Step 06

Дважды дублируйте слой с текстом.

Step 07

Шаг 3

Откройте файл ” VF_r03.jpg” из ” Patterns 21″. Затем в меню выберите Image -> Adjustments -> Levels / Изображение > Коррекция > Уровни, и укажите в параметре Gamma/Гамма значение 0.75.

Step 08

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

Step 09

Теперь зайдите в Edit -> Define Pattern / Редактировать > Определить узор, и введите имя для паттерна.

Step 10

Шаг 4

Кликните дважды по оригинальному слою текста, чтобы указать ему стиль слоя Drop Shadow/ Тень. Укажите Distance/Расстояние в 10, и Spread/Размах в 10, а также Size/Размер в 29.

Step 11

Так мы добавим обычную тень.

Step 12

Шаг 5

Кликните дважды по первой копии текста и укажите следующие стили слоев, с параметрами как на картинках ниже:

Bevel and Emboss/Тиснение, стиль:

Step 13

Contour/Контур:

Step 14

Stroke/Обводка:

Step 15

Drop Shadow/Тень:

Step 16

Должно получиться вот так:

Step 17

Шаг 5

Кликните дважды по второй копии слоя с текстом и укажите следующие стили слоев:

Bevel and Emboss/Тиснение:

Step 18

Contour/Контур:

Step 19

Pattern Overlay/Перекрытие Узора:

Step 20

Outer Glow/Внешнее Свечение:

Step 21

Drop Shadow/Тень:

Step 22

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

Step 23

Шаг 6

Удерживая Ctrl/Cmd кликните по слою с текстом, чтобы вызвать выделение по контуру букв.

Step 24

В меню выберите Select -> Modify -> Contract / Выделение > Модификация > Сжать, и укажите значение 10.

Step 25

Создайте новый слой поверх всего и назовите его “Pattern”. Залейте выделение белым цветом (Ctrl или Alt + Backspace). Снимите выделение (Ctrl/Cmd + D).

Step 26

Смените параметр Fill/Заливка для слоя “Pattern” на 0%, затем дублируйте его. Назовите копию  “Inner Shadow”.

Step 27

Шаг 7

Дважды кликните по слою “Pattern”, чтобы применить к нему стиль слоя Pattern Overlay/Перекрытие Узора. Смените режим наложения (Blend Mode) на Multiply/Умножение, выберите паттерн “mary-rore.jpg” из “Floral Fabric Patterns” и смените Scale/Размер на 50%.

Step 28

Вот что получится:

Step 29

Кликните дважды по слою “Inner Shadow”, чтобы применить к нему стиль слоя Inner Shadow/Внутренняя тень. Смените цвет на #553c21, а размер на 13.

Step 30

Результат:

Step 31

Шаг 8

Смените первый цвет на #707070, возьмите инструмент Rectangle Tool/Прямоугольник, и нарисуйте прямоугольник размером 16 x 21 px в верхней части одной из букв.

Step 32

Возьмите инструмент Add Anchor Point Tool/ «Перо+» (добавить опорную точку). Кликните по середине левой и правой стороны прямоугольника, добавляя таким образом точки.

Инструментом Direct Selection Tool / Прямое выделение, выделите две новые точки. При помощи стрелок на клавиатуре подвиньте точки на 2 пикселя правее (дважды нажмите по кнопке вправо).

Step 34

Шаг 9

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

Bevel and Emboss/Тиснение:

Step 35

Texture/Текстура:

Step 36

Gradient Overlay/Наложение градиента(выберите градиент “Brass 70″ из “RS_Metals.grd”):

Step 37

Наша фигура стала похожа на металлическую.

Step 38

Шаг 10

Дублируйте слой с фигурой, затем сделайте невидимым оригинал, нажав на иконку глаза слева от слоя. Теперь сделайте активным слой с копией фигуры и в меню выберите Layer -> Rasterize -> Layer Style/ Слой > Растрировать > Слой стиля. Так вы растрируете и фигуру и стиль слоя.

Step 39

Примените к слою стиль Drop Shadow/Тень, указав Distance/Расстояние в 1.

Step 40

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

Step 41

Дублируйте слой и инструментом Move Tool/Перемещение переместите фигуру на другую букву. Также вы можете ее поворачивать: Edit -> Transform -> Rotate/Редактировать >Трансформировать> Поворот.

Step 42

Повторите то же и для остальных букв.

Финальный результат

Step 43

Автор урока Rose

Перевод — Дежурка

Смотрите также:




Комментарии