Навигационная панель Web 2.0

Конечный результат:


Навигационная панель Web 2.0


Шаг 1
Создайте новый документ, установите цвет заливки — #686868 и залейте им фон (Alt+Backspace). Мы будем создавать панель высотой 50 пикселей с тремя кнопками. Активируйте линейки (Ctrl+R) и отведите направляющие. Лучше сначала создать прямоугольную область определённой высоты и потом отвести направляющие, размер будет точным.


Навигационная панель Web 2.0


Шаг 2
Создайте новый слой (Create New Layer) и назовите его “Navigation Background”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста и залейте его цветом #2c2c2c.


Навигационная панель Web 2.0


Шаг 3
К слою с этой полоской примените стиль Наложение градиента (Layer Style — Gradient Overlay):


Навигационная панель Web 2.0


Цвет – от #0e0e0e к #2c2c2c.


Навигационная панель Web 2.0

Навигационная панель Web 2.0


Шаг 4
Создайте новый слой (Create New Layer) и назовите его "Highlight". Инструментом Прямоугольное выделение (Rectangular Marquee Tool) создайте выделение на воловину высоты полоски на всю её ширину. Установите цвета по умолчанию (D) и залейте выделение белым цветом (Ctrl+Backspace).


Навигационная панель Web 2.0


Шаг 5
Установите Непрозрачность этого слоя – 8% и снимите выделение (Ctrl+D).


Навигационная панель Web 2.0


Шаг 6
Создайте новый слой “Dividers" и выберите инструмент Вертикальная строка (Column Marquee Tool). Создайте выделения там, где должны быть разделители, потом залейте их белым цветом. Слой “Dividers” расположите под слоем “Highlight”.


Навигационная панель Web 2.0


Шаг 7
Нужно удалить белые линии за пределами панели. Это можно сделать инструментом выделения или более удобным, о котором сейчас расскажу.
Сделайте выделение слоя "Navigation Background" (Ctrl+Click), инвертируйте его (Select – Inverse) и на слое “Dividers” нажмите Delete. Потом установите Непрозрачность этого слоя – 30%.


Навигационная панель Web 2.0


Шаг 8
Создайте новый слой над слоем “Dividers” и назовите его "Active". Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение в пределах одной кнопки и залейте его любым цветом (лучше более заметным). Потом нажмите Ctrl+H, чтобы скрыть выделение.


Навигационная панель Web 2.0


Шаг 9
Перейдите в меню Стилей слоя (Layer Style — Blending Options) и настройте так:

Внутреннее свечение (Режим – Осветление, Метод – Мягкий):


Навигационная панель Web 2.0


Наложение градиента (Режим – Нормальный, Стиль – Линейный):


Навигационная панель Web 2.0


Обводка (Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет):


Навигационная панель Web 2.0


Шаг 10
Добавьте навигационный текст и отражение (если захотите).


Навигационная панель Web 2.0



PSD файл можете скачать здесь.




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

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

25 сентября 2018

Фотокамера D300S — профессиональная зеркальная фотокамера в компактном корпусе с матрицей формата DX, расширяющая возможности фотографов, которые ценят творческую свободу. В компактный корпус заключены функция D-movie от корпорации Nikon и...

25 сентября 2018

Дата анонса: 2006/06/08 Эффективное разрешение, МП: 7.2 Диагональ ЖК-дисплея, дюймы: 2.7 Вес с батареей и картой памяти, г: 176

25 сентября 2018

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