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

Шаг 1:

Создайте новый документ.
Возьмите инструмент - прямоугольное выделение (Rectangular Marquee Tool) и сделайте прямоугольное выделение как показано на скриншоте:

Шаг 2:

Обратитесь в меню Select, далее Modify > Smooth и установите следующие параметры:

Результат:

Шаг 3:

Установите в качестве основного цвета: #1A7CA1,
а фоновый цвет: #09A5D7:

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

Нажмите CTRL + D чтобы снять выделение.

 

Шаг 4:

Нажмите CTRL + T чтобы вызвать инструмент свободная трансформация. Зажмите клавиши SHIFT + CTRL + ALT, разместите курсор мыши около нижнего правого узла.

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

Нажмите ENTER чтобы завершить трансформацию.

Результат:

Шаг 5:

Дважды щелкните на окошке с этим слоем, чтобы применить следующие стили:

Drop Shadow - отбросить тень:

Inner Shadow - внутренняя тень:

Результат:

Шаг 6:

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

Затем создайте новый слой - нажмите на клавиатуре CTRL + SHIFT + ALT + N.

Перетащите этот новосозданный слой ПОД существующий:

Залейте этот слой черным цветом (#000000).

Обратитесь в меню Filter, затем Blur > Gaussian Blur и установите следующие значения:

Нажмите букву 'V' на клавиатуре, чтобы вызвать инструмент перемещения и нажмите на верхнюю стрелку 3 раза, чтобы перенести это выделение выше на 3 px:

Установите прозрачность слоя (opacity) на 60%:

Результат:

Шаг 7:

Теперь создайте новый слой (SHIFT + CTRL + ALT + N) поверх слоя с нашей прямоугольной кнопочкой (новый слой должен расположиться выше всех остальных)

Зажмите CTRL и кликните по слою с прямоугольной кнопкой, чтобы сделать выделение вокруг нее.

Обратитесь в меню Filter, затем Modify > Contract и установите там значение в 1 или 2 px:

Установите в качестве основного цвета белый (#FFFFFF), возьмите инструмент градиент () и заполните это выделение градиентом от белого к прозрачному (white to transparent):

Шаг 8:

Нажмите CTRL + D, чтобы убрать выделение.

Нажмите CTRL + T, чтобы вызвать инструмент свободная трансформация.

Зажмите SHIFT + CTRL + ALT и, как уже делали ранее, и перетащите верхний средний узел немного внутрь:

Нажмите ENTER.

Шаг 9:

Поменяйте этому слою режим смешивания на "Overlay", и уменьшите прозрачность слоя (opacity) до 68%:

Результат:

Шаг 10:

Создайте новый слой поверх всех остальных.
Затем возьмите инструмент - выделение эллипсом () и сделайте такое же выделение, как на скриншоте:

Установите основной цвет белый (#FFFFFF), возьмите инструмент градиент и залейте выделение градиентом от белого к прозрачному (white to transparent):

Снимите выделение CTRL + D.

Вызовите инструмент трансформации CTRL + T.

Разместите мышь на среднем нижнем узле, кликните и потяните немного вверх, чтобы сократить блик:

Нажмите ENTER.

Результат:

Шаг 11 он же последний:

Осталось добавить текст на кнопку.
Установите основной цвет: #07577A и выберите подходящий шрифт, например "BM Sly". Размер - 10 pt.

У вас получилось?

Мы надеемся, что вам понравился данный урок и вы научились рисовать привлекательные и заманчивые веб-кнопки для ваших сайтов.