Углеволоконная навигация в Photoshop

Доброе время суток. Сегодня я покажу, как нарисовать углеволоконное меню для сайта. Идея создания меню появилась при просмотре одного из шаблона компании TemplateMonster. Надеюсь, что Вам идея понравится!

СОЗДАНИЕ ФОНА

Откроем программу Photoshop и создадим новый документ 1200x600px с прозрачным фоном. Установим цвет переднего плана #bebebf, а цвет заднего плана - #d2d2d2. Затем выберем инструмент Градиент с типом Линейный градиент.

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

Затем добавим немного шума, Filter> Noise> Add Noise, параметры будем использовать приведенные ниже:

Теперь размоем фон, Filter> Blur> Motion Blur, используйте приведенные ниже настройки:

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

Фон у нас получился металлический. Цвет фона Вы можете подобрать, под любой цвет метала, если захотите.

СОЗДАНИЕ НАВИГАЦИИ

Выберите инструмент Rounded Rectangle Tool (U), радиус закругления поставьте 10px. Навигацию нарисуем по центру холста.

После того как создали прямоугольник с закругленными краями, добавим к нему следующие Стили слоя:

Вот что у нас получилось на данном шаге:

Теперь мы должны создать углеволоконную структуру. Создайте новый документ 4x4px, затем возьмите инструмент Карандаш размером 1px и зарисуйте цветами, цвета показаны на рисунке:

Каждый цвет должен быть в высоту 1px,а в ширину 2px.

После того как создадите шаблон, выберите Edit> Define Pattern (Редактирование->Определить Образец), а затем возвращаемся к нашей навигации.

Сделаем выделение вокруг нашей навигации, Select -> Load Selection (Выделение->Загрузить Выделение). Создадим новый слой и выберем инструмент Paint Bucket (G), тип заливки устанавливаем Шаблон, из меню шаблонов выбираем ранее созданный нами шаблон. После того как нашли свой шаблон, заливаем им выделенную область.

Режим слоя необходимо поставить Difference (Разница).

СОЗДАНИЕ КНОПОК НАВИГАЦИИ

Создадим ссылки для нашей навигации. Выберите инструмент Текст и создайте надписи.

После того как Вы завершили добавлять текстовые ссылки, добавим к текстовому слою следующие Стили:

Создайте новый слой. Между каждой ссылкой, рядом друг с другом, добавим две вертикальные линии шириной 1px. Линии должны начинаться с верней части навигации, а заканчиваться в нижней. Цвет первой линии ставим черный, а второй – белый. После того, как создадите все линии, прозрачность слоя необходимо установить 50%.

Выберите инструмент Elliptical Marquee Tool (М) и нарисуйте кружек над ссылкой навигации.

Выберите инструмент Градиент с типом Линейный градиент, цвет переднего плана установим черный (#000000), а цвет фона плана – серый (#828282). Перетащите градиент с верхней в нижнюю часть круга.

С помощью инструмент Elliptical Marquee Tool (М) создайте еще одно круговое выделение внутри предыдущего.

Заполните выделение цветом #8e8e8e. Не снимая выделение, создайте новый слой. Цвет переднего плана установите белый (#FFFFFF), а затем выберите инструмент Градиент с типом Радиальный градиент.

Увеличьте изображение, затем перетащите градиент, начиная с верхнего левого угла эллипса. Постарайтесь, чтобы у Вас получилось, как показано на картинке:

Затем измените тип градиент на Линейный градиент. Создайте новый слой, перетащите градиент с низу в верх.

Измените, прозрачность каждого слоя, отвечающие за эллипс, на 5-10%. С этим Вы можете экспериментировать, как захотите. Примерно, должно получится, что-то вроде этого:

Добавьте таки же эллипсы к остальным частям меню.

СОЗДАЕМ НАВЕДЕНИЕ

В одну из кнопок добавим наведение, я выбрал кнопку Portfolio. Для этого просто необходимо поменять цвет переднего плана при создании Градиента. Я выбрал цвет #AC457A. Цвет можете выбрать, какой захотите.

С помощью инструмент Прямоугольное выделение, сделайте выделение вокруг кнопки между разделителями.

После того, как сделали выделение, залейте ее цветом #dddddd, затем измените режим наложение слоя на Overlay (Перекрытие).

Создайте новый слой. С помощью инструмента Polygonal Lasso Tool (L) создаем треугольную форму в верхней части, выделенной кнопки. В качестве фона треугольник необходимо залить таким же цветом, как и фон. Затем необходимо добавить тень, параметры представлены ниже:

В готовом виде кнопка при наведении, выглядит примерно так:

Полностью меню имеет следующий вид:

На этом эта часть урока закончена. В следующей части, под названием Создание углеволоконного меню, мы будем кодировать созданное в этом уроке меню.