Красивое вертикальное меню для сайта в Photoshop - 3.5 out of 5 based on 2 votes

В этом уроке вы узнаете, как создать красивое вертикальное меню для сайта при помощи Adobe Photoshop.

Красивое вертикальное меню для сайта

Материалы по теме:

Выберите инструмент "Rounded Rrectangle Tool" (U) - "Прямоугольник со скругленными углами" установите радиус в 20 px, цвет #1d97bc, а также другие настройки как показано ниже и нарисуйте прямоугольную фигуру.

 

1

Теперь выберите инструмент "Pen Tool" (P) - "Перо", затем зажмите клавишу CTRL и кликните на границе прямоугольника, в результате появится выделение. Далее зажмите клавишу Alt и при помощи скроллинга можете увеличить фигуру для более удобной работы с ней.

Не отпуская клавишу Alt, нажмите на точку 1, а затем 2, в левом верхнем углу прямоугольника, после этого отпустите Alt и нажмите на точку 3. Теперь нажмите на клавишу CTRL и кликните по точке 4, удерживая левую кнопку мыши отпустите клавишу CTRL, а нажмите клавишу SHIFT и перетащите стенку нашего прямоугольника чтобы получился прямой угол. Смотрите изображение ниже:

2

Сделайте то же самое с нижним правым углом, в результате у вас должна получится следующая фигура.

3

Примените следующие Blending Options - Параметры наложения. (Слой >> Стиль слоя >> Параметры наложения...)

Drop Shadow - Тень. Blend Mode: Multiply - Режим: Умножение.

4

Outer Glow - внешнее свечение. Blend Mode:Screen - Режим: Осветление; Technique: Softer - Метод:Мягкий

5

Stroke - Обводка. Position:Outside - Положение:Снаружи;

6

Добавьте название меню в самом верху. (Настройки смотрите на изображении ниже).

7

 

Далее выберите инструмент Pencil Tool (B) - Карандаш. Создайте новый слой Слой >> Новый >> Слой... (SHIFT + CTRL + N) и проведите горизонтальные линии, одну верхнюю черного цвета, вторую белого цвета. Измените, прозрачность слоя до 18%.

Дублируйте этот слой нажатием сочетания клавиш CTRL + J и выбрав инструмент "Перемещение" (CTRL + V) переместите этот слой ниже на 27 px. Повторите дублирование и перемещение 5 раз.

Примечание переводчика:
Для того чтобы легче было делать линии лучше увеличьте масштаб прямоугольника, для этого нажмите клавишу ALT и увеличьте масштаб при помощи скроллинга. Для того чтобы линии были прямыми нажмите клавишу SHIFT, а затем рисуйте линию.

8

Создайте новый слой и при помощи инструмента "Прямоугольная область" (M) сделайте между двумя линиями небольшое выделение и заполните его цветом #75c5de. Тоже самое сделайте и для других позиций меню.

Примечание переводчика: 
Заполнить выделение можно при помощи инструмента "Заливка" (G).

9

Теперь используя инструмент Horizontal Type Tool (T) - "Горизонтальный текст" напишите текст.

10

 

Теперь необходимо сделать ховер эффект. При помощи инструмента "Прямоугольная область" сделайте прямоугольное выделение верхнего пункта меню, затем создайте новый слой Слой >> Новый >> Слой... (SHIFT + CTRL + N) и разместите его под слоем с текстом и используя Gradient Tool (G) - инструмент "Градиент" сделайте градиентную заливку.

11

Окончательный вариант:

12

Материал подготовлен проектом: webmastermix.ru
Источник

Рекомендуем ознакомиться:
1 1 1 1 1 1 1 1 1 1 Рейтинг 3.75 (2 Голосов)