Создание текстурированных тегов для веб-сайта - Веб дизайн - Уроки фотошоп/ Photoshop lessons - ..:: Музыка Фильмы Игры Дизайн ::.. - ..::Скачать бесплатно фильмы, игры, софт, скрипты::..
Понедельник, 24.05.2010, 11:46
Приветствую Вас Блудный
Категории раздела
Смешно...))
Вышел в свет первый номер авиационно-эротического журнала "Плейбоинг".
Реклама
FRIENDS
Мини-ЧАТ



Главная
» Файлы » Уроки фотошоп/ Photoshop lessons » Веб дизайн
[ Добавить материал ]

Создание текстурированных тегов для веб-сайта
[ ] 26.04.2009, 20:16

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

Шаг 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 и поместил его в центр нашего документа. Результат проделанной рабты выглядит таким образом:

Категория: Веб дизайн | Добавил: dakota
Просмотров: 97 | Загрузок: 0 | Рейтинг: 0.0/0 |
Всего комментариев: 0
Имя *:
Email:
Код *:

Admin Меню
  • Нам нужны люди,присоеденяйтесь
    Подробности тут

  • Самому активному пользователю сайта в конце месяца будет выдаваться 7-ми значный ICQ номер
    Подробности тут

  • Наш тулбар

  • Обмен баннерами

  • Как качать с файлообменников?
  • Профиль
    Привет: Блудный

    Сообщения:

    Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
    Логин:
    Пароль:
    Поговорим?
    Опросник
    Сколько вам лет?
    Всего ответов: 27
    Помощь сайту
    Кошельки:
    R 270966599442
    Z 416518274191

    Статистика


    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0


    Сегодня нас посетили:
    Наша кнопка
    Если вам понравился наш сайт, поставьте в благодарность себе нашу кнопку



    код кнопки:


    Для красивого отображения этого блока требуется Flash Player 9 или выше.