Профессиональная кнопка навигации - Школа Photoshop
Прозрачная кнопка фотошоп Прозрачная кнопка фотошоп

Профессиональная кнопка навигации

14.08.2007Категория урока: Веб-графика

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

Фотошоп прозрачная кнопка

Приблизительное время выполнения: 10 минут

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

Фотошоп прозрачная кнопка

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

Прозрачная кнопка фотошоп

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

Прозрачная кнопка фотошоп

Чтобы выбрать тип градиента, когда цвет переходит в прозрачный фон, выберите вторую иконку слева. Кликните ОК

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

Прозрачная кнопка фотошоп

Нажмите ОК

Photoshop прозрачная кнопка

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

Фотошоп прозрачная кнопка

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

Фотошоп прозрачная кнопка

Нажмите ОК

Прозрачная кнопка фотошоп

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

Прозрачная кнопка фотошоп

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

Прозрачная кнопка фотошоп

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

Photoshop прозрачная кнопка

Готово! Фотошоп прозрачная кнопка

Источник: http://www.time2photoshop.com/professional-navigation-button




Смотрите также:

Понравился урок? Поделитесь им в социальных сетях:



5 комментария(-ев) к уроку “Профессиональная кнопка навигации”

  1. самое интересное для меня и было пропущено, как сделать такой наклонный блок :!:

    дизайн

  2. Спасибо за комментарий! Такой наклонный блок делается очень просто — путем добавления двух косых параллельных линий и стирания фона в мешающих частях рисунка. ;)

    Кирилл Гурбанов

  3. А нельзя ли подробно об этом? :mrgreen: Просто меня тоже интересует… :razz: :mrgreen:

    Марк

  4. Нужный урок

    Val

  5. Получилось красиво, спасибо за урок.

    Владимир

Прокомментировать урок

 


Rambler's Top100