Уроки » Веб-дизайн → Темное меню - Заголовок  


Начнем урок с создания нового документа с размерами 609х158рх, фон залейте цветом #B5B5B5.

Выберите инструмент Rounded Rectangle Tool , нарисуйте прямоугольник как показано ниже, радиус 5рх, цвет черный. Переименуйте слой в «menu».


Добавьте четыре якорных точки как показано ниже, для этого используйте инструмент -->Add Anchor Point Tool .

Темное меню - Заголовок



Выберите инструмент Direct Selection Tool , выберите две средних якорных точки и зажав клавишу SHIFT, нажмите стрелку вверх на клавиатуре, три раза.

Темное меню - Заголовок



Примените к слою «menu» следующие стили слоя (Blending Options).

Темное меню - Заголовок

Темное меню - Заголовок

Темное меню - Заголовок


В результате вы получите следующее:

Темное меню - Заголовок



Выберите инструмент Horizontal Type Tool и примените следующие параметры.

Темное меню - Заголовок


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

Темное меню - Заголовок



Далее, выберите инструмент Line Tool с шириной линии в 1 пиксел, цвет белый. Нарисуйте линию как показано ниже и опустите заполнение (Fill) до 11%.

Темное меню - Заголовок


Тем же инструментом нарисуйте еще одну такую же линию, только на этот раз черного цвета. Разместите черную линию над белой.

Темное меню - Заголовок



Выберите инструмент Horizontal Type Tool и примените следующие параметры.

Темное меню - Заголовок


Напечатайте заголовок вашего сайта, букву «Q» я сделал с помощью шрифта Neorpol (neuropol.rar [24,57 Kb] (cкачиваний: 2)), цвет #D81313. Слоган под названием сайта я сделал с помощью шрифта Verdana, размер: 8pt.

Темное меню - Заголовок



Далее, снова выбираем инструмент Rounded Rectangle Tool и рисуем прямоугольник как показано ниже, радиус 5px, цвет: белый. Переименуйте слой в «Tab» и расположите этот слой под слоем «Menu» в палитре слоев.

Темное меню - Заголовок



Выбираем инструмент Direct Selection Tool , выделяем верхние левые точки и с зажатой клавишей SHIFT, жмем стрелку вправо на клавиатуре один раз. То же самое делаем и для верхних правых точек.

Темное меню - Заголовок



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

Темное меню - Заголовок

Темное меню - Заголовок

Темное меню - Заголовок


В результате вы получите то что показано ниже, переместите созданную вкладку немного влево как показано ниже, чтобы создать впечатление что вкладка находиться сзади.

Темное меню - Заголовок



С помощью Horizontal Type Tool , создайте текст как делали это ранее, только цвет меняем на черный.

Темное меню - Заголовок




Я продублировал эту вкладку несколько раз, добавил к ним эффект глянца с помощью Pen Tool . После объединения всех слоев я создал отражение всей панели.

Темное меню - Заголовок

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

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

Дата публикации: 14-07-2012, 05:01

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

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

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

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

Источник - Empire Dezign

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

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

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

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

Кнопка с водой Кнопка с водой
В этом уроке создадим прикольную кнопку, с ...
Кнопка в стиле чужих Кнопка в стиле чужих
В этом уроке будем создавать кнопку в стиле ...
Меню "Синий металл"
В этом уроке создадим стильное меню для сайта ...
Кнопка для девочек Кнопка для девочек
В этом уроке создадим привлекательную розовую ...
Хлопушка Хлопушка
В этом уроке нарисуем хлопушку, которая ...
Кнопка закладок Кнопка закладок
В этом уроке создадим прикольную кнопку для ...
Интерфейс «Mac» Интерфейс «Mac»
Я получаю много просьб о написании туториалов, и ...
Иконка – 3D коробка Иконка – 3D коробка
Учимся создавать 3D иконки. В этом уроке создадим ...
Значок Значок
В этом уроке будем создавать значок, по этому ...
Хлопушка Хлопушка
В этом уроке создадим хлопушку — инструмент, ...

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


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

 

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

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