Создание почтовой кнопки в Phtoshop
В этом уроке мы создадим красивую кнопку, которую можно использовать в качестве кнопки к форме обратной связи или к форме подписки на рассылку.
Материалы по теме:
Шаг #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
Источник
- Подробности
-
Опубликовано: 14 Январь 2010
-
Обновлено: 07 Сентябрь 2013
-
Просмотров: 7652