Тематический текстурированный шильдик на сайт

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

1 Шаг

Создаем новый документ шириной 500px, высотой 200px. Наша задача — сделать нечто наподобие шапки сайта в качестве фона для изображения. Создайте новый слой и нанесите с самого верху темно-коричневую полоску шириной 10px. На тот же слой добавьте светло-коричневый разделитель сразу под получившейся полоской. Далее создайте очередной слой и создайте еще одну коричневую полосу цветом чуть светлее самой верхней с шириной до отметки 75px. Следующей полосой на новом слое у нас должен быть линейный градиент направлением сверху вниз от светло-серого, до почти белого серого, с шириной до отметки 110px. На отметке 75px по высоте у нас должен находиться разделитель — линия белого цвета в 1px, а на отметке 110px — линия темно-серого цвета в 1px. Оставшаяся часть нашего документа должна быть белой.

2 Шаг

Откройте Adobe Illustrator. Создайте новый документ и на шаге 2a создайте прямоугольник 240px шириной, 100px высотой. На шаге 2b нужно, используя инструмент Add Anchor Point Tool, создать пару точек в тех местах, от которых мы планируем срезать углы нашего шильдика. Затем сдвиньте левый верхний угол прямоугольника на 20px ниже, а нижний — на 20px выше. На шаге 2c нанесите на рисунок круг, который позже станет отверстием будущей бирки. Не забывайте пользоваться направляющими.

3 Шаг

Далее, используя инструмент Divide Tool палитры Pathfinder — вырежьте в бирке отверстие.

4 Шаг

Здесь, используя Rotate Tool, поверните шильдик на -30 градусов.

5 Шаг

Скопируйте шильдик и вставьте его в Photoshop. При вставке выберите пункт Paste as Path.

6 Шаг

Создадим новый документ в Photoshop: ширина — 580px, длина — 200px. Используем его для создания текстуры. Залейте фон градиентом от светлого желто-коричневого до темного желто-коричневого и протяните его от правого нижнего угла к левому верхнему.

7 Шаг

Превратите градиент в текстуру, используя настройки ниже.

8 Шаг

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

9 Шаг

Далее откройте палитру Path и создайте выделение этого контура. Скопируйте выделенную область и удалите текущий слой (текстура). Затем вставьте бирку в нужное место и примените к новому слою нижеследующие стили.

10 Шаг

Возвращаемся в Adobe Illustrator, создаем там красный прямоугольник шириной 170px и 70px длиной. Поместите на него какой-нибудь текст (PSDTUTS, к примеру), сделайте его активным. Теперь идем в меню Type > Create Outlines, затем поворачиваем прямоугольник вместе с текстом на -30 градусов. При выбранных тексте и красном прямоугольнике, вызываем палитру Pathfinder и жмем Divide. После этого выбираем каждую букву и поочередно их удаляем. И так, у нас есть красный прямоугольник с вырезанной надписью PSDTUTS. Копируем его и вставляем в Photoshop.

11 Шаг

Устанавливаем режим наложения для нашего нового слоя с текстом равным Multiply.

12 Шаг

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

13 Шаг

Казалось бы — все и так уже выглядит отлично и пора заканчивать с эффектами. Но я добавлю еще немного глубины. Вызываем Edit > Transform > Perspective и чуть опускаем левый нижний угол.

14 Шаг

Перспектива немного испортила качество нашей бирки. Подправить артефакт можно с помощью фильтра Filter > Sharpen > Smart Sharpen. Используйте настройки ниже.

15 Шаг

Усилить чувство перспективы можно, чуть замылив дальний для зрителя конец бирки (правый нижний угол) инструментом Blur Tool.

16 Шаг

Возьмите инструмент Pen Tool и нанесите на рисунок линию — будущий шнурок, на котором будет держаться шильдик.

17 Шаг

Переключитесь на Brush Tool и установите размер кисти равным 3px, Hardness — 100%. Убедитесь, что основной цвет выбран черный. Перейдите обратно в Pen Tool, сделайте правый клик мышкой на линии шнурка и выберите пункт Stroke Path. Далее тонким ластиком затрите области, которые должны скрыться за биркой, также подправьте верхние края в соответствии с рисунком.

18 Шаг

Сейчас под биркой мы имеем чересчур темный фон. Поэтому, добавим немного света. Скопируем наш слой со средней коричневой полосой. Открываем Filter > Render > Lighting Effects и используем настройки ниже.

19 Шаг

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

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psd.tutsplus.com, автор перевода указан в начале урока.