Создаем красивую кнопку для сайта в Фотошопе

Каждому сайту нужны нужны кнопки, а чтобы поставить их на сайт, необходимо сначала разработать дизайн в фотошопе. В этом уроке я расскажу как просто сделать в 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 и сдвигаем на одну точку вправо и вниз. Результат ниже.

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

Скачать PSD-шаблоны кнопок для сайта (набор из 8 штук)

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

Видео-урок на ту же тему

Если вам лень читать текст и смотреть скрины и вы привыкли к видео-урокам, то можете посмотреть несколько хороших мануалов от сторонних авторов.

Похожие публикации на блоге:

Создание кнопки для сайта в фотошопе

Урок по Photoshop. Создаём красивую кнопку для сайта

Интересные записи

• Библиотека Интернет Индустрии
• Создание логотипа для сайта онлайн
• Фотошоп как сделать фото ярче
• Урок III Как раскрасить рисунок в Photoshop
• Рисуем настенное граффити в Photoshop
• Свежие новости веб-дизайна и разработки