Кнопка для сайта за 5 минут

Кнопка для сайта за 5 минут

Всем привет. Сегодня мой рассказ о том, как сделать кнопку для сайта, особенно не напрягаясь. До сих пор я наивно полагала, что вся эта красота делается исключительно в Фотошопе, для этого необходимо разбираться в нем на достаточно высоком уровне, а если знания не бог весть какие –Сделать кнопку то это будет просто рамка, залитая определенным цветом, в лучшем случае с использованием градиента. До сих пор у меня в сайдбаре были именно такие кнопки, о которых говорят «два притопа – три прихлопа». Но сегодня с утра мне вдруг захотелось это дело как-то облагородить, и, оказалось, сделать это до смешного просто.

В интернете существует достаточно много сервисов по созданию кнопок. Принцип работы у них практически одинаков, но есть и нюансы. На одном сервисе, например, мне очень понравился результат — кнопка получилась красивая, но с надписью. Конечно, если кнопка для блога выполняет свою обычную функцию, надпись по-любому нужна. А если, как в моем случае, это просто декорация – разделитель виджетов в сайдбаре, то кнопка должна быть без надписи, но с градиентом и закругленными краями – все чин по чину. Как следует порывшись в интернете, я нашла наконец сервис, где желания клиента учтены в полном объеме, и всевозможных вариантов для того, чтобы быстро сделать вполне приличную кнопку для сайта, достаточно.

Как сделать кнопку, а главное — где?

Зовут мою находку — As Button Generator. Зайдя на главную страницу, вы тут же увидите образец — вполне симпатичную полосатую кнопку, а под ней – предоставляемые сервисом варианты настроек. Самое приятное здесь – это Интерфейс сервиса наглядность. Буквально все изменения, производимые вами с помощью ползунка или изменения цветовой гаммы, тут же отражаются на подопытной кнопке. Вообще, сервис предлагает шесть вариантов настроек, так что рассмотрим все по-порядку:

Color/Form (цвет/форма) Основа будущей кнопки – цвет, размер, оформление углов:

Panel's Background Color – цвет фона, на котором будет находиться кнопка. По умолчанию он – прозрачный. Если это вас не устраивает – поменяйте на желаемый цвет, щелкнув по белому окошку левой кнопкой мыши;

Color – цвет будущей кнопки;

Width – Height — с помощью ползунка задаем нужные размеры, причем максимум, на который можно рассчитывать – 600?200 пикселей или 21?7 см;

Color Border – цвет окантовки;

Round Strength – степень закругленности углов. Если не использовать – углы останутся прямоугольными;

Border Thickness – ширина окантовки. Двигаете ползунок – полоса становится шире.

Gradation Type (Тип Градации) Играем со светом:

Здесь возможны варианты перехода цвета от темного к светлому, т. е. подбор оттенка, придающего кнопке эффект блика. Если использовать Type3 – никаких бликов не будет.

Stripe (Полосы) Вариации на тему полоски:

Thickness – ширина полос;

Interval - расстояние между полосами;

Alpha – степень придания промежуткам между полосами оттенка основного цвета;

Angle – расположение полос: вертикальное, горизонтально, по диагонали.

Bevel Filter (Фильтр скашивания) Использование оригинальных эффектов:

Здесь нужно учесть два момента: во-первых – перед использованием необходимо включить данную функцию (Enable — поставить галочку) и, во-вторых, если в дальнейшем вы планируете добавить на кнопку надпись либо изображение, выбор эффектов стоит оставить напоследок, иначе все добавляемые элементы не будут подвижными – вы не сможете варьировать их расположение. Если вы уже успели воспользоваться фильтрами — есть вариант их просто отключить.

Image (Изображение) Добавляем изображение.

Чтобы поместить на кнопку изображение, его нужно заранее подготовить и сохранить на компьютере. В чем заключается подготовка? Прежде всего, в определении размеров. Если изображение окажется больше, чем нужно, то во вкладке Color-Form вы сможете увеличить размер самой кнопки, а вот его размер уменьшить не удастся. Двигать изображение по поверхности кнопки можно с помощью мышки, но это лишь при условии, что вы либо еще не использовали предусмотренные в программе эффекты (фильтры), либо их отключили. Если вариант с изображением вам просто не нравится – выделите его и нажмите Delete Selected Element.

Insert Text (Текст) Надпись на кнопке.

Во вкладке Текст нажимаем Insert Text, и на кнопке появляется надпись Edit me (исправь меня). Чтобы заменить его на нужный вам текст, щелкните по надписи левой кнопкой мыши, и тогда она отобразится уже внизу, в редакторе, где вы и сможете написать то, что хотите. Редактируется текст как и в любой аналогичной программе – цвет, шрифт, размер. Далее, когда вы нажмете Apply, ваша надпись появится на кнопке, но, возможно, в несколько усеченном виде. В моем случае отобразилось слово «первая», а вот «кнопка» куда-то потерялась. Чтобы надпись появилась целиком – потяните рамку с маркерами вправо и вы увидите все, что написали. Если от результата вы не в восторге – выделите написанный текст и нажмите Delete Selected Element. Попробуйте написать что-нибудь другое.

Save (Сохранить) Сохраняем кнопку на компьютере.

Сохранить кнопку можно, нажав команду Save ( Сохранить). В момент сохранения вашей кнопке уже будет присвоено имя, и если оно вас не устраивает – пожалуйста, придумайте другое, только не забудьте при этом указать для нее расширение. png.

Если As Button Generator вам не понравился (не верю!), можете попытать счастье и сделать кнопку для сайта на других аналогичных сервисах, например на Сooltext. Если честно, в его работу я особенно не вникала, поскольку пользоваться им все равно не буду. Кнопочки здесь получаются тоже достаточно симпатичные, но вот украсить их подходящей картинкой не удастся, в отличие от As Button Generator, где, на мой взгляд, имеются все необходимые функции для придания кнопке вполне достойного вида. Вот что получилось у меня практически за пять минут:

Первая кнопка

Если так же, как и я, вы до сих пор пытались сделать кнопку для вашего сайта в Фотошопе, тратя на это массу времени и нервов, а результат оставлял желать много лучшего – плюньте на эту затею и пользуйтесь бесплатным on-line сервисом As Button Generator. Кому-то, возможно, представленный результат покажется достаточно скромным, но ведь это только начало. Так, проба пера. А для новичка – прекрасная возможность вполне достойного оформления блога.

Еще один on-line генератор кнопок

И в заключение – еще один сервис, по скорости генерирования кнопки, что называется, впереди планеты всей. Для работы с ним и двух минут будет вполне достаточно. Заходите на Da Button Factory. В левой части – все, что касается текста, в правой – размер и цвет кнопки. Если хотите сделать чистую кнопку без надписи, просто сотрите Your text here и ничего не пишите. Образцы вариантов находятся в разделе Examples, но даже то, что вы выберете, можно слегка видоизменить – закруглить края, поменять форму самой кнопки – получить квадрат, прямоугольник или эллипс и, разумеется, цвет и текст меняется очень просто. Результат ваших манипуляций виден сразу, как и в случае с сервисом As Button Generator. А потому, если вас устроит кнопка без затей – данный сервис тоже вполне подойдет.

Вот так, не напрягаясь и не тратя массу времени на общение с Фотошопом, можно достичь вполне приемлемых результатов, используя либо As Button Generator, либо Da Button Factory. Тем, что получилось у меня, я довольна вполне. Очень надеюсь, что какой-либо из приведенных сервисов вам обязательно пригодится, и сделанная в них кнопка для сайта или блога понравится вашим посетителям.


Карта сайта


Информационный сайт Webavtocat.ru