Текстурная бирка для веб-сайта

Сегодня мы увидим урок от Sean Hodge. Шон живет в Орландо, Флорида. Он редактор ресурсов Psdtuts+, Vectortuts+ и Creative Session. Дизайном Шон занимается уже много лет. Урок достаточно старый, написал  лет пять назад. Приемы, используемые в уроке олдкульные, но для начинающего фотошопера полезны для осваивания. Перевод подготовлен специально для Хронофаг.ру. В этом уроке мы создадим текстурную бирку, которую можно использовать для веб сайта. Добавление текстурных элементов в вебдизайн современный тренд. Поэтому в этом уроке мы научимся создавать текстуру и применять её к различным элементам графики.

Создаем новый документ

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

Открываем Иллюстратор

Откройте Иллюстратор. Создайте документ. Нарисуйте прямоугольник, который по ширине 240 пикселей, а по высоте 100. Инструментом Перо Pen Tool добавьте дополнительные якоря на фигуру. Затем захватитесь за уголки и потяните их вбок. Чтобы все было ровно используйте направляющие. После этого нарисуйте окружность, которую мы в дальнейшем вырежем из бирки.

Вычетание Pathfinder-oм

Воспользуйтесь командой Divide на панели Pathfinder чтобы вырезать окружность из бирки.

Поворачиваем Rotate Tool

После чего выберите инструмент Rotate Tool (R) чтобы прокрутить бьрку на -30 градусов. Сделать это можно нажав ALT и кликнув по тому месту, которое будет осью, вокруг которой будет прокручиваться фигура.

Копируем в Фотошоп

Скопируйте бирку и продублируйте её в Фотошоп CTRL+V. В появившемся окне выберите Paste as Path

Рисуем градиент

Создайте новый документ в Фотошопе, который повторяет размеры нашей бирки 580 на 200 пикселей. В этом документе мы нарисуем градиент. Создайте линейный градиент от бежевого до темно-бежевого.

Текстура фильтром Texturizer

Градиент превратите в текстуру, применив следующие настройки из галлереи фильтров.

Скопируйте текстуру на основной документ и повертите её так, чтобы она совпадала с биркой.

Применяем стили слоя

Затем переключитесь на панель контуров Path и сделайте выделение из кривой. Скопируйте это выделение. Удалите слой. Затем сделайте пэист бирки в то же самое место. Примените к бирке стили слоя, которые отображены на картинках ниже.

Текст в Иллюстраторе

Вернемся в Иллюстратор и нарисуем там крас красный прямоугольник 170 на 70 пикселей. Напишите поверх PSDTUTS+. После чего переведите текст в кривые Type > Create Outlines. Поверните элементы на -30 градусов инструментом Rotate Tool и вырежте текст из прямоугольника на панели Pathfinder — команда Devide. После скопируйте фигуру в Фотошоп, так же как мы уже делали это ранее.

Сделайте Пэист и поставьте режим наложения Multiply.

Step 12

Выберите резинку Eraser Tool и добавьте фигуре немного потерности.

Трансформируем и размываем фигуру

Если получившийся результат вас устраивает, можно остановится. Я продолжу дальше, трансформировав фигуру Edit > Transform > Perspective

Трансформация немного смазала бирку, но это можно исправить фильтром резкости Filter > Sharpen > Smart

Чтобы углы совпадали с фокусом и перспективой трансформации, я добавлю немного глубины, размыв задний уголок бирки инструментом Blur Tool.

Завершающие штрихи

Выберите инструмент Pen Tool и нарисуйте нитку бирки.

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

Сейчас задний фон позади бирки достаточно темный. Давайте добавим немного света. Скопируйте среднюю часть заднего фона и включите фильтр Filter > Render > Lighting Effects

Я изменил режим наложения этого куска графики на Lighten и поместил его по центру документа, позади бирки. Наша окончательная работа закончена.

Заключение

Создавать текстуру весьма увлекательно. Делая это, вы создаете уникальные элементы дизайна. Надеюсь этот урок был вам полезен.

Постовой: Вы занимаетесь спортом и ищете для себя удобную одежду? В магазине Елена, можно купить качественные трикотажные костюмы? По адресу td-elena.ru вы подберете себе одежду на любой вкус и цвет.