Купить этот сайт

Уроки » Веб-дизайн → Пурпурная панель навигации  

Начнем урок с создания нового документа с размерами 609x124 и залейте фон цветом #60015C. Двойным щелчком по фоновому слою, разблокируйте слой. Загрузите образец отсюда checkered_pstr.rar [246 b] (cкачиваний: 3) и откройте его в Photoshop.

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Примените к слою следующие стили слоя.

Пурпурная панель навигации

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Выберите инструмент Rectangle Tool и нарисуйте форму как показано ниже. Цвет формы #F334FA. Переименуйте слой в «Menu Back».

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Примените к слою «Menu Back» следующие стили слоя.

Пурпурная панель навигации

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Снова выберите Rectangle Tool и нарисуйте форму как показано ниже. Цвет формы #9D0097. Переименуйте слой в «Menu».

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Примените следующие стили слоя.

Пурпурная панель навигации

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Выберите инструмент Horizontal Type Tool и примените настройки как показано ниже.

Пурпурная панель навигации


Напечатайте ваш текст, это будут элементы меню.

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Выберите инструмент Ellipse Tool , цвет #FF2BB7, нарисуйте кружок как показано ниже.
Переименуйте слой в «Circle»

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Смените цвет переднего плана на #4B0148, выберите инструмент Custom Shape Tool и нарисуйте стрелку как показано ниже.


Нажмите на изображение чтобы увеличить


Продублируйте слои с кругами и стрелками как показано ниже, смените цвета.

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Для того чтобы создать эффект нажатого элемента меню, создайте прямоугольник цветом #60015C, как показано ниже.

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Выберите инструмент Rectangle Tool , цвет белый. Нарисуйте форму как показано ниже, переименуйте слой в «Gloss».

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить


Понизьте заполнение слоя «Gloss» до 22% и ваша панель навигации готова.


Пурпурная панель навигации
Нажмите на изображение чтобы увеличить

Пурпурная панель навигации
Нажмите на изображение чтобы увеличить

Информация к уроку:

Категория - Уроки » Веб-дизайн

Дата публикации: 13-06-2012, 05:32

Опубликовал: killot

Просмотров: 605

Комментариев: 0

Ссылки к этой статье:

Источник - Empire Dezign

Автор - Не указан

Переводчик - Killot

Найти - Все уроки с Empire Dezign

Еще по этой теме:

Пурпурный значок Пурпурный значок
В этом уроке создадим пурпурный значок для папки ...
Темное меню - Заголовок Темное меню - Заголовок
В этом уроке создадим красивый заголовок (Хидер) ...
Кнопка «GO» Кнопка «GO»
И снова кнопки, на этот раз кнопка отправки ...
Меню в старом стиле Меню в старом стиле
В этом уроке создадим меню навигации в старинном ...
Меню "Синий металл"
В этом уроке создадим стильное меню для сайта ...
Техническая кнопка Техническая кнопка
В этом уроке мы создадим техническую кнопку. ...
Окно для фотографии/изображения Окно для фотографии/изображения
В этом уроке создадим окошко (рамку) для ваших ...
Кнопка «Mail» Кнопка «Mail»
В этом уроке создадим кнопку для отправки почты. ...
Значок Quicktime Значок Quicktime
В это уроке мы будем создавать значок "Quicktime" ...
Создаем панель навигации e-card Создаем панель навигации e-card
Создаем панель навигации в девчачьем стиле ...

Социальные закладки:


Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 

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

 
 
Ваше Имя:
Ваш E-Mail:
Вопрос:
Какому программному продукту посвящен данный ресурс
Ответ:*
Код:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Введите код: