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





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

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


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

Подсказка

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

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

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


Навигационное меню


Шаг 1
Создайте новый документ размером 1000х600 пикселей. Установите цвет заливки - #333333, а цвет фона – чёрный, и инструментом Градиент (Gradient Tool) сделайте заливку фона, как показано ниже:


Простая навигационная панель с эффектом блеска


Шаг 2
Создайте новый слой (Create New Layer), выберите инструмент Кисть (Brush Tool), большую круглую кисть размером 700 пикселей, установите её непрозрачность и нажим – 50%. Белым цветом сделайте несколько мазков, как показано ниже:


Простая навигационная панель с эффектом блеска


Шаг 3
Создайте новый слой (Create New Layer) и назовите его “Navi Bar”. Инструментом Прямоугольная область (Rectangular Marquee Tool) создайте выделение, как показано ниже. Потом залейте его чёрным цветом, используя инструмент Заливка (Paint Bucket Tool):


Простая навигационная панель с эффектом блеска


К этому слою примените стиль Отбрасывание тени (Layer Style - Drop Shadow):

Режим – Умножение


Простая навигационная панель с эффектом блеска


Вы получите такой эффект:


Простая навигационная панель с эффектом блеска


Шаг 4
Сделайте выделение слоя “Navi Bar” (Ctrl+Click). Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и, удерживая Alt, сделайте выделение в нижней части предыдущей фигуры, как показано ниже. Это сделает вырез нижней части выделения:


Простая навигационная панель с эффектом блеска

Простая навигационная панель с эффектом блеска


Шаг 5
Не снимайте выделение, создайте новый слой (Create New Layer) и назовите его “glossy”, залейте его белым цветом и установите Непрозрачность (Opacity) и Заливку (Fill) слоя – 30%.


Простая навигационная панель с эффектом блеска


В этом же слое напишите текст инструментом Горизонтальный текст (Horizontal Type Tool):


Простая навигационная панель с эффектом блеска


Шаг 6
Теперь подсветим одну из кнопок меню. Создайте новый слой (Create New Layer) между слоем “glossy” и текстовым слоем. Назовите его “mouseover”. Инструментом Прямоугольная область (Rectangular Marquee Tool) сделайте выделение вокруг текста (высота выделения равна высоте панели), залейте его белым цветом. Установите Непрозрачность (Opacity) и Заливку (Fill) слоя – 30%. Потом к этому слою примените стиль Наложение цвета (Layer Style - Color Overlay):


Простая навигационная панель с эффектом блеска

Простая навигационная панель с эффектом блеска


Заключение:
Вот мы и закончили создание меню. В конце я обрисовал фон кистями цветов и добавил текстуру:


Навигационное меню




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

написал : Jeka31

Ну очень уж простая , но красиво , спасибо !

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


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

Ваше Имя

Ваш E-mail

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

Введите код: