Для начала создадим новый холст размером 540 на 440 пикселей. Заливаем задний фон цветом #1b1b1b используя Edit > Fill (Редактировать > Выполнить заливку).

Шаг 2.

Теперь сделаем задний фон меню. Создадим новый слой. Это можно сделать нажав горячие клавиши Ctrl + Shift + Alt + N. Выберите закругленный прямоугольный инструмент выделения и установим радиус 5 пикселей. Сделаем выделение размером 250 на 300 пикселей.

Заливаем это выделение красным градиентом. Выберем градиентный инструмент и установим его радиальным. Заполним это выделение градиентом с верха центра (#bc0303) до низа центра (#3f0000).

Шаг 3.

Теперь добавим внешнее свечение нашему навигационному заднему фону. Это можно сделать с помощью стилей слоя: Layer > Layer Styles > Outer Glow (Слой > Стиль слоя > Внешнее свечение) с такими настройками:

Теперь это должно выглядеть так.

Шаг 4.

Выберем текстовый инструмент и добавим текст для заголовка навигационного блока. Здесь использован шрифт Verdana, Обычный, 22pt, Strong, #ffffff.

Шаг 5.

Создадим новый слой и, используя закругленный прямоугольный инструмент выделения снова, сделаем выделение 230 на 250 пикселей под надписью (с 10-писксельным отступом от краев).

Заполним выделение темно-серым цветом (#111111).

Шаг 6.

Следующее, что нам нужно – это добавить световые эффекты на новый слой. Для этого на новом слое (имеется в виду выделение что было перед этим) используем Select > Modify > Contract (Выделение > Модификация > Сжать ) на 10 пикселей.

Заполним выделение радиальным градиентом с верхнего левого угла (#ffffff) до нижнего правого (прозрачный) используя градиентный инструмент.

Уменьшим прозрачность слоя до 5%.

Шаг 7

Теперь для текстовых ссылок, используя текстовый инструмент добавим текст, чтобы он действовал как ссылки. Я использовал шрифт Verdana, Обычный, 12pt, None, #5a5a5a (#ffffff для активной ссылки). Установим высоту линий на 30 пикселей.

Шаг 8

Теперь нужно добавить разделители между ссылками. Сделаем выделение 210 на 1 пиксель используя прямоугольный инструмент выделения между каждой линией и заполним цветом #1e1e1e.

Шаг 9

Напоследок, нужно добавить цвет заднего фона за активной ссылкой (в моем случае я сделал активным Photoshop Tutorials). Для этого нужно создать новый слой за текстовым слоем, сделать выделение 210 на 30 пикселей и залить его цветом #171717.

Источник: http://myphotoshop.ucoz.ua/