Рисуем в Photoshop навигацию в стиле Гранж. Создаем в Photoshop современный дизайн навигации в стиле Grunge

Навигация в Веб дизайне – одна из самых важных частей юзабилити (удобства и простоты использования) Вашего сайта. С помощью различных элементов навигации, пользователь переходит по страницам Вашего сайта. В данной статье будет рассмотрен способ создания современного дизайна навигации в стиле Гранж.

В данной статье Вы изучите, как использовать градиенты, текстуры и стили слоев в Photoshop. В конце статьи мы получим такой результат:

Все исходные материалы для создания данной навигации, и уже готовый шаблон навигации Вы сможете скачать в конце статьи.

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

Давайте создадим новый документ в Photoshop (CTRL+N), размером 920px на 170px.

Шаг 2. Создаем основу навигации.

Создадим новый слой (SHIFT+CTRL+N) и назовем его «Навигация». Установим значение основного цвета на #1E1E1E, и выбрав инструмент «Прямоугольник со скругленными углами» с радиусом углов 6px, создадим фигуру:

Шаг 3. Задаем стили для основы навигации.

Теперь давайте зададим стили для основы будущей навигации Слои -> Стиль Слоя -> Параметры наложения и выставим следующие настройки для данного слоя:

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

Используя шрифт Myriad Pro Regular (или Arial) размером 14 пт, белого цвета (#FFFFFF), добавим элементы навигации, например «Главная, Услуги, Контакты, О Нас и т.д.». После чего применим к тексту следующие стили:

В результате у Вас должно получиться:

Шаг 5. Накладываем текстуры.

Наложим текстуру Media_Militia_BTOB_005.jpg из архива с исходными материалами, который Вы можете скачать в конце статьи, на нашу будущую навигацию для сайта. Для этого вставим ее в наш документ и уменьшим ее (CTRL+T) примерно на 25% по ширине и высоте. Теперь зажмите клавишу CTRL и кликните по миниатюре векторной маски слоя «Навигация», для того что бы создать выделение. Теперь давайте инвертируем выделенную область, нажав правую кнопку мыши на выделение, и выбрав пункт «инверсия выделения», после чего нажмите клавишу DEL.

В результате у Вас должно получиться примерно следующее:

Теперь применим к данному слою с текстурой следующие стили (Слои -> Стиль Слоя -> Параметры наложения):

В результате получим:

Добавляем активный пункт навигации.

Создадим новый слой (SHIFT+CTRL+N) и с помощью инструмента «Прямоугольник» (U) создадим фигуру цветом #95009E, как показано на рисунке ниже:

Данный слой должен располагаться ниже слоя с текстурой и слоя с текстом.

Теперь применим к данному слою следующие стили:

Осталось добавить оставшуюся текстуру из архива с исходными материалами и готовый PSD шаблон навигации для сайта в стиле Гранж готов.

Финальный результат.

Скачать готовый PSD шаблон навигации и исходные материалы