Как нарисовать красивую кнопку для сайта

В этом уроке мы будем рисовать кнопку для сайта определенного стиля. Чтобы идти в ногу со временем стиль был выбран современный, используемый на многих сайтах.

Кнопку нарисовать в фотошопе не проблема. Собственно я покажу метод на примере данной кнопки. Используя знания вы сможете создавать собственные кнопки, подключая и используя свои стили.

Главное чтобы кнопка правильно вписывалась в дизайн сайта или дизайн того, где вы будете её использовать.

Как нарисовать красивую кнопку для сайта

Создайте новый документ в фотошопе. Кнопку мы нарисуем с помощью инструмента Прямоугольник со скругленными углами.

Как нарисовать красивую кнопку для сайта

Теперь необходимо настроить инструмент. Цвет я использовал оранжевый — #ff8b00. А радиус углов установил 4 пикселя.

Как нарисовать красивую кнопку для сайта

Теперь рисуем саму кнопку. Размеры делайте с учетом того, какой примерно длинны будет надпись на кнопке — чуть больше, чтобы были уши.

Как нарисовать красивую кнопку для сайта

Теперь сделаем небольшой объем в стиле flat. Парадокс, но объем будет в плоском стиле. Для этого сделайте копию слоя с прямоугольником (CTRL+J) и тот прямоугольник который ниже по слоям — передвиньте его на 2-3 пикселя вниз в рабочей области. Поменяйте ему на цвет на более темный, в данном случае — #bf6800

Как нарисовать красивую кнопку для сайта

Результат должен выглядеть так. В принципе вы можете делать объем больше, все зависит на сколько передвинете нижний прямоугольник. По сути это кнопка под кнопкой.

Как нарисовать красивую кнопку для сайта

Теперь чтобы кнопка была интересней и сочнее — я предлагаю добавить стиль Градиент на верхний прямоугольник. Для этого нажмите двойным кликом на слой с прямоугольником и найдите стиль Наложение градиента.

Необходимо выполнить настройку — угол наклона 90 градусов.

Как нарисовать красивую кнопку для сайта

А также сам градиент, цвета — #ff8c00 и #ffcc3f.

Как нарисовать красивую кнопку для сайта

Кнопка преобразилась.

Как нарисовать красивую кнопку для сайта

Осталось добавить надпись. Я использовал шрифт Myriad Pro и белый цвет. Размер и цвет шрифта — также нужно выбирать исходя из дизайна где будет находиться ваша кнопка.

Как нарисовать красивую кнопку для сайта

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

Для этого сделайте копию слоя с надписью и ту которая ниже передвиньте на 1 пиксель вниз и поменяйте цвет — #be6d00. Точно также мы делали с прямоугольниками.

Как нарисовать красивую кнопку для сайта

Итог. Надпись на кнопке стала более читаемой.

Как нарисовать красивую кнопку для сайта

Однако если это не устраивает, можно надпись сделать просто черным цветом. Здесь уже на ваш выбор.

Как нарисовать красивую кнопку для сайта

Кроме того, вы можете сделать любые цвета и градиенты на кнопке. Пример разных цветов:

Как нарисовать красивую кнопку для сайта

Как нарисовать красивую кнопку для сайта

Как нарисовать красивую кнопку для сайта

Скачать PSD исходник кнопки (78 Кб)

Автор урока — Александр

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *