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

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

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

Самое читаемое
Ornaments and patterns 14 \ Орнаменты ...
Ornaments and patterns 14 \\  Орнаменты и узоры 14

34 file| jpg | min 1949 x 1288 | rar 99. ...
Abstract Wallpapers Pack #1
Abstract Wallpapers Pack #1

Abstract Wallpapers Pack #125 JPG | 2560 ...
Burn it all!
Burn it all!

Burn it all!Весь латинский алфавит. В бу ...
Подборка нужных фотообоев
Подборка нужных фотообоев

Количество: 70 | Качество: HQ | Размер: ...
Рисунки карандашом.
Рисунки карандашом.

Красивая сборка работ карандашом, иногда ...
Необычные люди.
Необычные люди.

Кто как извращается над своей внешностью ...
Кисти-Лотос - для Photoshop
Кисти-Лотос - для Photoshop

Кисти-Лотос - для Photoshop
Фотоклипарт - Sky Package (v.5)
Фотоклипарт - Sky Package (v.5)

Небо, облока15 JPG | ~1984x1688 | 10 Mb
HQ Images - BillBoards 12
HQ Images - BillBoards 12

HQ Images - BillBoards 12JPG | 3000X2000 ...
Old papers texture 4
Old papers texture 4

27 JPG | 3000X2000~1500X1200 | 300~72 dp ...

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

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

Шаг 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)

Информация

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