Стильное навигационное меню для вашего веб сайта

В этом уроке я покажу, как легко и быстро создать профессиональное навигационное меню для каких-нибудь геймерских шаблонов веб сайтов. Урок несложный, эффективный и займет совсем немного времени.

1 Шаг

Создайте документ размером 1024×140 пикселей.

2 Шаг

Теперь залейте фон черным цветом (#000000).

3 Шаг

Далее нам нужно создать прямоугольное выделение с помощью инструмента Rectangle Marquee Tool и на новом слое залить его белым цветом #FFFFFF.

4 Шаг

Теперь выполните клик правой клавишей мыши по этому слою и выберите Blending Options из выпадающего меню. В выпавшем окне стилей задайте следующие:

5 Шаг

Вот что у вас должно получиться:

6 Шаг

Теперь с помощью Rectangle Marquee Tool создайте выделение, подобное моему и залейте его на новом слое черным цветом #000000.

7 Шаг

Снизьте Opacity этого слоя до 26% и посмотрите, что должно получиться:

8 Шаг

Далее нам нужно создать разделители для ссылок меню. Для этого создайте выделение шириной в 2px, как показано ниже и залейте его на новом слое белым цветом #FFFFFF.

9 Шаг

Теперь задайте следующие стили этому слою:

10 Шаг

Понизьте Opacity разделителя до 56%, у вас должно получиться нечто такое:

11 Шаг

Этот шаг является опциональным. Выберите инструмент Rectangle Marquee Tool с параметром Feather 10px и создайте выделение, как показано:

12 Шаг

Теперь нажмите Edit > Clear и повторите эту процедуру столько раз, сколько посчитаете нужным. Таким образом у вас получится следующее:

13 Шаг

Теперь дублируйте разделители по числу ваших ссылок и вставьте надписи. Для неактивных ссылок я использовал цвет #828282, для активной — #0987b7. В результате должно получиться следующее:

14 Шаг

Теперь добавим света на нашу панель. Создайте выделение, как показано на иллюстрации и залейте его на новом слое белым цветом (#FFFFFF).

15 Шаг

Теперь понизьте непрозрачность (Opacity) слоя до 56% и смените режим наложения (Blending Mode) на Overlay.

16 Шаг

Последнее, что нам осталось сделать — выделить активную ссылку. Создайте выделение, как показано ниже. Залейте соответствующим цветом на новом слое, понизьте его Opacity до 84%.

17 Шаг

Смените режим наложения слоя на Overlay и посмотрите, что должно получиться.

18 Шаг

После этого добавьте слою стили в соответствии с иллюстрацией:

18 Шаг

Должно получиться вот что:

19 Шаг

Последний шаг — создание свечения нижней части кнопки. Возьмите Elliptical Marquee Tool с установленным Feather на уровне 10px, создайте небольшое выделение и залейте его белым цветом на новом слое.

20 Шаг

Смените режим наложения на Overlay и, если нужно более яркое пятно — просто еще раз продублируйте данный слой. Итог должен выглядеть как-то так:

Успехов!

Импортные недорогие офисные перегородки из стекла с рисунком.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта psdvibe.com, автор перевода указан в начале урока.