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

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

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

     В статье Оформление группы ВКонтакте я писала, что научилась делать вики разметку, изготовив простенькое меню, картинка для которого показана в статье. Но, для того, чтобы группа выглядела более привлекательно, требуется нарисовать меню в фотошопе, что и пришлось мне освоить за последнее время. Тут и пригодилось умение сделать кнопку для сайта.

     Давайте перейдем к делу. Рассмотрим самый простой вариант изготовления.

     1. Открываем Фотошоп. В верхнем горизонтальном меню открываем «Файл – > Новый» и в появившемся окне задаем размер, например, 200х80 пикселей. В содержимом фона выберете «Прозрачный». В дальнейшем, для изготовления кнопки не бойтесь задать больший размер. Так вам будет удобнее и проще рисовать или писать. По окончании всегда можно уменьшить полученную кнопку до нужного размера.

     2. Далее на боковой вертикальной панеле выбираем инструмент «прямоугольник со скругленными углами». На кликабельной картинке можно видеть, где находится данный инструмент. Затем выделяем желаемую область, например, так, как показано на картинке.

     3. В горизонтальном меню выбираем «Слой -> Стиль слоя». Отметьте галочками поля «тень, градиент и обводка». Можете поиграть с параметрами, чтобы лучше себе все представить и затем выбрать необходимые по своему вкусу. А пока получится так, как на картинке.

     Если вам хочется чего-то более интересного и красивого, но в вашем фотошопе небольшой выбор стилей, то можно скачать наборы стилей на www.photoshop-master.ru и добавить в фотошоп. Это делается очень просто. После того, как скачали нужные стили, их надо разархивировать. Далее заходим в горизонтальное меню «Редактирование -> Управление библиотеками». В открывшемся окне из набора библиотек выбираем «Стили» и нажимаем «Загрузить». Затем в папке, в которой сохранили стили, нажать на нужный стиль. Готово, теперь можете использовать понравившиеся стили. Для удобства все стили можно вывести на боковую панель справа таким образом: заходим в горизонтальное меню «Окно» и ставим галочку на слове «Стили».

     4. Теперь украшаем одним из приглянувшихся стилей и получаем, например, такую картинку.

     5. Осталось только сделать надпись по своему вкусу. Выбираем понравившийся шрифт, к которому так же применяем желаемые стили. У меня получилось, вот так, как на картинке.
Сохранить лучше в PNG или GIF, потому что эти форматы сохраняют цвет и прозрачность.

     6. Маленькое дополнение. Вместо инструмента «прямоугольник со скругленными углами» можно выбрать инструмент «Овальная область», тогда ваша кнопка может выглядеть так, как в верхней части статьи. Фантазируйте, как вам угодно.

     7. Как сделать так, чтобы ваша кнопка вела на необходимую страницу. Ссылка на кнопку имеет вид: < а href="URL ВАШЕЙ СТРАНИЧКИ">< img srс=" URL БАННЕРА " >< /а>. Этот код надо установить в том месте сайта, где хотите видеть вашу кнопку.

     Зная такой простой способ изготовления кнопки для сайта, всегда можно поэкспериментировать, чтобы сделать более сложный вариант. Удачи!