Раскрась свой мир! Качай кисти, шрифты и много полезностей

Красивая навигация для сайта [от SigTutorials]

Уроки » Дизайн

DrozdOff

27 марта 2008

Напечатать

Красивая навигация для сайта [от SigTutorials]

Этот простой в выполнении урок научит Вас создавать красивую и элегантную панелб навигации для Вашего Web-сайта.


Шаг 1.
Создайте новый файл с параметрами, как на рисунке:
Красивая навигация для сайта [от SigTutorials]


Шаг 2.
Залейте фон вертикальным градиентом. Цвета такие: от #10365a к #2070bf. Получится фон в синих тонах.
Красивая навигация для сайта [от SigTutorials]


Шаг 3.
В правой части изображения с помощью Rectangle Tool нарисуйте белый прямоугольник.
Красивая навигация для сайта [от SigTutorials]


Шаг 4.
Смените режим смешивания для этого слоя на Soft Light и параметр Fill смените до 25%.
Красивая навигация для сайта [от SigTutorials]


Шаг 5.
Создайте новый слой и выделите инструментом Line Tool полоску в один пиксель. После этого залейте полоску градиентом тех же цветов, только в обратном направлении. Это будет служить разделителем для ссылок. Смените режим смешивания этого слоя на Soft Light.
Красивая навигация для сайта [от SigTutorials]


Шаг 6.
Скопируйте слой с разделителем и разместите на картинке столько раз, сколько Вам потребуется.
Красивая навигация для сайта [от SigTutorials]


Шаг 7.
Теперь, с помощью Rectangle Tool сделайте нечто подобное:
Красивая навигация для сайта [от SigTutorials]


Шаг 8.
Создайте, опять же таки с помощью Rectangle Tool, прямоуголное выделение внизу шапке и залейте подходящим цветом. (автор выбрал #03346c)
Красивая навигация для сайта [от SigTutorials]


Шаг 9.
Создайте новый слой и выберите инструмент Pencil. В качестве цвета выберите светлый подходящий к другим цвет (автор выбрал #7dbfff). Нарисуйте линию высотой в один пиксель поверх только что созданного прямоугольника.
Красивая навигация для сайта [от SigTutorials]


Шаг 10.
Скопируйте этот слой и переместите копию наверх, прямо сверху цветных прямоугольничков.
Красивая навигация для сайта [от SigTutorials]


Шаг 11.
Напишите какой-либо текст слева.
Красивая навигация для сайта [от SigTutorials]


Шаг 12.
Настало время подписать каждую из наших кнопочек:
Красивая навигация для сайта [от SigTutorials]


Шаг 13.
Для пущей красоты можно добавить иконок:
Красивая навигация для сайта [от SigTutorials]


Готово!


Источник: SigTutorials
Alexey Koresh DrozdOff,
Специально для www.ColorWorld.org victory



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

Просмотрено: 2185 раз

Добавил: Bestduck | ICQ: -- (25 октября 2008 22:28) | #1


Публикаций: 0
Комментариев: 1

Спасибо)

Добавил: petrelyudmila | ICQ: -- (13 ноября 2008 12:31) | #2


Публикаций: 0
Комментариев: 1

ЖЕСТЬ!

Информация

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


Поиск по сайту

Популярное

Друзья сайта

www.FlexZERO.ru

Наш код:

Реклама

Публикации друзей

01Навигация

02Архив публикаций

03Опрос на сайте

Какие уроки добавлять в первую очередь?

Спец. эффекты
Комп. графика
Эффекты с текстом
Обработка фото
Дизайн
Мне интересны только файлы


04Календарь

«    Июль 2010    »
ПнВтСрЧтПтСбВс
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 

05Рекламный блок