Модернистский навигационный блок

С помощью фотошоп можно создавать и вот такие классные навигационные меню для сайтов. Об этом рассказывается в сегодняшнем уроке. Здесь я покажу, как с помощью использования простых градиентов создаются весьма элегантные элементы веб дизайна.

1 Шаг

Сначала создайте новый документ (File > New) размерами 540×440px. Залейте фон цветом #1b1b1b (Edit > Fill).

2 Шаг

Далее нам нужно создать фон для навигационного блока. Создайте новый слой (Layer > New > Layer). Выберите инструмент Rounded Rectangle Tool и задайте радиус закругления углов равным 5px. Создайте выделение размерами 250×300px.

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

3 Шаг

Теперь нам нужно добавить к получившемуся фону стиль, открыв Layer > Layer Styles > Outer Glow и задав приведенные ниже параметры.

Вот что должно в итоге получиться.

4 Шаг

Возьмите Text Tool (T) и добавьте какой-нибудь текст в шапку навигационного меню. Я использовал шрифт Verdana, Regular, 22pt, Strong, #ffffff.

5 Шаг

Создайте новый слой и при помощи Rounded Rectangle Tool снова создайте выделение размерами 230 на 250 пикселей в нижней части фон меню (с отступами в 10px с каждой стороны и снизу).

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

6 Шаг

Сейчас добавим эффект свечения к нашему слою. И так, на новом слое (с сохранением выделенной области, оставшейся после предыдущего шага) откройте Select > Modify > Contract и выставьте значение 10px.

Залейте выделение радиальным градиентом, идущим из левого верхнего угла в правый нижний, цветом от белого (#ffffff) к прозрачному.

Понизьте Opacity слоя до 5%.

7 Шаг

Теперь перейдем к текстовым ссылкам. С помощью Text Tool добавьте в меню текст, чтобы обозначить гиперссылки. Я использовал шрифт Verdana, Regular, 12pt, цветом #5a5a5a. Установите величину интерлиньяжа на уровне 30pt.

8 Шаг

После этого в наш навигационный блок нужно добавить разделители между ссылками. Сделайте выделение размером 210×1px при помощи Rectangular Marquee Tool и залейте его цветом #1e1e1e. Размножьте этот разделитель и поместите копии между ссылками.

9 Шаг

Последним шагом будет добавление собственного фона для активной ссылки (в моем случае — это ссылка Photoshop Tutorials), поэтому создайте новый слой под слоем с текстов и создайте выделение размерами 210×30 пикселей и залейте его цветом #171717.

Поделитесь уроком

Чириканье Мыло Вконтактик Рожи ЖэЖэ Яша

Правовая информация

В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».

Переведено с сайта photoshoptutorials.ws, автор перевода указан в начале урока.