QuickTUTS.ru - УРОКИ PHOTOSHOP, САЙТОСТРОЙ, БЕСПЛАТНЫЕ ФАЙЛЫ

Шаг 1 – Создание фона

Создайте новый документ размером 600х400 px. Для этого урока нет необходимости создавать документ большего размера, хотя, все ограничивается Вашей фантазией. Установите цвет переднего плана (Foreground Color) #1592d7, а заднего (Background Color) — #136da2. Теперь выберите инструмент Gradient Tool и установите радиальный градиент.

Теперь щелкните по середине изображения и протяните в любую сторону. Должно получиться нечто подобное:

Шаг 2 – Добавление световых полос

Создайте новый слой над фоном нажав на кнопку . Затем выберите Custom Shape Tool из панели слева.

После выбора инструмента вверху Вы увидите слово Shape. Кликните на маленькую стрелку, чтобы открыть панель с формами. Найдите и выберите Registration Target 2. (Если Вы не нашли ее, то, возможно просто необходимо отобразить все доступные формы. Для этого нажмите еще на одну стрелку и в выпадающем меню выберите All).

Установите размер формы максимально возможным и расположите её как на изображении:

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

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

Теперь примените фильтр Guassian Blur, для этого выберите Filter > Blus > Guassian Blur. Укажите радиус 5px и нажмите ОК. Для получившегося слоя укажите режим смешивания (Blend Mode) Soft Light и непрозрачность (Opacity) 30% Назовите слой Background Streaks.

Шаг 3 – Создание фона для панели навигации

Создайте новый слой и назовите его Navigation. Затем выберите инструмент Rectangular Matquee Tool (прямоугольное выделение). Выделите прямоугольную полосу по всей длине высотой 45-50px, в зависимости от того, какой высоты должна быть Ваша панель навигации. Заполните ее черным цветом (Edit > Fill).

Теперь выберите Layer > Layer Style > Blending Options и уменьшите непрозрачность заливки до 10%.

Создайте новый слой и назовите его Top Line. Выберите инструмент Single Row Marquee Tool и создайте горизонтальное выделение размером 1 px по краю фона для панели навигации и залейте его (Edit > Fill) черным цветом. Также создайте еще одно выделение прямо под предыдущей полосой и залейте его белым цветом. Установите для слоя Opacity 50%.

Дублируйте слой Top Line, перетащив его на иконку ,  и переименуйте его в Bottom Line. Переместите его к нижней границе панели навигации.

Шаг 4 – Создание кнопки

Создайте новый слой и назовите его Button Stroke. Создайте прямоугольное выделение инструментом Rectangular Matquee Tool необходимого размера так, чтобы верхний край выделения закрывал верхнюю белую линию, а нижний край выделения находился над обеими нижними линиями.

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

Создайте дубликат слоя Button Stroke и назовите его Button Shine. Нажмите правой клавише по слою Button Shine и выберите Clear Layer Styles. После этого примените следующие стили слоя:

Вы должны получить нечто подобное:

Создайте новый слой с названием White Corner Stroke. Сделайте прямоугольное выделение шириной 1 px справа и залейте его белым цветом. Повторите прием и создайте такую же полосу снизу.

Добавьте маску слоя для слоя White Corner Stroke, нажав на кнопку . Установите основной цвет черным, а задний белым. Теперь выберите инструмент Gradient Tool, выберите линейный градиент. Кликните по вершине правой белой линии и проведите мышью до середины вниз. Нажмите правой кнопкой мыши по маске слоя и выберите в меню Apply Mask. Повторите операцию с нижней белой линией, только теперь примените градиент слева направо. Должно получиться нечто подобное:

Используя инструмент Pen Tool создайте округлый путь как показано на изображении:

После того, как Вы создали путь, создайте новый слой и назовите его Button Shine 2, щелкните по нему правой клавишей мыши и выберите Fill Path, залейте белым цветом. Теперь выделите слой Button Shine – удерживая клавишу Ctrl кликните левой клавишей мыши по этому слою. Инвертируйте выделение Select > Inverse. Активируйте слой Button Shine 2 кликнув по нему мышью и нажмите клавишу Del. Установите непрозрачность слоя (Opacity) 10%.

Шаг 5 – Дополнительные кнопки

Скопируйте все элементы кнопки необходимое количество раз и переместите вдоль панели навигации.

Вот и все! Можете использовать данный прием для создания навигации на своих сайтах.