Веб дизайн: создаем стильный блок бокового меню

В этом уроке будет рассказано, как создается стандартный стильный блок для бокового меню со скругленными углами и аккуратным 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 Шаг
Вот и все! Осталось добавить небольшую иконку и текст с вашими ссылками.

Поделитесь уроком
Правовая информация
В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».
Переведено с сайта psdvibe.com, автор перевода указан в начале урока.