Стильно тёмное навигационное меню

Шаг 1
Создайте новый документ размером 500 х 400 пикселей. Залейте фон инструментом Градиент (Gradient Tool), тип — радиальный (radial), цвет #2c2c2c и #151512.


Стильно тёмное навигационное меню


Шаг 2
Создайте новый слой (Create New Layer), выберите инструмент Прямоугольник с сглаженными краями (Rounded Rectangle Tool), установите радиус — 10 пикселей. Создайте фигуру размером 250 х 300 пикселей в середине документа и залейте её белым цветом. Я добавил стиль Внешнее свечение (Layer Style — Outer Glow), цвет — чёрный.


Стильно тёмное навигационное меню



Шаг 3
Создайте новый слой (Create New Layer), сделайте выделение области белого прямоугольника и залейте его цветом #151512.


Стильно тёмное навигационное меню



Передвиньте выделение на 40 пикселей вниз (Shift+стрелка вниз 4 раза). Потом нажмите Delete.


Стильно тёмное навигационное меню



Шаг 4
Инструментом Горизонтальный текст (Horizontal Type Tool) я написал заголовок шрифтом «Delicious». Потом я применил стиль Наложение градиента (Layer Style — Gradient Overlay) к слою с текстом, цвет — от белого к прозрачному.


Стильно тёмное навигационное меню



Шаг 5
Создайте новый слой (Create New Layer) и сделайте выделение остальной части прямоугольника (под заголовком) и залейте область инструментом Градиент (Gradient Tool) цветом от #a7cd1e к #77a80e, тип — линейный градиент.


Стильно тёмное навигационное меню



Передвиньте выделение на 5 пикселей вниз (используйте стрелку вниз на клавиатуре 5 раз) и нажмите Delete.


Стильно тёмное навигационное меню



Шаг 6
Выберите инструмент Горизонтальный текст (Horizontal Type Tool) и добавьте текст меню Я использовал шрифт — Verdana с высотой линии — 30 пикселей, цвет — #383838.


Стильно тёмное навигационное меню



Шаг 7
Теперь сделаем разделители. Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение размером 250 х 1 пикселей, как показано ниже, и залейте цветом #ebebeb.


Стильно тёмное навигационное меню



Сделайте копию слоя с разделителем и передвиньте его на 30 пикселей вниз (Shift+стрелка вниз 3 раза). Повторите этот процесс для создания разделителей для всего меню:


Стильно тёмное навигационное меню



Шаг 8
Я добавил слой с прямоугольником под слоем с кнопкой меню, чтобы показать, что кнопка активна. Для этого создайте новый слой (Create New Layer) под слоем с текстом, в нём создайте выделение размером 250 х 30 пикселей и залейте цветом #f7f7f7.


Стильно тёмное навигационное меню



Шаг 9
Теперь уже известным способом создайте основание зелёного цвета. Используйте такой же градиент для заливки.


Стильно тёмное навигационное меню



Шаг 10
У нас получились неаккуратные углы. Залейте фон белым цветом и поработайте с углами:


Стильно тёмное навигационное меню







Делаем Web-дизайн

Вас может также заинтересовать:

15 декабря 2018

15 декабря 2018

Дата анонса: 2008/06/10 Эффективное разрешение, МП: 10.1 Диагональ ЖК-дисплея, дюймы: 2.5 Вес с батареей и картой памяти, г: 500

15 декабря 2018

Дата анонса: 2007/03/05 Эффективное разрешение, МП: 7.1 Диагональ ЖК-дисплея, дюймы: 2.5 Вес с батареей и картой памяти, г: 160