Быстрое создание веб-меню сайта в Фотошоп.

И ещё один материал о создании вертикальных меню навигации сайта. Некоторое время назад "Блог фотошоп-дилетанта"  опубликовал статью "Как в Фотошопе нарисовать вертикальное меню для сайта", но в ней не было рассмотрено создание дизайна меню, а рассматривалось всего лишь оформление построенного, простого, не маркированного списка ссылок. Сегодня рассмотрим создание вертикального меню веб-сайта с некоторым простым дизайнерским подходом.
 В качестве фоновой картинки я возьму заранее приготовленный документ имитирующий часть страницы сайта.

Это так называемый sidebar - боковая колонка страницы сайта. По обыкновению здесь располагаются различные информационные блоки и меню навигации по сайту. 

Подпишем блок - "Навигация" и выглядит это вот таким образом. 

Ну а теперь сделаю непосредственно фоны для вертикального списка меню. Для этого воспользуюсь инструментом "прямоугольник со скруглёнными углами".   Фон для ссылок наношу на отдельном слое. 

Теперь когда фон для ссылок готов мне нужно как то "окультурить" его.  Сделаю выделение и на новом,пустом слое нанесу линейный градиент (белый - прозрачный)

Сниму выделение и сделаю выделение уже овальной областью. Выглядит это вот так. 

Растушёвка выделенной области например 0, и вырежу часть слоя. Получилось вот так. 

Опять же залью линейным "чёрно - прозрачным"  градиентом "белый" слой.

Сделаю дубликат этого слоя и помещу его на  противоположную сторону блока. 

Можно задать любой размер для этих слоёв,   а также произвольную форму при помощи инструмента "деформация". Так же можно раскрасить созданные слои в любой цвет при помощи инструмента изображение-коррекция-цветовой тон\насыщенность-"тонирование".

Что бы выделить фон для каждой ссылки, сделаю обводку каждого элемента. Цвет обводки может быть произвольным. У меня, например, будет чёрный.

Можно добавить ещё и картинку какую нибудь для разнообразия.. Например вот так. 

Подпишу ссылки чтобы видеть как будет выглядеть меню навигации. 

Можно добавить общую тень для фона списка ссылок. Например вот так.

Можно украшать сделанное до бесконечности, но не теряя чувства меры. 

Как обычно статья не является прямым указанием к беспрекословному исполнению, а написана в целях ознакомления с возможностями тех или иных инструментов графического редактора Фотошоп. Удачи! :)