В этом уроке вы научитесь создавать прелестную глянцевую навигационную панель
![Глянцевая навигационная панель](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar8.gif)
Приблизительное время выполнения: 10 минут
Шаг 1
Сначала откройте новый документ любого размера, которого захотите
(зависит от того, насколько большим будет ваш сайт и залейте его цветом
#1A1A1A.
Затем выделите область, в которой будет находиться ваша панель.
![glossy_navigation_bar1.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar1.gif)
Шаг 2
Теперь залейте её любым цветом и затем зайдите в Blending Options и поставьте следующие настройки:
![glossy_navigation_bar2_1.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar2_1.gif)
У вас должно выйти что-то подобное:
![glossy_navigation_bar2_2.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar2_2.gif)
Шаг 3
Но мне всё ещё не нравится, как оно выглядит, так что следующим нашим шагом будет добавление
Inner Glow:
![glossy_navigation_bar3.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar3.gif)
Шаг 4
Уже получше. Теперь выделите область немного меньше половины вашей навигационной панели и залейте её #FFFFFF. Поставьте Opacity на 40% и blending status слоя на Overlay.
![glossy_navigation_bar4.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar4.gif)
Шаг 5
Теперь мы создадим кнопку. Выделите небольшую область и залейте её
любым цветом, каким захотите. Расположите этот слой под белым слоем.
Примените следующие настройки к слою вашей кнопки:
![glossy_navigation_bar5_1.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar5_1.gif)
![glossy_navigation_bar5_2.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar5_2.gif)
![glossy_navigation_bar5_3.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar5_3.gif)
У вас должно получиться что-то подобное этому:
![glossy_navigation_bar5_4.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar5_4.gif)
Шаг 6
Теперь давайте добавим текст. Наберите что-нибудь на черной стороне вашей панели шрифтом Arial-Regular-15 pt-Strong и поставьте следующие настройки:
![glossy_navigation_bar6_1.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar6_1.gif)
Ваш текст должен выглядеть так:
![glossy_navigation_bar6_2.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar6_2.gif)
Вы можете добавить ещё кнопки:
![glossy_navigation_bar6_3.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar6_3.gif) ![glossy_navigation_bar6_3.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar6_3.gif)
Шаг 7
Теперь давайте добавим текст зеленой кнопке. Используйте тот же шрифт и стиль шрифта, измените лишь опции. Поставьте такие:
![glossy_navigation_bar7.gif](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar7.gif)
Если вы делали то же, что и я, вот что у вас должно было получиться:
![Глянцевая навигационная панель](http://tutorials.psdschool.ru/wp-content/uploads/2008/07/glossy_navigation_bar8.gif)
|