Говорят, что создание сайта - очень длительный и трудоемкий процесс. Мы скажем - НЕТ! Ведь с новыми технологиями, такими как HTML5, CSS3, PHP и MySql можно быстро и легко научиться создавать сайты любой сложности.
Два сумасшедших веб-мастера покажут где что лежит и как этим пользоваться.
Авторизация
Новый
Забыл
Пожалуйста, заполните поля выше. Это нужно сделать обязательно, иначе ничего не получится.
Design-нинг /

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

  • Вторник, 15 февраля 2012, 14:02 |
  • Автор: fiamma |
  • Просмотров: 3489 |
  • Комментарии: 1 |
  • В закладки:
Сегодня мы с вами рассмотрим отрисовку красивого навигационного меню для вашего сайта. Для начала вам необходимо установить пакет обработки растровых изображений - Photoshop (о версии можно не волноваться, т.к. функции, которые мы будем использовать есть как в старых, так и в новых версиях пакета). Ну, давайте приступим.

После того, как мы закончим работу над нашим навигационным меню, наша работы примет примерно такой вид:

мультирум системы


Наверное вы знаете, что для того чтобы приступить к какой-либо работе, сначала разрабатывается идея. После - этам реализации.
Не знаю почему, но я всегда считал, что разработка идеи - один из самых важных этапов.

Идея: (что собой будет представлять навигационное меню?) Меню сайта - это обычных прямоугольник с указанными на нем разделами. При наведении на какой-нибудь раздел выезжает что-то типо ленточки. При этом цвет букв меню изменяется на противоположный.
Как-то так. :)))

Теперь собственно об отрисовке меню.


Для начала на необходимо создать новый документ и залить фон бежевым цветом. После этого добавить на изображение шум ( Filter > Noise > Add Noise. ) со значением шума в 1.5%
Рисуем красивое навигационное меню


Теперь давайте воспользуемся кистями из набора subtle grunge Photoshop brush для создания царапин на нашем макете. Постарайтесь сделать плавный переход царапин от шапки сайта не теряя резкости..

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


На этом этапе мы рисуем два прямоугольника - красный и черный. У черного прямоугольника регулируем прозрачность и добиваемся примерно такого эффекта:
Рисуем красивое навигационное меню


После этого деформируем красный прямоугольник ( CTRL+T ) по вашему усмотрению и обрезаем 2-а треугольника.


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


Добавляем градиент к "нашей прикольной ленточке" )


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


Далее, по внутренней стороне нашей ленты необходимо добавить рамку в 2 пикс. и подобрать ее цвет.


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


Вам не кажется что оно смотрится (меню) как-то не очень... Я знаю чего ему не хватает. Не хватает внешней тени. Значит добавляем внешнюю тень, изменяем ползунок прозрачности на значение 22%. Остальные ползунки регулируем по своему усмотрению.

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


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


Из того-же набора кистей "subtle grunge brushes" берем кисть с царапаем и ляпаем ) на наше меню... Это придаст эффект неровностей меню, уникализируя его и придавая меню неповторимые оттенки. (Во как :)

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

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


В принципе это все. Я специально не выкладываю готовые макеты для того, что бы вы самостоятельно проделали эти этапы. После этого обязательно покажите нам то, что у вас получилось. Ведь нам тоже очень интересно :)

Возможно вас заинтересует статья о создании простого web-чата.
Добавить комментарий