Создание почтовой кнопки в Phtoshop - 5.0 out of 5 based on 1 vote

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

Почтовая кнопка - создание кнопки для формы отправки электронных писем

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

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

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

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

1

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

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

2

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

3

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

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

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

4

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

5

 

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

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

6

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

7

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

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

8

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

9

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

10

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

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

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

11

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

12

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

13

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

14

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

15

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

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

16

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

17

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

18

 

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

19

Нажмите “Ok”

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

20

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

21

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

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

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

23

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

24

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

Рекомендуем ознакомиться:
1 1 1 1 1 1 1 1 1 1 Рейтинг 5.00 (1 Голос)