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

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

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

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

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

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

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

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

кнопка

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

сделать кнопку для сайта в фотошопе

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

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

гламурная кнопка

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

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

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

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

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


Читайте также:

Как сделать кнопку для сайта” - комментариев: 12

  1. Как это я пропустила эту тему про баннеры и водяные знаки? Как раз теперь понадобилось, спасибо. Только ссылка на анимированный баннер в этой статье не открывается. )
    А ссылка под кнопкой ставится в редакторе картинок, когда она вставляется в блог?

  2. Маргарита, рада, что информация была полезной. Сейчас проверила, ссылки работают нормально. Ссылка с первой картинки анимированного баннера ведет на страницу подписки на блог, а ссылка под картинкой «как сделать баннер» (если я правильно поняла), ведет на соответствующую статью.

  3. Неа ), я про первый абзац этой статьи, там одно ссылка нерабочая. А вопрос в том, как нарисованный баннер вставить в блог, чтобы он вел куда надо?

  4. *** Спасибо, Маргарита, за указание на ошибку (исправила) и вопрос. Дописала 7-й пункт про код для кнопки.
    *** Не за что, Евгений, пользуйтесь на здоровье.

  5. Хороший урок, вполне дословно и понятно, кстати спасибо за сайт с библиотеками.

  6. А кто подскажет как сделать чтобы при нажатии на кнопку вылазило окошечко(например) в котором можно было бы сделать еще кнопки?

  7. А без фотошопа можно? Вродь сервисы какие-то есть. Мож кто ссылочку такого сервиса даст? АУ!!!

  8. Приятно и радует, когда информация оказывается кому-то полезной.

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *