Меню
Учебник
Партнёры

Вход
Создание текстурированной бирки для вашего веб-сайта.
Шаг 1

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


Шаг 2

Создайте бирку размером 250х120px. Главное чтобы линии были прямые а качество не столь важно потом этого не будет видно.
Создание текстурированной бирки для вашего веб-сайта.


Если вы читаете наш урок с устройства на ОС Андроид, тогда мы предлагаем вам посетить сайт нашего партнёра с огромным количеством программ для вашего устройства - андроид 4.0.4 программы скачать

Шаг 3

Теперь, используя инструмент Rotate (R) поверните бирку на 30 градусов.

Шаг 4

Создайте новый документ в 580х200px. Нам понадобится это для создания текстуры для бирки. Залейте линейным градиентом с верхнего левого в правый нижний угол документа. Используемые цвета: c6b98d и a59c73.
Создание текстурированной бирки для вашего веб-сайта.


Шаг 5

Теперь идем в Filter > Texture > Texturizer и выставляем настройки как на скриншоте:
Создание текстурированной бирки для вашего веб-сайта.


Шаг 6

Скопируйте готовую текстуру в документ с тегом и поверните его на тот же угол, что и тег (30 градусов).

Шаг 7

Перейдите на палитру Paths и создайте выделение в форме бирки, используя ранее вставленный Path. Invert выделение, удалите слой и вставьте из буфера содержимое. К тегу добавим настройки стилей слоя (Layer > Layer Style > Blending options), чтобы придать объема. Отрегулируйте настройки как на скриншотах.
Создание текстурированной бирки для вашего веб-сайта.

Создание текстурированной бирки для вашего веб-сайта.


Шаг 8

Нарисуем прямоугольник поверх сделанной ранее бирки, добавим надпись и цвет. Поверните на 30 градусов, наложите на бирку и установите режим наложения слоя в Multiply.
Создание текстурированной бирки для вашего веб-сайта.


Возьмите инструмент Ластик (Eraser Tool) и добавьте немного текстуры, удалив часть красной области.
Создание текстурированной бирки для вашего веб-сайта.


Далее идем в Edit > Transform > Perspective и потянем за нижний левый "узелок".

Шаг 9

При трансформации тэг потерял четкость, поэтому вернем ее с помощью Filter > Sharpen > Smart Sharpen. Выставьте настройки как на скриншоте ниже:

Шаг 10

Чтобы бирка была не только формой, но и глубиной соответствовал объемному объекту, необходимо размыть часть изображения, которая находится за пределами фокуса. Возьмите инструмент Blur Tool и размойте часть изображения в нижнем правом углу.
Создание текстурированной бирки для вашего веб-сайта.


Шаг 11

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


Шаг 12

Преключитесь на инструмент Brush Tool и установите размер кисти в 3px, жесткость - 100%. Цвет кисти задайте черный. Переключитесь обратно на интсрумент Pen Tool и сделайте клик правой кнопкой мыши по созданному нами Пути (Path) и выберите Stroke Path. Затем возьмите небольшой ластик и сотрите часть "шнурка", которая проходит под ярлычком. И вот вам авторское задание сделайте шнурок более реальным.

Шаг 13
Подсветите область под шнурком. Создайте новый проведите белой кистью под шнурком и примените фильтр Filtr-> Blur-> Gausian Blur настройки применяйте на свой вкус

Ну и всё вот что у меня вышло)
Создание текстурированной бирки для вашего веб-сайта.


#1 написал: Boomer (10 мая 2009 10:19)



Группа: Гости
Регистрация: --
Очень круто, я на какомно сайте в дизайне видел такой элемент, но как-то непонял как его сделать, спасибо!
ICQ: {icq}
#2 написал: Bladik (2 июня 2009 12:55)



Группа: Гости
Регистрация: --
интересный урок!
ICQ: {icq}
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.