Создание навигационного меню в стиле Гранж - Веб-дизайн - Уроки для начинающих, станьте настоящим мастером 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) должен быть Мягкий свет (Soft Light).

Шаг 4: Текст меню

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

После этого ваша панель навигации должна выглядеть примерно следующим образом.

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

Наступило время применить Гранжевый стиль. Первым делом загрузите данную текстуру на свой компьютер и запустите её в Фотошопе. Далее, используя команду свободное трансформирование (CTRL+T), уменьшите ее размер на 25%, т.е. установите значение 75% по ширине и высоте. При помощи инструмента Перемещениe(Move Tool), перетащите изображение текстуры на рабочее, после чего расположите слой с текстурой над слоем с панелью навигации. Расместите на рабочем документе слой с текстурой примерно следующим образом:

После этого, удерживая клавишу CTRL, щелкните ЛКМ по миниатюре слоя «Панель навигации», чтобы выделить область с панелью навигации.

Когда Вы выделите панель навигации, выберите слой с текстурой (если он не выбран) и скопируйте выделенную область (CTRL+ C), далее уберите видимость слоя с текстурой и вставьте скопированную область, нажав CTRL+V. Первоначальный слой с текстурой можете удалить, чтобы он Вам не мешался.

После этого в главном меню Фотошопа пройдите Слой - Стиль слоя - Параметры наложения… (Layer - Layer Styles -Blending Options…) и установите настройки, как показано на изображении ниже. Подсказка: Soft Light - Мягкий свет.

Шаг 6: Активная кнопка

Создайте новый слой Слой - Новый - Слой… (Layer - New - Layer…) и назовите его «Кнопка». Расположите данный слой между слоем с текстурой и слоем с панелью навигации. В качестве основного цвета выберите 95009E, после этого, удерживая клавишу CTRL, кликните ЛКМ по миниатюре слоя «Панель навигации», это действие как Вы уже знаете, позволит выделить область с панелью навигации. Возьмите инструмент Прямоугольник, выберите слой «Кнопка» и нарисуйте кнопку.