Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Как сделать "Красивая иконка папки в фотошопе" Анимированная грозовая молния Делаем Гламурное фото в фотошопе Отличный шаблон для КС сайта Скачать Шаблон JumpStyle для ucoz Набор иконок для сайтов на UCoZ Cs portal by -=Wolf=- Анимация в PhotoShop, создание аватара в Photoshop Шаблон для Музыкального портала Иконки с анимацией для форума UCOZ ОТЛИЧНЫЙ ШАБЛОН ДЛЯ UCOZ Скачать бесплатно шаблон для ucoz Скачать VipDomen шаблон Скачать набор кистей для фотошопа в стиле техно. Скачать шаблон Counter sTrike Скачать шаблон на темуWarcraft 3 Portal by -=Wolf=- Скачать шаблон для uCoz тема КС Фото в готическом стиле Скачать иконки групп на тему КС Film-Online Скачать шаблон для uCoz Вот новое и совершенно дороботаный Шаблон ВКОНТАКТЕ.РУ Иконки для форумов в системе UcoZ Рисуем дизайн сайта в Photoshop Простое отражение
Главная » Статьи » Уроки Adobe Photoshop » Для сайта

Глянцевая навигационная панель для сайта

Глянцевая навигационная панель



В этом уроке вы научитесь создавать прелестную глянцевую навигационную панель



Шаг 1

Сначала откройте новый документ любого размера, которого захотите (зависит от того, насколько большим будет ваш сайт и залейте его цветом #1A1A1A.

Затем выделите область, в которой будет находиться ваша панель.

glossy_navigation_bar1.gif

Шаг 2

Теперь залейте её любым цветом и затем зайдите в Blending Options и поставьте следующие настройки:

glossy_navigation_bar2_1.gif

У вас должно выйти что-то подобное:

glossy_navigation_bar2_2.gif

Шаг 3

Но мне всё ещё не нравится, как оно выглядит, так что следующим нашим шагом будет добавление
Inner Glow:

glossy_navigation_bar3.gif

Шаг 4

Уже получше. Теперь выделите область немного меньше половины вашей навигационной панели и залейте её #FFFFFF. Поставьте Opacity на 40% и blending status слоя на Overlay.

glossy_navigation_bar4.gif

Шаг 5

Теперь мы создадим кнопку. Выделите небольшую область и залейте её любым цветом, каким захотите. Расположите этот слой под белым слоем. Примените следующие настройки к слою вашей кнопки:

glossy_navigation_bar5_1.gif

glossy_navigation_bar5_2.gif

glossy_navigation_bar5_3.gif

У вас должно получиться что-то подобное этому:

glossy_navigation_bar5_4.gif

Шаг 6

Теперь давайте добавим текст. Наберите что-нибудь на черной стороне вашей панели шрифтом Arial-Regular-15 pt-Strong и поставьте следующие настройки:

glossy_navigation_bar6_1.gif

Ваш текст должен выглядеть так:

glossy_navigation_bar6_2.gif

Вы можете добавить ещё кнопки:

glossy_navigation_bar6_3.gifglossy_navigation_bar6_3.gif

Шаг 7

Теперь давайте добавим текст зеленой кнопке. Используйте тот же шрифт и стиль шрифта, измените лишь опции. Поставьте такие:

glossy_navigation_bar7.gif

Если вы делали то же, что и я, вот что у вас должно было получиться:

Глянцевая навигационная панель



Категория: Для сайта | Добавил: cinemania (28.12.2008)
Просмотров: 1495 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Форма Входа
Среда, 02.07.2025, 17:39
-й день

Гость, мы рады вас видеть. Пожалуйста зарегистрируйтесь или авторизуйтесь!
 
Друзья сайта
Статистика
Рейтинг сайтов
Онлайн всего: 1
Гостей: 1
Пользователей: 0

Лучшие фильмы | Уроки Adobe Photoshop | Шаблоны для uCoz | Онлайн-TV | Кнопки для сайта UCOZ | Иконки для сайтов UCOZ | Скрипты для uCoz