Создание навигации в стиле Windows 7 в Photoshop

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

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

Создайте новый документ в Photoshop размером 600×400px. Для этого урока нам не нужен очень большой размер документа, если Вы, конечно, хотите, можете сделать, например 800х640px. Установим цвет переднего плана #1592d7, а цвет фона - # 136da2. Выбираем инструмент Градиент с типом Радиальный градиент.

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

ДОБАВЛЕНИЕ ПОЛОС ФОНОВОГО СВЕТА

Создадим новый слой, он должен располагаться над фоновым слоем. Выберем инструмент Custom Shape Tool.

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

Если Вы не видите необходимую форму, то вам необходимо ее загрузить. У меня эта форма была сразу после установки программы. После того как Вы выбрали форму, нанесите ее на холст. Поместите форму так, чтобы полосы поступали хорошо на холст.

Выберите инструмент Pen Tool и щелкните правой кнопки мыши на фигуру. В открывшемся меню выберите Fill Path. Убедитесь, что белый цвет выбран в качестве фона (#FFFFFF).

Далее щелкните еще раз правой кнопкой мыши выберите Delete Path.

Затем переходим Filter->Blur->Guassian Blur. Размытие ставим примерно 5px. Устанавливаем смешивание для фона Мягкий свет и непрозрачность 30%. Наконец, назовите фон background streaks.

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

Создайте новый слой и назовите его navigation. Затем выберите инструмент Прямоугольное выделение. Создайте выделение примерно в 40-50px по всей ширине. Заполните выделение черным цветом.

Измените, процент заливки для слоя navigation, поставьте примерно 10%.

Создадите новый слой и назовите его top line. Выберите инструмент Прямоугольное выделение и создаем две линии, друг над другом высотой 1px. Верхнюю линию залейте черным цветом, а нижнюю – белым. Наконец установите прозрачность слоя 50%.

Дублируйте слой top line и перетащите его в нижнюю часть навигации.

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

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

Залейте прямоугольник черным цветом и добавьте ему следующие стили:

Дублируйте слой button stroke. Затем переименуйте слой на button shine. Щелкните по слою правой кнопкой мыши и выбираем clear layer styles, а затем необходимо добавить следующие стили для слоя:

Полученный результат имеет вид:

Создайте новый слой и назовите его white corner stroke. Выберите инструмент Прямоугольное выделение и создайте две линии в нижнем правом краю кнопки. Высота линий – 1px. Залейте линии белым цветом.

Добавьте маску для слоя white corner stroke. Поставьте на передний план черно-белый фон. С помощью инструмента Градиент с типом Линейный градиент, начиная с вершин линий, перетащите вниз, примерно до половины. Щелкните правой кнопкой мыши на маску в окне слоев и выберите пункт apply mask, повторите эту процедуру для второй линии. У меня получилось вот так:

Наконец, выберем инструмент Pen Tool и сделаем округлый путь вокруг верхнего левого угла кнопки.

После того, как Вы выделили путь, создайте новый слой и назовите его button shine 2. Выберите инструмент Pen Tool и щелкните правой кнопкой мыши. В открывшемся меню выбираем Fill Path. Заполняем путь белым цветом. Слой button shine 2, является активным, удерживайте клавишу Ctrl и нажмите на слой с именем button shine. Теперь переходим Select> Inverse. После того как инверсия сделана, нажимаем на клавишу Delete, этонеобходимо для удаления лишних частей. Последним действием установите прозрачность слоя 10%.

Таким же самым способом Вы можете добавить столько кнопок, сколько Вам необходимо. На этом все! Спасибо за внимание. В уроке Навигация в стиле Windows 7 я покажу, как из этой картинки создать полноценную навигацию для сайта.