Все для Веб мастера и создания сайта

В этом уроке мы будем делать красивое навигационное меню для сайта. Примерное время выполнения урока: 10минут.
ШАГ 1

Создайте новый документ(File > New) и поставьте размеры 540px на 440px. Залейти фон градиентной заливкой светловато серым в левом верхнем углу(# 343435) и более темно серы(# 222222) в правом нижнем углу. У вас должно получиться похожее на это изображение

ШАГ 2

Создайте новый слой(CTRL+SHIFT+N). Выберите инструмент rounded rectangle tool и поставьте размер 300 на 300 пикселей с радиусом 10 пикселей

ШАГ 3

Заполните получившееся выделение радиальным градиент с # 007ccb вверху слева на # 004877 внизу право выбора. Затем жмем (Ctrl + D). У вас должно получиться вроде этого

ШАГ 4

Теперь добавим к нашей навигации тень, для этого нажмите два раза на слое и вы перейдите на страницу Layer Style. Выберете Drop Shadow со следующими настройками

Ваша навигация теперь должна выглядеть примерно так

ШАГ 5

Теперь мы будем применять к нашему слою стиль градиента, для этого нажмите два раза на слое или Layer>Layer Style>Gradient Overlay
и примените все настройки, которые показаны

Теперь ваше меню должно выглядить так

ШАГ 6

Добавьте любой текст к своему меню

Шрифт я использовал этот

ШАГ 7

Сейчас мы будем добавлять некоторые делители и т.д. которые пойдут между текстовыми ссылками, что мы добавим. Для создания мы будем испольщовать: rectangular marquee tool, поставьте размер 260px к 1px. Заполните его белым цветом(#ffffff). У вас должно получиться нечто вроде этого

ШАГ 8

Установите blend mode до Overlay. Потом уменьшите прозрачность(opacity) слоя с полоской до 20%

ШАГ 9

Скопируйте полоску, а потом перенесите его на 30пикселей вниз (Ctrl + Shift + Стрелка вниз три раза). Затем повторяйте это столько раз сколько вам нужно полосок

ШАГ 10

Сейчас мы будем добавлять текст ссылки.

Я использовал такие настройки шрифта, что и вам советую

ШАГ 11

Теперь давайте наложим эффект, будет красиво когда при наведение будет подсвечиваться выделенный пункт меню. Создайте новый слой и выделите прямоугольник размером 260 на 30 пикселей

Затем закрасьте получившийся прямоугольник белым цветом(# ffffff)

Задайте в настройках слоя(Soft Light) и поставьте прозрачность слоя до 20%. Вообщем сами можете поиграть с настройками, чтобы получить лучший эффект.

Вот и меню готово, осталось теперь его сверстать !!!
Автор: psFreak
Автор перевода: FlashRipper
p.s урок перевожу впервые