Вебдизайн
Опубликовано в Zaandr

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Результат

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

Скачать Современный дизайн навигации в стиле грандж в Photoshop (2,5 MB)

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


Показать комментарии
  • Алматинский полубомж

    Отличный урок, спасибо, сам когда то сильно увлекался Фотошопом и Корелом. Люблю такие интересные и новые фишки.

    Оффтоп:
    Понравилась надпись на шапке.
    «Ничего личного»

  • xamelon

    Спасибо, что урок перевёл! Видел его на английсокм сайте, но с английским у меня дела плохо…

  • LIDOVSCI

    Спасибо огромное за такой отличный урок! Продолжение будет?