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

Уроки » Веб-дизайн → Меню в старом стиле  

Начнем урок с создания нового документа с размерами 609x158px, цвет фона #082034.

Двойным щелчком по фоновому слою в палитре слоев, разблокируйте слой.

Загрузите форму отсюда oldmenu_pstr.rar [2,19 Kb] (cкачиваний: 2), и откройте ее в Photoshop.

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


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

Меню в старом стиле

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


Выберите инструмент Custom Shape Tool и найдите форму «Side»

Меню в старом стиле


Используя цвет #3A70A2, нарисуйте форму как показано ниже. Переименуйте слой в «Side»

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


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

Меню в старом стиле

Меню в старом стиле

Меню в старом стиле


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


Теперь продублируйте слой «Side» и поместите копию как показано ниже.

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


Выберите инструмент Line Tool , шириной в 2px, цветом #3A70A2. Нарисуйте линию, как показано ниже, зажмите SHIFT, чтобы получить ровную линию. Переименуйте слой в «Divider»

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


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

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


С помощью Polygonal Lasso Tool , создайте выделение как показано ниже. Создайте новый слой и установите его выше фонового слоя и ниже всех остальных. Залейте выделение цветом #082034 и снимите выделение (CTRL+D). Переименуйте слой в «Menu Back».

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


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

Меню в старом стиле

Меню в старом стиле

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


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

Меню в старом стиле


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


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


Снова выберите инструмент Polygonal Lasso Tool , создайте новый слой и расположите его выше текстового слоя. Создайте выделение как показано ниже и залейте его белым. Снимите выделение и переименуйте слой в «Gloss»

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


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

Меню в старом стиле

Меню в старом стиле

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


Теперь выберите инструмент Custom Shape Tool и найдите форму Frame Top

Меню в старом стиле


Используя цвет #3A70A2, нарисуйте форму как показано ниже. Переименуйте слой в «Frame Top».

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


Примените к форме те же стили слоя, что и для слоя «Side»

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


Продублируйте слой «Frame Top» и отразите его вертикально (Edit > Transform > Flip Vertical) и расположите копию как показано ниже.



Теперь выберите инструмент Eraser Tool (ластик) и сотрите части с нижней формы как показано ниже.

Меню в старом стиле
(! Анимация) Нажмите на изображение чтобы увеличить




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


А вот здесь можно посмотреть все изображение целиком.

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

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

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

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

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

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

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

Источник - Empire Dezign

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

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

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

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

Пурпурный значок Пурпурный значок
В этом уроке создадим пурпурный значок для папки ...
Кнопка в стиле чужих Кнопка в стиле чужих
В этом уроке будем создавать кнопку в стиле ...
Кнопка «GO» Кнопка «GO»
И снова кнопки, на этот раз кнопка отправки ...
Пурпурная панель навигации Пурпурная панель навигации
В этом уроке создадим простую и симпатичную ...
Глянцевый интерфейс Глянцевый интерфейс
В этом уроке создадим глянцевый интерфейс ...
Меню "Синий металл"
В этом уроке создадим стильное меню для сайта ...
Кнопка «Mail» Кнопка «Mail»
В этом уроке создадим кнопку для отправки почты. ...
Логотип Cingular Логотип Cingular
В этом уроке вы узнаете как нарисовать логотип ...
Цифровой текст Цифровой текст
Создаем цифровой текст ...
Иконка папки Иконка папки
Надоели скучные папки Windows XP... нарисуй свои ...

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


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

 

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

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