Стильная кнопка обратной связи

Прочитав данный урок, вы узнаете, как создать стильную кнопку обратной связи для сайта в Фотошоп. Данный урок подойдет для начинающих пользователей, где они смогут освоить новые техники работы в Фотошоп.

Стильная кнопка обратной связи:

Откройте Фотошоп и создайте документ размерами 200х200 пикселей, фон – белый, разрешение 72 пикс/дюйм. Обращаю ваше внимание на то, что реальный размер кнопки мы создадим позже.

Я хочу показать вам маленькую, но полезную хитрость в Фотошоп: нажатием клавиш Ctrl + R отобразите линейки на рабочем документе. Далее переместите направляющие ко всем краям документа. У вас должно получиться так:

Нажатием клавиш Ctrl + Alt + C вызовите окно корректировки размера холста и введите следующие значения:

В результате у нас получилась заготовка для кнопки из направляющих размером 200х200 пикселей.

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

При помощи маленькой и большой кистей с мягкими краями на новом слое дважды кликните в вверху и в центре холста.

Измените размер и положение содержимого данного слоя, подобно изображению ниже.

Фон для кнопки готов! Идем дальше.

Прямоугольником со скругленными углами (U) с радиусом 10 пикселей нарисуйте основу кнопки, опираясь на направляющие.

Переименуйте его на button bg и примените к нему такие эффекты:

Результат:

Чтобы наша будущая кнопка смотрелась естественнее, добавим немного теней и света на фон. Ниже button bg создайте новый слой и добавьте тень в виде черного прямоугольника при помощи инструмента Прямоугольная область (M).

Снимите выделение. Полученный слой назовите shadow и примените к нему фильтр Размытие по Гауссу с радиусом размытия 13 пикселей.

Немного трансформируйте верхнюю область тени и снизьте непрозрачность до 30%.

Белой мягкой кистью на новом слое в верхней области кнопки сделайте клик мышью и поменяйте режим смешивания на Перекрытие.

Сделайте копию, и верните режим наложения для копии на нормальный. Трансформируйте содержимое этого слоя и поместите его над верхней частью слоя button bg.

Далее мы будем создавать значок конверта. Выше всех слоев создайте новый, инструментом Прямоугольник (U) сделайте основу для конверта.

Переименуйте его на envelope и добавьте к нему следующие эффекты:

Результат:

Добавим остальные элементы конверта для реалистичности. Добавьте новый слой и назовите его envelope top. Выберите инструмент Многоугольник (U).

В параметрах установите такие настройки:

Образуйте треугольник и при помощи свободного трансформирования расположите его на конверте, как показано ниже:

К треугольнику примените следующие стили:

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

Сделайте копию треугольника и переименуйте его на envelope bottom. Отразите копию по вертикали при помощи свободной трансформации Ctrl + T.

Оставьте все стили, кроме обводки. Копию разместите подобно скриншоту ниже.

Между слоями с верхним и нижним треугольниками создайте новый. Кликните круглой черной кистью в центре конверта.

Кнопка обратной связи почти готова. Осталось добавить текст Contact Me. Используйте этот шрифт.

Обратите внимание, для текста я использовал темно-красный цвет, потому что хочу создать эффект тиснения. Секрет в том, что цвет шрифта должен быть на несколько тонов темнее нежели цвет фона. После применения стилей слоя эффект тиснения станет более заметным.

Примените эти стили:

Еще одна маленькая хитрость – для обводки выбирайте цвет на несколько тонов светлее фона, это еще больше подчеркнет эффект тиснения.

Финишный вариант кнопки обратной связи для сайта:

Ссылка на источник урока.