Главная » Файлы » Все для photoshop » Скачать Уроки Photoshop » Скачать Рисуем супер-стильную навигационную панель vista-стайл
Еще одно vista-чудо =)
![Рисуем супер-стильную навигационную панель vista-стайл](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_25.jpg)
Приблизительное время выполнения: 12 минут
Создайте новый документ 500х50 пикселей. Выделите прямоугольную область 480х30 пикселей
![vista-style-nav-bar_1.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_1.jpg)
Теперь Select > Modify > Smooth 2px
![vista-style-nav-bar_2.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_2.jpg)
Создайте новый слой и залейте выделение любым цветом. После этого примените стили:
- Gradient: #313332 > #46474a
![vista-style-nav-bar_3.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_3.jpg)
- Stroke: #676767
![vista-style-nav-bar_4.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_4.jpg)
Выделите верхнюю часть панели (выделите всю, а потом, зажав ALT, выделите НИЖНЮЮ часть)
![vista-style-nav-bar_5.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_5.jpg)
Создайте новый слой и залейте его градиентом от белого к прозрачному
![vista-style-nav-bar_6.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_6.jpg)
Установите режим смешивания для этого слоя на Linear Dodge и непрозрачность на 35%
![vista-style-nav-bar_7.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_7.jpg)
![vista-style-nav-bar_8.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_8.jpg)
Создайте новый слой и выделите область 1px в высоту под верхней границей панели, используя инструмент Single Row Marquee
![vista-style-nav-bar_9.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_9.jpg)
Залейте выделение белым
![vista-style-nav-bar_10.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_10.jpg)
Теперь CTRL-клик на иконке первого слоя, чтобы выделить его содержимое
![vista-style-nav-bar_11.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_11.jpg)
Select > Inverse, выделяем в панели слоев слой с однопиксельной белой полоской и нажимаем DELETE.
![vista-style-nav-bar_12.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_12.jpg)
![vista-style-nav-bar_13.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_13.jpg)
Меняем режим смешивания для этого слоя с полоской на Soft Light и непрозрачность устанавливаем на 60%
![vista-style-nav-bar_14.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_14.jpg)
Выделите прямоугольную область 130х24 пикселя и смягчите ее Select > Modify > Smooth 2px
![vista-style-nav-bar_15.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_15.jpg)
Создайте новый слой и залейте любым цветом. Примените стили:
- Gradient: #000000 to #2f3233
![vista-style-nav-bar_16.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_16.jpg)
- Stroke: #0f1011 to #575858
![vista-style-nav-bar_17.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_17.jpg)
Создайте новый слой и CTRL+клик по слою с только что сделанным прямоугольником. Далее Edit > Stroke 1px белого цвета
![vista-style-nav-bar_18.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_18.jpg)
Понизьте непрозрачность слоя на 15%
![vista-style-nav-bar_19.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_19.jpg)
Выберите верхнюю часть кнопки и на новом слое залейте ее градиентом от белого к прозрачному
![vista-style-nav-bar_20.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_20.jpg)
Понизьте непрозрачность слоя до 80%
![vista-style-nav-bar_21.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_21.jpg)
Добавьте текст на кнопки
![vista-style-nav-bar_22.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_22.jpg)
Теперь нужно добавить разделители между кнопками. Создайте новый слой, выделите область инструментом Single Column Marquee и залейте ее #1a1b1c. Передвиньте выделение на 1px вправо (одно нажатие на стрелку вправо на клавиатуре) и залейте его теперь уже #5d5f60. Еще раз двигаем на 1px вправо и заливаем уже #232526
![vista-style-nav-bar_23.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_23.jpg)
Сотрите верхнюю и нижнюю части разделителя при помощи ластика размером 20px мягкой кисти и понизьте непрозрачность слоя до 50%
![vista-style-nav-bar_24.jpg](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_24.jpg)
Скопируйте слой два раза и поместите копии между другими кнопками
![Рисуем супер-стильную навигационную панель vista-стайл](http://tutorials.psdschool.ru/wp-content/uploads/2008/03/vista-style-nav-bar_25.jpg)
Готово!
Похожие материалы:
|