Описание урока: Программа: Photoshop, Сложность: для начинающих, Время на выполнение: 15 минут

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

Предустановки урока
В процессе урока будут использованы следующие ресурсы:
- шрифт "Chunk Five"
- скриншот страницы

Шаг 1
Создайте новый документ и назовите его "Ленточка". Для нашего примера мы использовали холст 600х600.



Шаг 2
Создайте новый слой с названием "Текстура фона". Далее, заполните его светлым цветом (я использовал #cccccc). Теперь пройдите в меню Фильтр > Шум > Добавить шум (Filter > Noise > Add Noise) и добавьте слою немного шума. Это поможет создать текстуру. Я использовал следующие параметры:
-Количество (Amount): 10%
-Распределение (Distribution): Гауссовское (Gaussian)
-Монохромный (Monochromatic): поставить галочку



Теперь установите Непрозрачность (Opacity) слоя равной 15%.

Шаг 3
Давайте определим конкретную область, в рамках которой будет создаваться наше изображение. Лично я для этой цели использовал инструмент Прямоугольник (rectangle tool), задав фиксированные размеры: 300×200 пикселей.



Поместите этот прямоугольник в центре холста и назовите его слой "Обрезающая маска".



Шаг 4
Примените к слою "Обрезающая маска" следующие стили слоя (layer styles), что бы придать ему красивую тень и немного выделить.



Шаг 5
Возьмите любое понравившееся вам изображение (лично я использовал скриншот страницы PSD Tuts), поместите его на свой документ над слоем "Обрезающая маска", и пройдите в меню Слои > Создать обтравочную маску (Layer > Create Clipping Mask).



Шаг 6
Мы получили изображение, на основе которого и будем создавать непосредственно нашу ленточку. Далее вам предстоит повернуть его примерно на 35 градусов. Инициируйте свободную трансформацию (горячие клавиши: Ctrl + T), либо пройдите в меню Редактировать > Свободная Трансформация (Edit > Free Transfrom). Проследите, чтобы углы ленточки находились за пределами изображения-маски. Цвет прямоугольника – заготовки для ленточки на данном этапе не имеет значения, так как далее мы применим наложение градиента к его слою. Назовите этот слой "Ленточка".



Шаг 7
Далее нам предстоит создать слой маску для слоя с ленточкой. Это скроет части ее части, выходящие за пределы изображения-подложки. Проделайте следующее:
1. Удерживая Ctrl, кликните ЛКМ по слою с обрезающей маской. Это создаст выделенную область вокруг обрезающей маски.
2. Мы хотим, что бы наша ленточка немного выходила за грани фонового изображения, так что давайте немного расширим его через меню Выделение > Модификация > Расширить (Select > Modify > Expand) и зададим величину расширения примерно 4 пикселя.
3. При активном выделении, выберите слой "Ленточка" и создайте слой-маску (layer mask). Вы можете сделать это одним из двух способов:
- Слои > Слой-маска > Показать выделенную область (Layer > Layer Mask > Reveal Selection).
- Кликните на иконке добавления новой слой-маски (Add Layer Mask) на палитре слоев.



Шаг 8
Теперь применим несколько стилей слоя к форме нашей ленточки. Эти слои придадут нашей ленточке тени, отсветы и текстуру, улучшив ее вид. Мы применим следующие стили:
-Падающая тень (Drop Shadow) (внешняя тень)
-Внутреннее свечение (Inner Glow) (текстура)
-Тиснение (Bevel and Emboss) (выделение краев)
-Наложение градиента (Gradient Overlay) (расцветка ленточки)
-Обводка (Stroke) (подчеркнет внешние грани ленточки)



Мы получили что-то похожее на это:



Шаг 9
Теперь нам предстоит сделать складки на ленточке. Помните, как мы расширили контуры ленточки за пределы нижнего изображения на 4 пикселя? Теперь мы добавим складки так, как будто ленточка обворачивается вокруг основного изображения.
1. Создайте новый слой и назовите его "Складки ленточки". Расположите его над слоем "Фоновая текстура" и ниже слоя "Обрезающая маска".
2. Установите основным цветом (foreground color) какой-нибудь темный цвет (например, #240500).
3. Выберите инструмент Кисть (brush tool) и задайте ее радиус примерно 9 пикселей и 100% жесткость (hardness).
Теперь при помощи кисти начертите маленькие круги на обеих нижних гранях ленточки. В силу того, что данный слой находится под обрезающей маской, вы сможете увидеть только темную часть от кисти вокруг углов ленточки, которые накладываются на фоновое изображение.



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



Шаг 10
Добавим текст. Я использовал следующие параметры:
-шрифт: Chunk Five
-размер шрифта: 24pt
-интервал: 75
-цвет: #240500



Разместите текст на ленточке и поверните его примерно на 35 градусов (при помощи Свободной Трансформации, как мы сделали в шаге 6).

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



На данном этапе ваша композиция должна выглядеть примерно так:



Шаг 11
Наконец, добавим эффект машинной строчки на нашу ленточку. Выберите инструмент Текст (text tool) и напечатайте серию дефисов. После этого измените настройки на следующие:
- шрифт: Chunk Five
- размер: 13pt
- интервал: 200
- цвет: #700404
- непрозрачность слоя с текстом: 50%



Поместите созданный текст на ленточку и поверните его на 35 градусов (так же как мы сделали для сомой ленточки и надписи в шагах 6 и 10). Теперь давайте применим кое-какие стили слоя, чтобы придать нашей машинной строчке более реалистичный вид.



Продублируйте этот текст и переместите дубликат к нижней грани ленточки. На данном этапе ваша композиция должна выглядеть примерно так:



Шаг 12
Последнее, что нам предстоит сделать - это применить слой-маску к нашей машинной строчке, так, чтобы она не выходила за пределы границ изображения. Для этого просто продублируйте слой-маску "Ленточки" и переместите дубликат на новый слой со швом.



Примените этот эффект к обоим швам, и на этом все! Вы должны получить что-то вроде этого:



Законченная композиция
Вот и все! Теперь вы знаете как создавать простую ленточку в Photoshop. Вы можете поэкспериментировать с другими цветами. Или же попробуйте создать закругленные грани ленточки, в тех местах, где она пересекает фоновое изображение. Это можно сделать при помощи инструмента Перо (Pen) и существующих слой-масок. Удачи!