Urban Rivals RU
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Как нарасовать UserBar в фотошопе (Photoshop) Скачать шаблон для uCoz Иконки для форумов в системе UcoZ - Темно-зеленые иконки Обработка фото Вращающийся онлайн кинотеатр (самообновляемый) V 1.0 Отличный шаблон для uCoz бесплатно Космический неон Скачать Шаблон For Counter-Strike UCOZ Шаблон для uCoz в стиле "VISTA" Иконки груп для ucoz Создание композиции в фотографиях Иконки групп для ucoz by CкРиПтЕг Классные неоновые иконки Как в PhotoShop нарисовать 3D иконку коробки (упаковки)? Как превратить современный город в руины Иконки для форумов UcoZ - Круглые красные иконки. Скачать шаблон для клана CS 1.6 Набор иконок для форумов в системе UcoZ - Жёлтые иконки. Скачать шаблон 100mbps to Ucoz Как сделать Эффект загнутой страницы Скачать Шаблон JumpStyle для 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)
Просмотров: 1123 | Рейтинг: 0.0/0 | |Теги:
Пожалуйста! Если вам понравился этот материал напишите свой отзыв. Посетите наш ФОРУМ


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

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

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