Современный дизайн навигации в стиле грандж в Photoshop

Навигация в веб-дизайне является одной из наиболее важных частей в юзабилити сайта. Сегодня я покажу вам, как создать современный дизайн навигации в стиле грандж в Photoshop.

В этом уроке вы узнаете, как использовать градиенты, текстуры и стили слоя. Результат выглядит современным и может быть использован в качестве элемента современного веб-дизайна. Надеемся, что вы узнаете что-то новое.

Шаг 1: Создаем новый документ

Для начала создайте новый документ. Выберите Файл-> Новый.. (File -> New.. ) и установите ширину 920 пикселей, высоту 170 пикселей.

Шаг 2: Навигация по сайту

Создайте новый слой Слой->Новый->Слой (Layer -> New -> Layer..) и назовите его «Навигация по сайту». Установить основной цвет #1e1e1e и выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), затем установите радиус до 6 пикселей и выделите прямоугольную область, как показано на рисунке ниже.

Шаг 3: Навигация по сайту стиля слоя

Чтобы настроить слой «Навигация по сайту» нажмите Слой->Стиль слоя->Параметры наложения (Layer -> Layer Style -> Blending Options) и выберите вкладку Внешнее свечение (Outer Glow). Вы должны применить следующие настройки.

Далее выберите вкладку Наложение градиента (Gradient Overlay) и настройте как показано на рисунке. Режим для градиента Мягкий свет (Blend Mode is Soft Light)

Шаг 4: Текст навигации

Для создании навигации ссылок установите основной цвет #ffffff (белый). После этого выберите инструмент Горизонтальный текст (Horizontal Type Tool). Используйте шрифт Myriad Pro Regular (или Arial) размером 14 пт. Напишите несколько слов, таких как «Главная, Обо мне, Блог, Контакт». Затем зайдите в Слой->Стиль слоя->Параметры наложения (Layer->Layer Style->Blending Options) и примените следующие настройки.

После проведенных действий у вас должен был получится результат, как на картинке ниже.

Шаг 5: Добавляем текстуры

Приступаем к приданию вида гранджевости нашему меню. Для этого нам нужны текстуры. Для примера воспользуемся этими. Скачайте их.
Выберите текстуру Media_Militia_BTOB_005, измените её размер — 25% по высоте и ширине (клавиши CTRL+T). После удерживая кнопку CTRL, кликните по слою “Navigation bar”.
Когда вы выделили слой “Navigation bar”, кликните по слою текстур и скопируйте выделенное (CTRL+C), затем скройте слой с текстурой и вставьте выделенное (CTRL+V).

После этого выберите Слой->Стиль слоя->Параметры наложения (Layer -> Layer Styles -> Blending Options) и применять настройки, показанные на рисунке ниже.

Шаг 6: Активные кнопки
Создайте новый слой Слой->Новый->Слой (Layer -> New -> Layer..) и назовите его «Button». Установить основной цвет #95009E удерживайте кнопку CTRL и нажмите на слой “Navigation bar”, выделив его. После этого выбрать инструмент прямоугольник (Rectangle Tool), выберите слой «Button» и нарисуйте кнопку. Примечание: Слой «Button» должен быть ниже слоя с текстом и текстуры.

Затем зайдите в Слой->Стиль слоя->Параметры наложения (Layer -> Layer Styles -> Blending Options) и примените следующие настройки.

Добавьте текстуру фона и вы закончили!

Результат

Руководство является переводом англоязычной статьи Create Modern Grunge Navigation Design in Photoshop.