Приветствую Вас на блоге вебмастера и манимейкера в одном лице, на стринацах которого я поделюсь своими наблюдениями в области создания и продвижения сайтов.

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

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

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

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

rounded rectangle tool

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

Делаем форму

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

фигура округлые края

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

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

делаем градиент

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

b4

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

основа под кнопку

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

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

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

Кнопка отправить

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

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

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

Скачать (размер архива 380 кб)

набор кнопок для сайта

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

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

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

Комментарии (4):

  1. Спасибо, я полный новичок в веб-дизайне. Большая часть урока получалась с первого раза. Есть только один вопрос. Мне нужно сделать кнопку анимированной (gif), как мне сделать в фотошопе, чтобы она мигала и привлекала внимание? Если можно, то подскажите конкретно, чтобы я с первого раза смог сделать (версия вотошопа CS 3, интерфейс английский).

    • Здравствуйте, Владимир. Рад, что урок вам пригодился. Что касается анимации, то в верхнем меню выберите пункт Window –> Animation. Внизу откроете блок, в его правом нижнем углу нужно нажать на пиктограмму (прямоугольничек с несколькими кадрами).

  2. Татьяна 23.03.2014 в 14:33

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

  3. Алекс 10.03.2015 в 10:36

    Абсолютно бесполезный урок. Тот, кто эти настройки сможет найти по этому описанию – тот и без урока сделает кнопку.

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