Как сделать кнопку для сайта за три минуты

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


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

Как сделать кнопку для сайта?

Откройте фотошоп и создайте новый слой. Сделать это можно задействовав сочетание клавиш Ctrl + N, либо нажав на кнопку “Файл”, а затем “Создать”. После этого выставляем размеры нового слоя: ширину делаете 150 пикселей, высоту 50 пикселей, содержимое фона — прозрачный. Жмете ОК:


Далее выберите инструмент “Прямоугольник со скругленными углами”, радиус делаете 10 пикселей и выделяете область:


Теперь нужно нажать правой кнопкой мыши по выделенной области, и выбрать “Образовать выделенную область”. Радиус растушевки делаете два пикселя и жмете ОК:


Заливаете заготовку любым цветом. Для этого нужно выбрать инструмент “Заливка”, и залить область:


Придадим нашей кнопке больше реалистичности. Для этого два раза кликните по слою, и в появившимся окошке активируйте тиснение и контур:


Выберите подходящий контур и жмите ОК:


По желанию можно придать нашей кнопке градиент. Для этого кликните два раза по слою, и активируйте наложение градиента, выберите градиент уже из существующего набора, либо создайте новый, затем жмите ОК:


Сочетанием клавиш Ctrl + D снимите выделение, и напишите на кнопке произвольный текст, или же сразу сохраните ее. Внимание, сохранять нужно в формате PNG!!!
Вот такая кнопочка у нас получилась:

Если Вам нужен Psd исходник этой кнопки, отпишите в комментариях, я вышлю его Вам на почту.
Если хотите, можете посмотреть мое видео по созданию такой кнопки, которое я записал специально для Вас:


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

Ваш комментарий

  1. Кирилл очень оригинальный способ создания свой кнопки и ,действительно, быстрый. Надо тоже поэкспериментировать.Спасибо за статью.Новых интересных статей.Удачи.

    • Кирилл Тараненко:

      Спасибо Зинаида, очень рад что Вам понравилась статья. Скоро еще будет подобная статья по созданию кнопок. Практика в фотошопе никогда не помешает

  2. Интересный пост! будем экспериментировать!

  3. Кирилл, специально искал статью в тему. Меня немного другая кнопка для сайта интересует. Твоя кнопочка вверх-вниз. Поделись как сделал. Если кодами, то можно и статейку.

  4. А почему бы не использовать в качестве фона для кнопки CSS стили? Думаю на сегодняшний день это не составит никаких проблем.