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

Шаг 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-дизайн

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

19 февраля 2019

Цифровой зеркальный фотоаппарат

19 февраля 2019

Дата анонса: 2011/01/06 Эффективное разрешение, МП: 14.1 Диагональ ЖК-дисплея, дюймы: 3 Вес с батареей и картой памяти, г: 122

19 февраля 2019

Отличительные черты стандартного светосильного зум-объектива Sigma AF 24-70mm F2.8 IF EX DG HSM – высокое качество изготовления, возможность использования как с цифровыми, так и с пленочными цифровыми камерами и великолепные...