Красивое вертикальное меню для сайта в Photoshop
В этом уроке вы узнаете, как создать красивое вертикальное меню для сайта при помощи Adobe Photoshop.
Материалы по теме:
Выберите инструмент "Rounded Rrectangle Tool" (U) - "Прямоугольник со скругленными углами" установите радиус в 20 px, цвет #1d97bc, а также другие настройки как показано ниже и нарисуйте прямоугольную фигуру.
Теперь выберите инструмент "Pen Tool" (P) - "Перо", затем зажмите клавишу CTRL и кликните на границе прямоугольника, в результате появится выделение. Далее зажмите клавишу Alt и при помощи скроллинга можете увеличить фигуру для более удобной работы с ней.
Не отпуская клавишу Alt, нажмите на точку 1, а затем 2, в левом верхнем углу прямоугольника, после этого отпустите Alt и нажмите на точку 3. Теперь нажмите на клавишу CTRL и кликните по точке 4, удерживая левую кнопку мыши отпустите клавишу CTRL, а нажмите клавишу SHIFT и перетащите стенку нашего прямоугольника чтобы получился прямой угол. Смотрите изображение ниже:
Сделайте то же самое с нижним правым углом, в результате у вас должна получится следующая фигура.
Примените следующие Blending Options - Параметры наложения. (Слой >> Стиль слоя >> Параметры наложения...)
Drop Shadow - Тень. Blend Mode: Multiply - Режим: Умножение.
Outer Glow - внешнее свечение. Blend Mode:Screen - Режим: Осветление; Technique: Softer - Метод:Мягкий
Stroke - Обводка. Position:Outside - Положение:Снаружи;
Добавьте название меню в самом верху. (Настройки смотрите на изображении ниже).
Далее выберите инструмент Pencil Tool (B) - Карандаш. Создайте новый слой Слой >> Новый >> Слой... (SHIFT + CTRL + N) и проведите горизонтальные линии, одну верхнюю черного цвета, вторую белого цвета. Измените, прозрачность слоя до 18%.
Дублируйте этот слой нажатием сочетания клавиш CTRL + J и выбрав инструмент "Перемещение" (CTRL + V) переместите этот слой ниже на 27 px. Повторите дублирование и перемещение 5 раз.
Примечание переводчика:
Для того чтобы легче было делать линии лучше увеличьте масштаб прямоугольника, для этого нажмите клавишу ALT и увеличьте масштаб при помощи скроллинга. Для того чтобы линии были прямыми нажмите клавишу SHIFT, а затем рисуйте линию.
Создайте новый слой и при помощи инструмента "Прямоугольная область" (M) сделайте между двумя линиями небольшое выделение и заполните его цветом #75c5de. Тоже самое сделайте и для других позиций меню.
Примечание переводчика:
Заполнить выделение можно при помощи инструмента "Заливка" (G).
Теперь используя инструмент Horizontal Type Tool (T) - "Горизонтальный текст" напишите текст.
Теперь необходимо сделать ховер эффект. При помощи инструмента "Прямоугольная область" сделайте прямоугольное выделение верхнего пункта меню, затем создайте новый слой Слой >> Новый >> Слой... (SHIFT + CTRL + N) и разместите его под слоем с текстом и используя Gradient Tool (G) - инструмент "Градиент" сделайте градиентную заливку.
Окончательный вариант:
Материал подготовлен проектом: webmastermix.ru
Источник
- Подробности
-
Опубликовано: 09 Март 2010
-
Обновлено: 20 Сентябрь 2013
-
Просмотров: 22155
