Глянцевое горизонтальное меню в черном цвете

взято с · Алексей Деревянко · «Мир Фотошопа»

Здесь мы рассмотрим пример создания стильного глянцевого навигационного меню. Результат — довольно неплох и было бы неправильно оставить эту технику без внимания.

1 Шаг

Первым делом создайте новый документ размерами 1024×205 px.

2 Шаг

Дальше нам нужно добавить градиент на фоновый слой. Для этого выполните щелчок правой кнопкой мыши по слою с фоном и выберите из выпавшего меню пункт Blending Options, что вызовет меню стилей слоя. Задайте там такие опции:

3 Шаг

Теперь нам нужно при помощи Rectangular Marquee Tool создать выделение, как показано далее и залить его белым цветом (#FFFFFF) на новом слое.

4 Шаг

Для этого слоя примените такой стиль:

5 Шаг

Здесь я немного “подсветил” эту синюю полоску. Для этого мне нужно было загрузить выделение этой полосы (Ctrl + клик по слою). Затем на новом слое поверх текущего я залил выделение цветом #FFFFFF, удалил нижнюю его половину и поменял режим наложения этого слоя на Soft Light. В результате вот что должно получиться:

6 Шаг

Теперь начнем работу над нашими кнопками. Для этого снова выберите инструмент Rectangular Marquee и выделите им область, как показано ниже. Залейте его каким-нибудь однородным цветом (оттенок не важен):

7 Шаг

После этого задайте слою с кнопкой следующие стили:

8 Шаг

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

9 Шаг

Далее к кнопке нужно добавить блик и для этого нужно снова загрузить ее выделение, выполнив Ctrl + клик по соответствующему слою. Залейте выделенную область белым цветом #FFFFFF.

10 Шаг

Теперь при помощи стрелок на клавиатуре сдвиньте свое выделение вниз наполовину кнопки и выберите Edit > Clear, у вас получится вот что:

11 Шаг

Теперь понизьте Opacity этого слоя до 28% и смените режим наложения на Overlay. Смотрим на результат:

12 Шаг

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

13 Шаг

Теперь просто повторите 6-12 шаги столько раз, сколько вам нужно, чтобы получить нужное количество кнопок.

14 Шаг

После этого давайте добавим небольшой логотип. Я использовал обыкновенный текст, шрифт Helvetica Neue и поместил его в начало синей полоски.

15 Шаг

Простой белый цвет мне показался слишком банальным, поэтому я задал такие стили моему логотипу:

16 Шаг

На этом шаге у вас должна выйти следующая картина:

17 Шаг

Нашей шапке не хватает формы поиска. Снова берем Rectangle Marquee Tool и наносим вот такое выделение, залив его белым (#FFFFFF) на новом слое:

18 Шаг

Теперь зададим пару стилей этому слою.

19 Шаг

Смотрим на результат:

20 Шаг

Идем дальше и создаем еще одно выделение, как показано на скриншоте и заливаем его, опять же, белым цветом на новом слое. Это будет поле для ввода.

21 Шаг

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

22 Шаг

Дальше нарисуем кнопку поиска. Для этого берем Rectangle Marquee Tool и делаем выделение, как на рисунке.

23 Шаг

Зададим слою такие стили:

24 Шаг

Осталось добавить немного текста, блик, и вот что получится:

25 Шаг

Последнее, что осталось сделать — создать тонкое свечение, чтобы придать глубины изображению. Для этого выберите инструмент эллиптического выделения Elliptical Marquee Tool, задайте ему параметр Feather порядка 20px и создайте такое выделение:

26 Шаг

Залейте его белым цветом на новом слое, который поместите за все остальные в вашем документе. Возьмите Rectangle Marquee Tool и выделите на этом слое все, что находится выше синей полоски, затем выберите Edit > Clear. После этого понизьте Opacity слоя до 69%, смените режим наложения на Overlay и… Вы получили отличную шапку для своего сайта!