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


Начнем урок с создания нового документа с размерами 535x123px, цвет фона #154A77.

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

Меню "Синий металл"



Примените стиль слоя Gradient Overlay.

Меню "Синий металл"

Меню "Синий металл"



Выберите инструмент Rounded Rectangle Tool и нарисуйте прямоугольник, с радиусом: 10px и цветом: #1A5F99.


Теперь выберите инструмент Direct Selection Tool и переместите нижнюю левую и правую верхнюю якорные точки на 5 пикселей, как показано ниже. Переименуйте этот слой в «Menu Frame».


Загрузите образец отсюда scanline_pstr.rar [232 b] (cкачиваний: 3) и откройте его в Photoshop.

Меню "Синий металл"



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

Меню "Синий металл"


Меню "Синий металл"

Меню "Синий металл"



Снова выберите инструмент Rounded Rectangle Tool и нарисуйте прямоугольник, с радиусом: 5px, цветом #30516D.

Также выберите Direct Selection Tool и переместите, нижние левые и правые точки, как показано ниже. Переименуйте слой в «Menu Back»

Меню "Синий металл"



Продублируйте слой «Menu Back», измените цвет формы на #093F6C. Нажмите CTRL+T и измените ширину формы на 5% и высоту на 10%. Переименуйте слой в «Button».

Меню "Синий металл"



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

Меню "Синий металл"

Меню "Синий металл"

Меню "Синий металл"

Меню "Синий металл"

Меню "Синий металл"



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

Меню "Синий металл"



Напечатайте нужный вам текст и понизьте его заполнение до 58%

Меню "Синий металл"



Создайте новую группу слоев и поместите туда слои «Menu Back», «Button» и текстовый слой. Продублируйте группу несколько раз и измените текст. Не забудьте отразить каждую вторую кнопку вертикально (Edit > Transform > Flip Vertical), как показано ниже.




Зажав CTRL, щелкните по слою «Menu Frame» чтобы загрузить его выделение.

Создайте новый слой и расположите его выше слоя «Menu Frame». Теперь выберите в главном меню Select > Modify > Contract > 2px. Залейте выделение белым цветом и переименуйте слой в «Gloss».

Меню "Синий металл"



Выберите инструмент Elliptical Marquee Tool и создайте выделение как показано ниже. Убедитесь, что вы находитесь на слое «Gloss», нажмите на клавиатуре клавишу DELETE, понизьте заполнение слоя «Gloss» до 14%

Меню "Синий металл"


Для придания эффекта я создал отражение.


Меню "Синий металл"

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

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

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

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

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

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

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

Источник - Empire Dezign

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

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

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

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

Кнопка с водой Кнопка с водой
В этом уроке создадим прикольную кнопку, с ...
Темное меню - Заголовок Темное меню - Заголовок
В этом уроке создадим красивый заголовок (Хидер) ...
Кнопка «GO» Кнопка «GO»
И снова кнопки, на этот раз кнопка отправки ...
Пурпурная панель навигации Пурпурная панель навигации
В этом уроке создадим простую и симпатичную ...
Меню в старом стиле Меню в старом стиле
В этом уроке создадим меню навигации в старинном ...
Техническая кнопка Техническая кнопка
В этом уроке мы создадим техническую кнопку. ...
Кнопка закладок Кнопка закладок
В этом уроке создадим прикольную кнопку для ...
Интерфейс «Mac» Интерфейс «Mac»
Я получаю много просьб о написании туториалов, и ...
Текстовый эффект «Цепная реакция» Текстовый эффект «Цепная реакция»
В этом уроке создадим текстовый эффект "Цепная ...
Иконка папки Иконка папки
Надоели скучные папки Windows XP... нарисуй свои ...

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


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

 

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

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