Профессиональная кнопка навигации
Создаем pro.кнопку, идеально подходящую для любого сайта!

Приблизительное время выполнения: 10 минут
Начните, создав документ 217х145 пикселей с прозрачным фоном.

Теперь инструментом Paint Bucket (заливка — G) и серым цветом залейте фон. Вот, что получится (без светло-серой рамки!)

Теперь нам надо добавить градиент. Layer > Layer Styles > Gradient Overlay. Чтобы настроить цвета заливки, кликните по цветному прямоугольнику, подписанному как Gradient. Откроется окно, где Вы сможете настроить цвет градиента

Чтобы выбрать тип градиента, когда цвет переходит в прозрачный фон, выберите вторую иконку слева. Кликните ОК
Установите параметр Opacity на 44%. Если в цветном прямоугольнике черный цвет находится справа, а прозрачный фон — слева, оставьте галочку Reverse. Если же черный цвет слева, а прозрачный фон — справа, снимите ее.

Нажмите ОК

Создайте новый слой. Выберите инструмент Rectangle Tool и цвет #d69b17 и нарисуйте прямоугольник сверху так, чтобы он немного выходил по ширине за пределы документа.

Теперь добавьте к этому слою Layer > Layer Style > Inner Shadow:

Нажмите ОК

Выбрав инструмент прямоугольного выделения, выделите половину оранжевого прямоугольника и нажмите CTRL+U, чтобы вызвать окно Hue/Saturation. Установите значения, как на рисунке ниже и нажмите ОК

Вот, что должно получиться

Мы почти закончили. Осталось только добавить текст и все, что захочется. Я добавил изображение ноутбука, текст и пару линий. Вот, что у меня получилось:

Готово!
Источник: http://www.time2photoshop.com/professional-navigation-button
Смотрите также:

самое интересное для меня и было пропущено, как сделать такой наклонный блок
Август 19th, 2007
Спасибо за комментарий! Такой наклонный блок делается очень просто — путем добавления двух косых параллельных линий и стирания фона в мешающих частях рисунка.
Август 19th, 2007
А нельзя ли подробно об этом?
Просто меня тоже интересует…
Ноябрь 23rd, 2008
Нужный урок
Август 25th, 2009
Получилось красиво, спасибо за урок.
Май 13th, 2011