Оригинал сообщения

Комментарии:



В этом уроке мы будем делать красивое навигационное меню для сайта. Примерное время выполнения урока: 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 урок перевожу впервые

Я сейчас нахожусь В городе
Мой настрой Хороший
Я слушаю LastFm.Ru
LIci WP - WordPress crossposting plugin