Создаем панель навигации в стиле WEB 2.0 в программе Photoshop

Создаем красивую панель навигации для сайта, в стиле WEB 2.0, при помощи программы Photoshop.

#1. Создайте новый документ размером 600 × 140 пикселей.

Затем выберите инструмент «Прямоугольник со скругленными углами» (Rounded Rectangle Tool) и сделайте прямоугольник как на картинке ниже. Радиус скругления установите 5 px, цвет пока значения не имеет.

#2. Примените следующие стили слоя.

Внутреннее свечение (Inner Glow).

#3. Наложение градиента (Gradient Overlay). Для градиента используйте цвета #5e80a3, #839db8 и #b8c7d6.

#4. Обводка (Stroke) - цвет обводки: #5e80a3.

#5. Объедините слои (Shift+Ctrl+E), в результате у вас должно получиться следующее:

#6. Теперь добавьте пункты вашей навигации. В данном случае использовался шрифт Segoe, размером 14 пт и цветом #FFFFFF.

#7. Добавьте этот стиль слоя к вашим надписям.

Обводка (Stroke) - цвет #53769a.

#8. Создайте новый слой (Shift+Ctrl+N), выберите инструмент «Прямоугольная область» (Rectangle Marquee), сделайте выделение шириной 1px и залейте его цветом #ffffffs.

#9. Дублируйте этот слой, столько раз сколько это будет необходимо и поместите линию перед каждым пунктом навигации. Теперь выберите инструмент «Прямоугольная область» (Rectangle Marquee), сделайте прямоугольное выделений в нижней части, чтобы оно выделяло все линии и перейдите в пункт «Выделение» >> «Модификация» >> «Растушевка...» (Select -> Modify -> Feather), установите радиус 5 пикселей и нажмите клавишу «Del».

Для того, чтобы применить этот эффект ко всем линиям, выбирайте каждый слой линии и нажимайте клавишу «Del». Тоже самое проделайте с верхней частью линий.

#10. Затем пройдите в пункт меню «Слой» >> «Стиль Слоя» >> (Layer >> Layer Style >> Blending Options) «Параметры наложения» и в выпадающем списке «Режим» выберите «Мягкий свет» (Soft Light).

В результате получится следующее:

#11. Создайте новый слой (Shift+Ctrl+N), в списке все слоев разместите его ниже слоя с текстом.

С помощью инструмента «Прямоугольная область» (Rectangular Marquee Tool), выберите внутреннюю часть вашего пункта меню (между линиями) и залейте его любым цветом.

#12. Теперь примените следующие стили слоя:

Наложение градиента (Gradient Overlay), для градиента используйте цвета: #567595, #728fae и #b3c3d3.

#13. В результате должно получиться следующее, т. е. мы создали вариант пункта меню, который будет показываться при наведении курсора мыши.

#14. Создайте новый слой и сделайте небольшой прямоугольник, при помощи инструмента «Прямоугольник со скругленными углами» (Rounded Rectangle Tool) с радиусом 2px и цветом  #FFFFFF.

#15. Примените следующие стили слоя:

Внутренняя тень (Inner Shadow).

#16. Наложение градиента (Gradient Overlay), для градиента используйте цвет от #e6e6e6 к #FFFFFF.

#17. Обводка (Stroke), цвет обводки #5e80a3.

#18. В результате ваша навигационная панель должна выглядеть так:

#19. Напишите слово «Search» или «Поиск» используя шрифт Segoe, размером 12 pt и цвет #7b7b7b.

#20. Добавьте в поисковую форму иконку лупы и ваша навигационная панель будет закончена. Ниже вы можете видеть две версии панели, нормальную и вид панели когда на один из пунктов меню будет наведен курсор мыши.

Материал переведен сайтом: WebMasterMix.ru
Источник

• Красивое вертикальное меню
• Горизонтальное выпадающее меню на CSS 3
• Создаем глянцевое CSS меню
• 30 горизонтальных меню для сайта