Черная глянцевая панель навигации для Web-сайта

В этом уроке я продемонстрирую, как создать в Adobe Photoshop глянцевую блестящую панель навигации для Web-сайта.

Photoshop
Шаг1. Начнем с создания в Adobe Photoshop нового документа - New Document (File > New) размером 800X100 пикселей
Image
Фон заливаем белым цветом (#FFFFFF)
Шаг2. Создаем черный прямоугольник необходимой вам длины для панели.
Photoshop
Шаг3. Нажимаем Ctrl+Shift+N для создания нового слоя. Выделяем область, закрывающую верхнюю половину созданного нами черного прямоугольника, и заливаем ее белым цветом. Устанавливаем для этого слоя прозрачность 15%.
Photoshop
Шаг4. Создаем еще один новый слой и проводим линию толщиной 1 пиксель вдоль черного прямоугольника ближе к верхней части. Устанавливаем для этого слоя прозрачность 15%.
Photoshop
Шаг5. Добавляем еще один новый слой и создаем еще один узкий прямоугольник с заливкой серого цвета (c6c6c6).
фотошоп
Дальше будем использовать стили Фотошоп для создания эффектов. Для слоя с этим серым прямоугольником открываем Layer Style (Стили слоя) устанавливаем эффект слоя Drop Shadow (Тень) с такими параметрами:
фотошоп
Результат должен быть примерно таким:
фотошоп
Шаг6. Добавляем еще один новый слой и проводим черную линию толщиной 7 пикселей.
фотошоп
Открываем Layer Style (Стили слоя) и устанавливаем для этого слоя эффект Gradient Overlay с такими настройками:
фотошоп
Устанавливаем прозрачность слоя 22%.
фотошоп
Шаг7. Добавляем текст белого цвета. Здесь использован "Vogel".
Web-графика
Для него выбираем эффект Stroke (Обводка)
Web-графика
Затем добавляем эффект Gradient Overlay с такими настройками:
Web-графика
Web-графика
Результат должен быть такой:
Web-графика
Мой финальный результат - красивая глянцевая панель навигации для Web-сайта:
Web-графика

Источник
Перевод: Tortila