Ваш аккаунт: пройдите авторизацию

Авторизация

Пароль есть, но Вы его забыли?
Впервые на сайте? Зарегистрируйтесь!

Вы попали в мир графики и дизайна


Изюминка нашего сайта в том, что все файлы хранятся на наших серверах, поэтому Вы получаете круглосуточный доступ ко всем файлам по прямым ссылкам без регистрации! С нашим сайтом Вы забудете про файлообменники!


Чёрно-голубая панель для навигации


Чёрно-голубая панель для навигации

Этот урок научит Вас, как совмещать несколько стилей слоя. Создание красивой и простой панели навигации.

Шаг 1. Во-первых, создайте новый документ – я использовал размер 540 на 220 пикселей. Задний фон я залил черным цветом. Для этого сделайте Edit > Fill (Редактирование > Выполнить заливку) цветом #0d0d0d.

Чёрно-голубая панель для навигации

Шаг 2. Второе наше действие – это создание заднего фона для навигационных кнопок. Создайте новый слой Layer > New > Layer (Слой > Новый > Слой) и выберите инструмент Прямоугольник со скругленными углами alt(Rounded Rectangle Tool) (U). Задайте фиксированный размер 480 на 50 пикселей с радиусом 5 пикселей.

Чёрно-голубая панель для навигации

Заполните это выделение Линейным градиентом (Linear  Gradient)от цвета #151515 до цвета #050505. Используя инструмент Градиент (Gradient Tool), отмените выделение - Ctrl + D. Задайте Заливку (Fill) слоя 60% (настройка находиться под Прозрачностью (Opacity) в окне слоев). Разница между Прозрачностью (Opacity)  и Заливкой (Fill) заключается в том, что Прозрачность (Opacity)  изменяет прозрачность целого слоя, а Заливка (Fill)  изменяет прозрачность всего за исключением стилей слоев.

Чёрно-голубая панель для навигации

Шаг 3. Теперь мы будем добавлять несколько стилей слоя к навигационному заднему фону.
Layer > Layer Style > Outer Glow  (Слой  > Стиль слоя > Внешнее свечение)

 

alt

Layer > Layer Style > Stroke (Слой  > Стиль слоя > Обводка)

 

alt

Теперь Ваш документ  должен выглядеть приблизительно так:

Чёрно-голубая панель для навигации

Шаг 4. Следующим шагом будет добавление кнопок. Создайте новый слой и, используя инструмент  Прямоугольник со скругленными углами alt(Rounded Rectangle Tool) (U), создайте выделение 150 на 40 пикселей (опять с радиусом 5 пикселей) на левой стороне навигационной панели.

Чёрно-голубая панель для навигации

Заполните это выделение Линейным градиентом alt(Linear  Gradient) от #323232 до #161616 используя градиентный инструмент. Установите Заливку (Fill)  этого слоя на 50%.

Чёрно-голубая панель для навигации

Шаг 5. Я применил 3 стиля слоев для этих кнопок, чтобы придать им глубины и более красивого вида.
Layer > Layer Styles > Inner Glow  (Слой > Стиль слоя > Внутреннее свечение)

 

alt

alt

alt

Теперь Ваша навигационная панель должна выглядеть приблизительно так:

Чёрно-голубая панель для навигации

Шаг 6. Выберите текстовый инструмент и добавьте текст – я использовал шрифт Bell Gothic Std, Полужирный (Bold), 20 pt, Четкое (Crisp), #ffffff.

Чёрно-голубая панель для навигации

Шаг 7. Теперь повторите шаги для создания кнопок с двумя следующими кнопками – я решил сделать среднюю кнопку другого цвета для выделения. Голубые используемые цвета - #14b9ef и #054573.

Чёрно-голубая панель для навигации

Шаг 8. Так как мы установили Заливку (Fill)   слоев 50-60%, то  мы можем отрегулировать задний фон, и он будет полупрозрачным – внизу я поместил Радиальный градиент alt(Radial Gradient) с цветами, что используются в теме Vista.

Чёрно-голубая панель для навигации


Внимание! Вы находитесь на сайте как гость! Зарегистрируйтесь или авторизируйтесь...

Нет времени на регистрацию? Можете войти на сайт через ВКонтакте! Это просто, быстро и удобно!

Похожие материалы

комментарии (2)

#1 написал: vfrcbv | 25 мая 2009 19:21
     

Спс за статейку)) хотелось бы по больше таких урок во веб дизайну !!)
#2 написал: naikon | 25 мая 2009 20:44
     

vfrcbv,
Учтём.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.