Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Кто вы?
Всего ответов: 313
КтО ОнЛаЙн

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Веб-дизайн - Рисуем красивую навигацию на сайт

Рисуем красивую навигацию на сайт

Выглядит очень эффектно!

Рисуем красивую навигацию на сайт

Создайте новый файл:

sleek-blue-nav_2.jpg

Залейте фон градиентом от #10365a к #2070bf

sleek-blue-nav_3.jpg

sleek-blue-nav_4.jpg

Создайте новый слой и нарисуйте белый прямоугольник

sleek-blue-nav_5.jpg

Смените режим смешивания для этого слоя на Soft Light и параметр Fill подведите до 25%

sleek-blue-nav_6.jpg

Создайте новый слой и выделите инструментом Rectangular Marquee полоску в один пиксель. После этого залейте полоску градиентом тех же цветов, только в обратном направлении. Мы нарисовали разделитель для ссылок

sleek-blue-nav_7.jpg

Смените режим смешивания для его слоя на Soft Light

sleek-blue-nav_8.jpg

Скопируйте слой столько раз, сколько Вам нужно разделителей

sleek-blue-nav_9.jpg

Создайте новый слой и выделите прямоугольную область между разделителями. Залейте ее зеленым цветом

sleek-blue-nav_10.jpg

Теперь нарисуйте такой же прямоугольник другого цвета в соседнем пространстве

sleek-blue-nav_11.jpg

И третий

sleek-blue-nav_12.jpg

И четвертый

sleek-blue-nav_13.jpg

Создайте новый слой, выделите прямоугольную область внизу нашего хедера и залейте ее цветом, подходящим к фону (я выбрал #03346c)

sleek-blue-nav_14.jpg

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

sleek-blue-nav_15.jpg

Скопируйте этот слой и переместите копию наверх, прямо сверху цветных прямоугольничков

sleek-blue-nav_16.jpg

Напишите слева свой текст

sleek-blue-nav_17.jpg

По желанию добавьте еще текста

sleek-blue-nav_18.jpg

Теперь снабдите текстом навигационные кнопки

sleek-blue-nav_19.jpg

Осталось только добавить сопроводительных картинок к кнопкам

sleek-blue-nav_20.jpg

sleek-blue-nav_21.jpg

Рисуем красивую навигацию на сайт

Готово! ;)



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


Просмотров: 1292 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Популярные уроки
 
 
 
 
 
 
 
 
 
 

Хостинг от uCoz