Каждому сайту нужны нужны кнопки, а чтобы поставить их на сайт, необходимо сначала разработать дизайн в фотошопе. В этом уроке я расскажу как просто сделать в Photoshop объемные и плоские кнопки для веб-сайта, а также дам возможность скачать их шаблоны в psd формате.

Начнем с того, что создадим новый документ, на котором будем работать. Я сделал серенький фон (почему-то часто попадается такой фон на сайтах, где нужны кнопки). На панели инструментов выбираем Rounded Rectangle Tool (прямоугольник со скругленными краями). Показал на скриншоте ниже.

Вверху экрана выставляем настройку радиуса на уровень 9px, либо можете поиграться с другими числами (чем больше число, тем больше будут загруглены края).

Делаем форму

Создаем при помощи выбранного инструменты такую фигуру.

На панели слоев выбираем слой с нашей фигурой и добавляем ей стили Gradient и Stroke (для этого внизу панельки Layers нажимаем на кнопку Functions и выбираем один из перечисленных ранее стилей, второй настроем уже в открывшейся панели).

В настройках Gradient выставляем прозрачность 100%, цвет градиента от #0e6aab до #73d8fe, а также стиль Linear и угол 90 градусов. Чтобы было нагляднее, сфоткал этот экран.

Настраиваем теперь Stroke – это будет рамка или ободок для нашей кнопки. Делаем максимально тонкой – выставляем всего 1px, “Color” ставим такой же, как внизу градиента – #0e6aab.

Получаем вот такую основу, с которой нам предстоит совсем чуть-чуть поработать.

Добавляем текстовую надпись

Добавляем на нашу основу текст. Например, при нажатии должно отправляться письмо, поэтому сделаем надпись “Отправить”. Шрифт я выбрал Arial размера 18 и начертанием Bold, цвет белый.

Также, ниже создаем копию надписи, но Coloe #1b75af и сдвигаем на одну точку вправо и вниз. Результат ниже.

Создадим еще белый слой-подложку и сдвинем его по аналогии с текстом. Это поможет немного отделить объект от фона, добавит объем.