| Главная » Статьи » Веб-дизайн |
Навигационная панель Web 2.0
Конечный результат: Изменить  Шаг 1 Создайте новый документ, установите цвет заливки - #686868 и залейте им фон (Alt+Backspace). Мы будем создавать панель высотой 50 пикселей с тремя кнопками. Активируйте линейки (Ctrl+R) и отведите направляющие. Лучше сначала создать прямоугольную область определённой высоты и потом отвести направляющие, размер будет точным. Изменить  Шаг 2 Создайте новый слой (Create New Layer) и назовите его "Navigation Background”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение на всю ширину холста и залейте его цветом #2c2c2c. Изменить  Шаг 3 К слою с этой полоской примените стиль Наложение градиента (Layer Style - Gradient Overlay): Изменить  Цвет – от #0e0e0e к #2c2c2c. Изменить   Шаг 4 Создайте новый слой (Create New Layer) и назовите его "Highlight". Инструментом Прямоугольное выделение (Rectangular Marquee Tool) создайте выделение на воловину высоты полоски на всю её ширину. Установите цвета по умолчанию (D) и залейте выделение белым цветом (Ctrl+Backspace). Изменить  Шаг 5 Установите Непрозрачность этого слоя – 8% и снимите выделение (Ctrl+D). Изменить  Шаг 6 Создайте новый слой "Dividers" и выберите инструмент Вертикальная строка (Column Marquee Tool). Создайте выделения там, где должны быть разделители, потом залейте их белым цветом. Слой "Dividers” расположите под слоем "Highlight”. Изменить  Шаг 7 Нужно удалить белые линии за пределами панели. Это можно сделать инструментом выделения или более удобным, о котором сейчас расскажу. Сделайте выделение слоя "Navigation Background" (Ctrl+Click), инвертируйте его (Select – Inverse) и на слое "Dividers” нажмите Delete. Потом установите Непрозрачность этого слоя – 30%. Изменить  Шаг 8 Создайте новый слой над слоем "Dividers” и назовите его "Active". Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение в пределах одной кнопки и залейте его любым цветом (лучше более заметным). Потом нажмите Ctrl+H, чтобы скрыть выделение. Изменить  Шаг 9 Перейдите в меню Стилей слоя (Layer Style - Blending Options) и настройте так: Внутреннее свечение (Режим – Осветление, Метод – Мягкий): Изменить  Наложение градиента (Режим – Нормальный, Стиль – Линейный): Изменить  Обводка (Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет): Изменить  Шаг 10 Добавьте навигационный текст и отражение (если захотите). Изменить | |
| Просмотров: 520 | Рейтинг: 0.0/0 |
| Всего комментариев: 0 | |
