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

Авторизация

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

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


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


Классическая навигация


Классическая навигация

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

Классическая навигация

Шаг 2. Теперь нам надо создать задний фон навигационного окна. Создадим новый слой. Это можно сделать с помощью Layer > New > Layer (Слой > Новый > Слой) или нажав горячие клавиши Ctrl + Shift + Alt + N.

Выберем инструмент Rounded Rectangle Tool alt(Прямоугольник со скругленными углами) и установим радиус 5 пикселей. Сделаем выделение 250 на 300 пикселей.

 

 

Классическая навигация

 

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

 

 

Классическая навигация

 

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

 

 

alt

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

Классическая навигация

Шаг 4. Выберем текстовый инструмент Text Toolalt (Текст) и добавим текст для заголовка навигационного блока. Я использовал шрифт Verdana, Regular (Обычный), 22pt (пт), Strong (Резкое), #ffffff.

Классическая навигация

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

Классическая навигация

Заполним выделение темно-серым цветом (#111111), используя Edit > Fill (Редактировать  > Выполнить заливку).

Классическая навигация

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

Классическая навигация

Используя инструмент Gradient Tool (Градиент), заполним выделение Радиальным градиентомalt (Radial Gradient) с верхнего левого угла (#ffffff)    до нижнего правого (прозрачный).

Классическая навигация

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

Классическая навигация

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

Классическая навигация

Шаг 8. Теперь нужно добавить разделители между ссылками. Сделаем выделение 210 на 1 пиксель, используя инструмент выделения Marquee Tool alt(Прямоугольная область) между каждой линией и заполним цветом #1e1e1e.

Классическая навигация

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

Классическая навигация

 



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

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

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

комментарии (6)

#1 написал: Stepfather | 6 мая 2009 21:18
     

Непонятн для чего еть russian_ sorry
#2 написал: naikon | 6 мая 2009 21:23
     

Stepfather,
Для сайта )
#3 написал: Stepfather | 7 мая 2009 09:37
     

biggrin ,а я думал это просто картинку делать.... biggrin
#4 написал: TakeR | 7 мая 2009 11:35
     

нарисовать в фотошопе это уж не так и сложно ..)) а вот впихнуть это в сайт... уже другое дела...
#5 написал: AXE | 14 мая 2009 16:23
     

полностью согласен
#6 написал: TaUReN | 6 июня 2009 08:18
     

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