В этом уроке будет рассказано, как создается стандартный стильный блок для бокового меню со скругленными углами и аккуратным 3D-эффектом в верхней части, для использования в различных макетах ваших сайтов. Урок небольшой, но скорее компактный и эффектный, что только на руку новичкам.

1 Шаг

Первое, что нужно сделать — создать новый документ в Photoshop. Для этого урока вам понадобится документ размера 400×400 px.

2 Шаг

Теперь залейте фон черным цветом (#000000), после чего можно двигаться дальше.

3 Шаг

Теперь, используя инструмент Rounded Rectangle Tool с радиусом закругления 10px, нанесите на рабочую область на новом слое вот такой прямоугольник. Стили мы ему зададим далее.

4 Шаг

Теперь выполните клик правой клавишей мыши по слою с прямоугольником и выберите пункт Blending Options, задав в выпавшем окне стили, показанные ниже.

5 Шаг

У вас должен получиться вот такой результат:

6 Шаг

Следующее, что вы должны сделать — создать при помощи Rectangular Marquee Tool выделение, как показано ниже и залить его на новом слое белым цветом (#FFFFFF).

7 Шаг

Конечно же, оно не пригодится нам белого цвета, поэтому вызовите меню Blending Options для этого слоя и задайте там следующие стили:

8 Шаг

У вас должно выйти нечто, похожее на рисунок:

9 Шаг

Теперь нам нужно создать загибы для нашего “баннера”. Это придаст нашему меню дополнительный объем. С помощью инструмента Polygonal Lasso Tool создайте выделение, как показано ниже и залейте его на новом слое белым цветом (#FFFFFF).

10 Шаг

После этого к этому слою нужно применить некоторые стили:

11 Шаг

Далее примените эти же шаги для другой стороны баннера и у вас должно получиться нечто, похожее на иллюстрацию:

12 Шаг

Добавьте заголовок к нашему меню. Напишите что-нибудь на нашем оранжевом “баннере”:

13 Шаг

Белый — немного не тот цвет, поэтому нас выручают в который раз гибкие настройки стилей.

14 Шаг

Мы получили довольно приличный результат — это уже начинает мне нравиться.

15 Шаг

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

16 Шаг

Вышло грубовато, поэтому снизьте Opacity нижнего слоя до 28%, и оцените результат. Должно выйти нечто, похожее:

17 Шаг

Вот и все! Осталось добавить небольшую иконку и текст с вашими ссылками.