Рисуем кнопку «Отправить» в Photoshop

Рисуем кнопку «Отправить» в Photoshop

red-btn-sendВ этом уроке мы научимся рисовать кнопку «Отправить письмо» в Photoshop. Данный урок очень простой, на его выполнение уйдет минут 10.
 
Для начала посмотрим финальный результат, чтобы Вы знали как будет выглядеть наша кнопка:

final-result

Итак, начнем.

Шаг 1.

Создаем новый документ в Photoshop. Я выбрал размер 500 х 500px и белый фон. Вы можете выбрать любой цвет, какой Вам больше нравится.

Шаг 2.

Берем инструмент Прямоугольник со скругленными углами (Rounded reqtangle Tool) с радиусом скругления 20 пикселей, и рисуем прямоугольник с скругленными краями:

but-ps-1

 
Шаг 3.

Теперь перейдем в Стили слоя (Layer Style) и применим к нашему прямоугольнику следующие стили:

but-ps-2 Тень (Drop Shadow)

but-ps-3Внутреннее свечение (Inner Glow)

but-ps-4Наложение градиента (Gradient Overlay)

but-ps-5Глянец (Satin)

but-ps-6Обводка (Stroke)

Шаг 4.

Теперь нарисуем иконку в виде почтового конверта. Для этого выберите инструмент Произвольная фигура, и найдите там фигуру в виде конверта:

but-ps-7

Шаг 5.

Вставьте фигурку на наш прямоугольник как показано на рисунке:

but-ps-8

Шаг 6.

Теперь зайдите в стили слоя и придайте нашему конверту стили с такими настройками:

but-ps-9 Наложение цвета (Color Overlay)

but-ps-10Обводка (Stroke)

Шаг 7.

Теперь берем инструмент линия толщиной 1 пиксель и рисуем линию как на рисунке ниже:

but-ps-11

Шаг 8.

Идем в стили слоя и применяем стили с такими настройками:

but-ps-12

Шаг 9.

Дублируем Ctrl+J нашу линию и копию сдвигаем вправо на 1 пиксель, и меняем цвет как на скриншоте:

but-ps-13

На данном шаге наша кнопка должна выглядеть так:

but-ps-14

Шаг 10.

Теперь, берем инструмент Текст и пишем на нашей кнопке текст «Отправить письмо» и придаем ему стили с такими настройками:

but-ps-15 Тень (Drop Shadow)

but-ps-16Наложение цвет (Color Overlay)

Шаг 11.

Создаем новый слой поверх всех остальных, берем инструмент Прямоугольная область создаем выделение и заполняем его белым цветом:

but-ps-17

Шаг 12.

Выбираем слой, который мы только что нарисовали и залили белым цветом. Далее идем в меню Редактирование — Трансформирование — Деформация и немного меняем форму нашего прямоугольника, я сделал так:

but-ps-20

Шаг 13.

Как только вы применили деформацию, не уходя с этого слоя в окне со слоямизажмите клавишу Ctrl и кликните левой кнопкой мыши (ЛКМ) по слою с нашей кнопкой, то есть по нашему самому первому прямоугольнику. На рисунке ниже показано куда нужно кликнуть:

but-ps-18

В результате у вас должно получиться такое выделение:

but-ps-19

Шаг 14.

Не снимая выделения и не уходя с этого слоя, нажмите Ctrl+Shift+I, а затем нажмите клавишу Delete. Затем нужно понизить непрозрачность этого слоя (белый прямоугольник) до 22%.

На этом все, у вас должна получиться такая же кнопка, как и у меня:

final-result

Данный урок закончен, спасибо за внимание.
Автор урока: Артур Хабиров

Урок для Вас подготовлен командой REDSTAR