http://forum.rendermarket.com/tp-images/Image/word/1.gif

Привет в этом уроке я расскажу как можно сделать замечательную менюшку

Шаг первый!

С помочью инструмента Rounded rectangle tool, нарисуйте прямоугольник и залейте #455E6A цветом.
http://forum.rendermarket.com/tp-images/Image/word/2.gif

Примените к слою следующие стили:

Drop shadow
http://forum.rendermarket.com/tp-images/Image/word/3.gif

Inner glow
http://forum.rendermarket.com/tp-images/Image/word/4.gif

Gradient overlay
http://forum.rendermarket.com/tp-images/Image/word/5.gif

В итоге получим такой эффект :
http://forum.rendermarket.com/tp-images/Image/word/6.gif

Шаг второй!

Сделайте вот такое выделение и залейте его белым цветом.
http://forum.rendermarket.com/tp-images/Image/word/7.gif

http://forum.rendermarket.com/tp-images/Image/word/8.gif

И примените следующие эффекты:
Drop shadow
http://forum.rendermarket.com/tp-images/Image/word/9.gif

Gradient
http://forum.rendermarket.com/tp-images/Image/word/10.gif

http://forum.rendermarket.com/tp-images/Image/word/11.gif

Теперь нужно подписать нашу менюшку, я использовал Gill Sans MT, размер 13px, цвет (#FFFFBE)
http://forum.rendermarket.com/tp-images/Image/word/12.gif

Шаг третий!

Сделайте с помощью Rectangle Tool выделение в 1 пиксель для отделения категорий меню.
http://forum.rendermarket.com/tp-images/Image/word/13.gif

Шаг четвертый!

Залейте выделение цветом #506874. Теперь опустите выделение на 1 пиксель вниз и залейте цветом #38525E.
Сделайте еще одно прямоугольное выделение:
http://forum.rendermarket.com/tp-images/Image/word/15.gif

Шаг пятый!

Залейте выделение цветом #445C68, а потом  градиентом
http://forum.rendermarket.com/tp-images/Image/word/16.gif

Получим в итоге что-то такое:
http://forum.rendermarket.com/tp-images/Image/word/17.gif

Теперь можно добавить иконок к категориям и получим во такое меню:
http://forum.rendermarket.com/tp-images/Image/word/1.gif

Перевод урока: natio
Оригинал урока: toxiclab.org