В этом уроке мы создадим красивую кнопку, которую можно использовать в качестве кнопки к форме обратной связи или к форме подписки на рассылку.

Материалы по теме:

• Бесплатные кнопки для сайта в стиле Web 2.0 – коллекция из 128 штук
• Обзор программ для создания кнопок для сайта

Шаг #1. Для начала создайте новый документ с разрешением 281/129 пикселей.

Заполните фон цветом: 6aa3cf. Затем два раза щелкните по слою в палитре слоев, после чего в появившемся окне нажмите “Ok” чтобы разблокировать данный слой.

Затем скачайте этот паттерн, он нам понадобится в дальнейшем при создании кнопки. Для его установки можете просто разархивировать скачанный архив и запустить файл, в результате он добавится в Photoshop.

Шаг #2. Теперь правой кнопкой щелкните по фоновому слою в палитре слоев и выберите пункт “Blending Options...” (“Параметры наложения…”).

Затем из стилей выберите пункт "Gradient Overlay" (“Наложение градиента”) и установите следующие параметры:

Шаг #3. Теперь выберите пункт "Pattern Overlay" (“Перекрытие узора”) и примените следующие параметры:

Режим: Осветление (Blend Mode: Color Dodge).

Теперь можете нажать “Ok”

Шаг #4. Теперь у вас должно быть следующее изображение:

Шаг #5. Затем выберите инструмент "Rounded Rectangle Tool" (“Прямоугольник со скругленными углами”), установите радиус округления 5 пикселей и цвет 2a425f и нарисуйте прямоугольник как показано ниже.

Затем два раза щелкните по названию этого слоя в палитре слоев и дайте ему название “Button”.

Шаг #6. Теперь правой кнопкой щелкаете по слою “Button” в палитре слоев и выбираете пункт "Blending Options..." (“Параметры наложения…”) Затем выберите пункт "Drop Shadow" (“Тень”) и установите следующие параметры:

Шаг #7. Теперь выберите пункт "Inner Glow" (“Внутреннее свечение”):

Режим: Осветление – (Blend Mode: Color Dodge)

Шаг #8. Выберите "Color Overlay" (“Наложение цвета”) и примените следующие параметры:

Шаг #9. Теперь выберите "Gradient Overlay" (“Наложение градиента”) и примените следующие параметры:

Шаг #10. И наконец выберите пункт "Stroke" (“Обводка”) и примените следующие параметры:

Положение: Внутри – Position: Inside

Теперь нажимайте “Ok”

Шаг #11. В результате у вас должно получиться изображение расположенное ниже:

Шаг #12. Возьмите инструмент “Custom Shape Tool” (Произвольная фигура) и выберите в палитре произвольной фигуры изображение конверта "Envelope 1" (“Конверт 1”), как показано ниже:

Шаг #13. Установите цвет в следующее значение: a1c9f7 и нарисуйте конверт на вашей кнопке. Назовите данный уровень "Envelope" (“Конверт”).

Шаг #14. Теперь правой кнопкой щелкаете по слою с конвертом в палитре слоев и выбираете пункт "Blending Options..." (“Параметры наложения”). Выберите пункт "Outer Glow" (“Внешнее свечение”) и установите следующие параметры настройки:

Шаг #15. Выберите пункт "Inner Glow" (Внутреннее свечение) и установите следующие параметры:

Теперь нажимайте “Ok”.

Шаг #16. Теперь у вас должно быть изображение расположенное ниже:

Шаг #17. Выберите инструмент "Text Tool" (“Горизонтальный текст”) и установите следующие параметры настроек:

Шаг #18. Теперь напечатайте текст, который Вы бы хотели видеть на данной кнопке:

Шаг #19. Теперь правой кнопкой щелкаете по текстовому слою в палитре слоев и выбираете пункт "Blending Options..." (“Параметры наложения…”) Выберите "Drop Shadow" (“Тень”) и установите следующие параметры:

Нажмите “Ok”

Шаг #20. Теперь у вас должно быть изображение расположенное ниже:

Шаг #21. Теперь выберите инструмент "Pen Tool" (“Перо”) и нарисуйте кривую фигуру белого цвета как показано ниже:

Назовите этот слой "Gloss" (“Блеск”)

Шаг #22. Теперь нажмите “Ctrl” и щелкните по слою с кнопкой “Button” чтобы создать выделение, щелкать нужно именно по иконке ( ) в палитре слоев. Тогда выберите из главного меню пункт "Selection" -> "Inverse" (Выделение -> Инверсия).

После этого растрируйте слой "Gloss", который вы рисовали инструментом “Перо”. Для этого щелкните по слою правой кнопкой мыши, в палитре слоев и выберите пункт “Растрировать слой” Затем выберите в главном меню пункт "Edit" -> "Cut" (Редактирование -> Вырезать).

Шаг #23. Установите прозрачность слоя "Gloss" в 40% и ваша кнопка готова.

Материал подготовлен порталом: webmastermix.ru
Источник

• Глянцевая кнопка
• Глянцевая иконка
• Синяя иконка
• Красивое вертикальное меню
• Набор кнопок для сайта