Для сайта - Уроки Adobe Photoshop - Каталог статей - Все для Вебмастера.Шаблоны,скрипты для ucoz.
Меню сайта
Категории каталога
Материалы сайта
Облако тегов
Смотреть сериал Клиника / SCRUBS (Сезон 3) онлайн Иконки для форума UCOZ - Круглые зелёные иконки. Зелёные иконки , для тёмного форума UCOZ Набор иконок для форумов в системе UcoZ - Круглые синие иконки Скачать шаблон для онлайн фильмов Иконки для ФОРУМА ucoz Смотреть онлайн Прожектор Пэрис Хилтон (выпуск 15) Отличный шаблон для ucoz на тему кино Интерны - 3 серия Человек-паук 3: враг в отражении / Spider-Man 3 (2007) Шаблон для клана КС Серый шаблон для Портала ИГР Преступник / Felon (2008) Кнопки для светлого оранжевого шаблона STALKER-ZONA (шаблон для uCoz) Скачать фильм Третье измерение ада / The Devil's Chair (2008) DVDRip Смотреть онлайн Прожектор Пэрис Хилтон (выпуск 3) Фильм Беги, Лола, беги Скачать фильм Свидание с убийцей / Murder.com (2008) DVDRip Шаблон для онлайн кинотеатра скачать СКАЧАТЬ кнопки для форума UCOZ Шаблон беспалатный ДЛЯ ucoz Взрослая неожиданность / Role Models (2008) Шаблон адаптация из DLE для ucoz Создаём в фотошопе (PhotoShop) дизайн интерфейса в стиле Windows Vista
Главная » Статьи » Уроки 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)
Просмотров: 321 | Рейтинг: 0.0/0 | |Теги:


Чтобы скачать "Глянцевая навигационная панель для сайта" нужно кликнуть по рекламке ниже!

Пожалуйста! Если вам понравился этот материал нажмите кнопку "СПАСИБО" или напишите свой отзыв. Посетите наш ФОРУМ


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

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

Dutch design: webdesigner; Eindhoven
Материалы сайта
Статистика
Internet Map Рейтинг сайтов Поддержите наш сайт в каталоге Infan.ru Рейтинг Сайтов YandeG
Онлайн всего: 3
Гостей: 2
Пользователей: 1
cinemania

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