IpRoom.ru Искусство дизайнера

Поиск по сайту
Навигация
Наш опрос
Нужен ли нам форум?
Да, конечно!
Нет. не надо.
Без понятия.
Хм... А что это?

Немного юмора
По-видимому, бог создал женщину позднее потому, что не захотел слушать советов пpи создании мужчины.

Самое читаемое
Календарь - Времена года 2010
Календарь - Времена года 2010

Очень красивый календарь 2010г, будет ра ...
Еда и напитки HQ
Еда и напитки HQ

Клипарт высокого качества, размеры разны ...
HQ Images - Euro & dollars
HQ Images - Euro & dollars

HQ Images - Euro & dollarsДеньги, евро и ...
Фотоклипарт - Безопасность
Фотоклипарт - Безопасность

BrandX Pictures - X348 Security AlertФот ...
Женские элегантные платья в PSD
Женские элегантные платья в PSD

Шаблоны женских элегантных платьев высок ...
Best wallpapers part 1
Best wallpapers part 1

Сборник шикарных обоев для рабочего стол ...
HQ Images - Message "MAN"
HQ Images - Message \

HQ Images - Message "MAN"Мужчи ...
Sakura Icons
Sakura Icons

Sakura Icons28 ICO | 28 PNG | 256х256 | ...
Amazing background
Amazing background

5 JPG | 3000X2000 | 300dpi | 16MB
Красивая природа от Nationalgeo Graphic
Красивая природа от Nationalgeo Graphic

Графика и дизайнСоздание текстурированных тегов для веб-сайта

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

Шаг 1

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

 

Шаг 2

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

Шаг 3

Используйте инструмент Divide tool на палитре Pathfinder, чтобы вырезать круг из тега.

 

Шаг 4

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

Шаг 5

Скопируйте тег и вставьте его в фотошоп, используя Past as: Path.

 

Шаг 6

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

 

Шаг 7

Теперь идем в Filter > Texture > Texturizer и выставляем настройки как на скриншоте:

Шаг 8

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

Шаг 9

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

Шаг 10

Вернитесь в Adobe Illustrator и, как показано на скриншоте 10a создайте красный прямоугольник 170х70px. Вставьте текст, например, PSDTUTS. Далее с выделенным текстом зайдите в Type>Crate Outlines. Поверните красный прямоугольник с выделенным текстом на 30 градусов, как показано на скриншоте 10b. Теперь выделите текст и красный прямоугольник, на палитре Pathfinder выберите Divide. Затем выделите буквы и удалите их. Так мы получим красных прямоугольник с вырезанными буквами, смотрите скриншот 10c. Скоприуйте прямоугольник и вставьте его в документ Photoshop.

 

Шаг 11

Расположите прямоугольник поверх сделанного ранее тэга и установите режим наложения слоя в Multiply.

Шаг 12

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

Шаг 13

Возможно, Вы уже довольны резаультатом и можетеостановится на этом этапе, но я пойду дальше и добавлю эффект глубинына наш ярлычок. Слейте все слои, который относятся к нашему тэгу (фон икрасный прямоугольник) в один. Далее идем в Edit > Transform > Perspective и потянем за нижний левый "узелок".

Шаг 14

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

Шаг 15

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

Шаг 16

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

Шаг 17

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

Шаг 18

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

Шаг 19

Я выствил режим наложения для копии фона в Lighten и поместил его в центр нашего документа. Результат проделанной рабты выглядит таким образом:

 
Внимание! У вас нет прав для просмотра скрытого текста.



-Можно отказаться от первой рюмки, но не от второй. (Людвиг Берне)

Опубликовал kotel, 15 января 2010 | Комментировать (0) | Печать
 (голосов: 0)

Информация

Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.