Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

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


Навигационная панель 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 файл можете скачать здесь.



Ссылка на источник урока

написал : pasha.manah

Как сделать отражение?

---------------


написал : pasha.manah

Опишите пожалуйста в 10 шаге,как сделать отражение?

---------------


написал : positive11

Это можно сделать разными способами. почитайте последние уроки, принадлежащие нашему сайту..думаю там вы найдёте много полезного..
а вообще принцип такой - копируется верхяя часть, переворачивается и скрывается низ отражения через маску градиентом, либо как нить ластиком (но этот вариант не очень эффективен)

---------------


Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: