Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Красивое голубое навигационное меню для сайта


ШАГ 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

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

 

Красивое голубое навигационное меню для сайта

 

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

 

alt

ШАГ 7

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

 

Красивое голубое навигационное меню для сайта

 

ШАГ 8

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

 

Красивое голубое навигационное меню для сайта

 

ШАГ 9

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

Красивое голубое навигационное меню для сайта

ШАГ 10

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

 

Красивое голубое навигационное меню для сайта

 

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

 

alt

 

ШАГ 11

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

 

Красивое голубое навигационное меню для сайта

 

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

 

Красивое голубое навигационное меню для сайта

 

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

 

Красивое голубое навигационное меню для сайта

 

Вот и меню готово, осталось теперь его сверстать :-) !!!

 



Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.