.: Рисуем WEB – Меню с помощью PhotoShop :.
Создадим новый документ и установим параметры как показано на рисунке
Включим отображение линейки и сетке, так же установим привязку к сетке и линиям разметки
Настроим размер сетки через меню Edit
Далее выставим линии разметки будущего меню
После этого воспользуемся инструментом выделение
Выделим часть нашего документа шириной и длинной как будущее меню
и зальем его черным цветом
Назовем наш слой «Menu» и добавим на него маску
После этого необходимо добавить стиль слою
В редакторе стилей будем использовать 3-ри опции со следующими параметрами, а это:
Gradient Overlay
Щелкнем два раза на полоску градиента и установим цвета и ползунки перетекания в следующее положение
Следующая функция
Inner Glow
и наконец
Stroke
После этого нам необходимо сохранить наш новый стиль по имеем Style 1

Вот мы в результате получили новый стиль.
Теперь жмем ОК и наблюдаем следующею картину
Теперь необходимо разметить наше меню на части, так называемые сегменты в которых мы в дальнейшем расположим надписи ну и.т.д. Все это делается при помощи линий разметки (что бы появились линии разметки надо нажать на поле линейки и удерживая кнопку зажатой перетянуть на документ).
После этого нам необходимо разрезать наше меню на сегменты, воспользуемся инструментом указанном рисунке.
Выставляем его на линии разметки и жмем клавишу «Delete», и получаем следующее
После этого этапа постараемся включить фантазию и сделать наше меню более интересным. Будем резать меню, с предварительной разметкой векторными фигурами, воспользуемся одной из них.
Установим параметры
Установим параметры
Создадим форму и отредактируем ее с помощью следующих инструментов
инструменты необходимые для редактирования векторных форм
Ну и так форма готова. Далее необходимо сделать выделения по данной форме. Для этого выберем инструмент «Path Selection Toll» и щелкнем на нашу форму, она выделится цветом После этого нажмем на форме правой кнопкой мыши и выберем следующее.
установив параметры
получаем следующее
Жмем клавишу «Delete» и наслаждаемся
Аналогичные действия можно проделать и остальными более мелкими деталями меню.
После этого этапа попробуем сделать боковое меню
Создадим новый слой и назовем его «G_Menu»
Для создания меню, воспользуемся нашем любимым инструментом
и создадим векторную форму
затем сделаем выделение формы и сохраним его
Сделаем заливку слоя «Shift + F5»
Теперь давайте добавим нашему боковому меню стиль
Выберем наш уже ранее сохраненный Style 1.
жмем ОК.
Далее воспользуемся инструментом указном на рисунке и разрежем наше меню на кусочки 
Проведем с нашем меню следующие операции. Загрузим наше ранее сохраненное выделение.

Скруглим выделение вовнутрь на 10 px.
ну вот пришло побаловаться клавишей «Delete»
После баловства создадим новый слой
при помощи инструмента выделения, выделим кусок слоя, что будет служить подложкой для меню.
Зальем выделение черным цветом и создадим для этого слоя маску
Передвинем наш слой
Применим нашему слою стиль. 
При помощи этого инструмента предадим нашему меню вкус.
Теперь попробуем подрисовать что то типа проводов.
Создадим новый слой
При помощи инструмента «Pen Tool» нарисуем воображаемую проводку.
Искривим нашу прямую.
Далее выберем кисть и установим параметры
После жмем на кревой правой кнопкой мышки и делаем
Ну вот результат. Правда далек от совершенства.
Дублируем слой изменяем кривую ну и так далее в результате вот что получается
Потом создаем новый слой и добавим мелкие детали. Предыдущий слой обрабатываем инструментом выделения и клавишей «Delete»
Добавляем текст ну и все, почти….
Я думаю пришло время доводить все штрихи до конца…
Создадим слой blik_1
Добавим маску
и установим тип перетекания
Добавим стиль

Теперь добавим блик с верху. Создадим слой и назовем его blik_2
Воспользуемся известным инструментом с параметрами.
применим к слою
Установим значение слоя Blik_2
Все…
Исходник можно скачать здесь в формате *.PSD ---> web-menu.zip <---
Автор .: art-designer :. сайт: http://art-designer.ucoz.ru
|