Как сделать кнопку для сайта за три минуты
Привет читателям блога. Сегодня я хотел бы Вам показать, как создаются кнопки для сайта. В своей недавней статье, я показывал, как меняется фон сайта, ну а теперь поговорим о кнопках.
Создание своей кнопки, придаст Вашему шаблону оригинальности, и выделит его среди серой массы однотипных тем. В данном уроке Вы научитесь создавать компактную кнопку в программе фотошоп. Итак, хватит предисловий, начинаем!
Как сделать кнопку для сайта?
Откройте фотошоп и создайте новый слой. Сделать это можно задействовав сочетание клавиш Ctrl + N, либо нажав на кнопку “Файл”, а затем “Создать”. После этого выставляем размеры нового слоя: ширину делаете 150 пикселей, высоту 50 пикселей, содержимое фона — прозрачный. Жмете ОК:
Далее выберите инструмент “Прямоугольник со скругленными углами”, радиус делаете 10 пикселей и выделяете область:
Теперь нужно нажать правой кнопкой мыши по выделенной области, и выбрать “Образовать выделенную область”. Радиус растушевки делаете два пикселя и жмете ОК:
Заливаете заготовку любым цветом. Для этого нужно выбрать инструмент “Заливка”, и залить область:
Придадим нашей кнопке больше реалистичности. Для этого два раза кликните по слою, и в появившимся окошке активируйте тиснение и контур:
Выберите подходящий контур и жмите ОК:
По желанию можно придать нашей кнопке градиент. Для этого кликните два раза по слою, и активируйте наложение градиента, выберите градиент уже из существующего набора, либо создайте новый, затем жмите ОК:
Сочетанием клавиш Ctrl + D снимите выделение, и напишите на кнопке произвольный текст, или же сразу сохраните ее. Внимание, сохранять нужно в формате PNG!!!
Вот такая кнопочка у нас получилась:
Если хотите, можете посмотреть мое видео по созданию такой кнопки, которое я записал специально для Вас:
На этом у меня все. Теперь Вы знаете, как сделать кнопку для сайта и можете использовать ее для своих шаблонов или сайтов. Также можете почитать статью про создание углового баннера.Если Вам понравилась статья, то поделитесь ею в социальных сетях, а также подпишитесь на обновления блога, ведь скоро я напишу еще одну статью про то, как создавать кнопки для сайтов, только она будет уже немного по красивее этой. Все благодарности просьба выражать в комментариях.
Подпишитесь на обновления блога Life-Webmaster.ru и получайте в числе первых новые статьи про создание блога, раскрутку и заработок на нем!
Подписка по RSS
Ваш комментарий
Кирилл очень оригинальный способ создания свой кнопки и ,действительно, быстрый. Надо тоже поэкспериментировать.Спасибо за статью.Новых интересных статей.Удачи.
Спасибо Зинаида, очень рад что Вам понравилась статья. Скоро еще будет подобная статья по созданию кнопок. Практика в фотошопе никогда не помешает
Интересный пост! будем экспериментировать!
Кирилл, специально искал статью в тему. Меня немного другая кнопка для сайта интересует. Твоя кнопочка вверх-вниз. Поделись как сделал. Если кодами, то можно и статейку.
А почему бы не использовать в качестве фона для кнопки CSS стили? Думаю на сегодняшний день это не составит никаких проблем.
Да, это тоже возможно, но сложнее.
Согласен, тем более, что сейчас существует большое количество генераторов, которые можно переделать под свои нужды =)