Привет читателям блога egofilin.ru!
Используете ли вы на своих проектах красивые кнопки и графические элементы наряду с текстовыми ссылками. Признаться, я сам до недавнего времени мало уделял внимания этому вопросу и не придавал особого значения красивым кнопкам. Но согласитесь, что аккуратно и гармонично размещенная кнопка или графическая ссылка приятно радуют глаз, а иногда по ней так и хочется щелкнуть. Может быть, это только мои ассоциации, но ничего не могу поделать, нравится мне все красивое, и только отсутствие художественного таланта мешает сделать сайт более привлекательным с этой стороны.
Сегодня мы с помощью онлайн генератора научимся делать красивые кнопочки для сайта, при использовании которых на своих ресурсах, содержимое будет принимать более привлекательный вид. Также разберем, для тех, кто не в теме, как же эти красивые кнопки установить на сайт (как создать сайт) после их создания.
Конечно, можно воспользоваться фотошопом и большинство вебмастеров и рисунки, и кнопки делает именно в этой программе. Ну а те, кто не знаком с этим монстром, или никак не начнет его использовать, как я, например, что прикажете делать?
А для этого и существуют онлайн генераторы, в которых можно быстренько сделать себе кнопочки и разместить на своем ресурсе и все это бесплатно.
Итак, знакомьтесь с одним из них.
As Button Generator – онлайн генератор для создания красивых кнопок на сайте
Правда он на английском языке, но пусть вас это не пугает, т.к. мы разберем все пункты меню и для чего они предназначены. Переходим по ссылке на сайт и начинаем творить.
Разберем первую вкладку Color/Form, само название говорит за себя, здесь можно изменять форму и цвет кнопки в режиме онлайн.
Color – ее цвет.
Width (ширина) – с помощью ползунка можно регулировать в необходимых для вас пределах.
Height (высота), также можно регулировать и изменять размер кнопки по высоте.
Border Color – цвет границы (рамки), если она присутствует.
Round strength – скругление углов вашего макета, меняется от 0 (кнопка в виде прямоугольника) и далее по шкале до размеров эллипса.
Border thickness – толщина границы вашего эскиза кнопки.
Соответственно, меняя положения ползунков в данном разделе меню, вы можете выбрать такую картинку, которая вам по душе.
Переходим к следующему пункту меню для создания бесплатной кнопки на сайт, которая называется Gradation Type.
Здесь можно выбрать эскиз из 5 присутствующих образцов. Вид под номером 3, как видите, это чистая кнопка без выделенной области.
Следующая вкладка Stripe – на объект накладываются полосы и в данном меню можно менять их расположение, расстояние между ними, толщину. Попробуйте, сами поменяйте положение на присутствующих шкалах и выберете то изображение, которое более приглянется.
Если вы не хотите, чтобы на вашей кнопке присутствовали полосы, то пометьте Don’t use не использовать. По умолчанию стоит в положении Use (использовать полоски).
Следующий пункт носит название Filter, очень много настроек, переместитесь на данную вкладку и сами попробуйте поэкспериментировать, много различных эффектов и оттенков создаваемого эскиза.
Раздел Image, как вы, наверное, догадались, позволяет накладывать различные картинки на создаваемую кнопку. Переходите в данный пункт, перед вами две клавиши Insert Image (с помощью нее добавляете изображение с компьютера) и Delete Selected Element (нажатием на нее удаляете нанесенные рисунки.
Хотелось бы отметить, что после того, как вы поместите на кнопку какой то графический элемент с компьютера, его размеры уже нельзя поменять, поэтому о размерах позаботьтесь заранее.
Пункт «Text» позволяет наносить необходимый текст на создаваемую в онлайн генераторе красивую кнопку.
При нажатии на “insert text” на созданном эскизе выскочит текст на английском edit me (измени меня), теперь подводим мышку к картинке, появляется белый крестик. Нажатием левой клавишей мыши перетаскиваем текст в то место, где будет отображаться надпись. Внизу вы увидите панель редактирвания как в word, здесь меняем надпись на свою, выбрав соответствующий шрифт, размер и т.д. Теперь нажатием на “Apply”, любуемся созданной надписью.
Чем мне приглянулся данный онлайн генератор, так это тем, что между вкладками можно перемещаться туда-сюда и менять и размеры, и цвет, и оттенки, и текст кнопки, пока не нажмете кнопку Save, т.е. пока не сохраните полученное изображение. Например, налепили вы на кнопку картинку или текст, а они оказались великоваты и выходят за границы, либо наоборот малы, можно вернуться на соответствующую вкладку и увеличить размеры создаваемого шедевра, либо уменьшить.
Вот, собственно, и все. Мы создали красивую кнопку для сайта с помощью онлайн генератора As Button Generator. Сохраняем созданный рисунок на компьютере нажатием кнопки “Save”.
Теперь нам нужно созданную картинку добавить в то место на сайт, где мы ее хотим созерцать.
На скорую руку я набросал несколько рисунков в генераторе, отнюдь не претендующих на высокое художественное мастерство, возможно у вас получится красивее, все в ваших руках, дерзайте.
Как добавить кнопку на сайт
Что такое по большому счету красивая кнопка на сайте? Как правило, это ссылка, ведущая куда-либо посетителя, будь то другая страница, либо сторонний ресурс. А посему у нее должен быть прописан адрес, куда она направляет, а также должен быть прописано место хранения данного изображения на хостинге.
Для этого наш рисунок необходимо закачать на хостинг (как выбрать хостинг для сайта) в соответствующую папку. Если у вас блог на wordpress, то в редакторе просто добавляем медиафайл нажатием на соответствующую кнопку и закачиваем его на сервер, рисунок автоматически закачается, и смотрим там же в панели ее адрес.
Вот как будет выглядеть код любой картинки в режиме html, если она является ссылкой.
1 | <a href="АДРЕС СТРАНИЦЫ"></a> |
Вот этот код и размещаете в том месте, где хотите видеть отображение созданной кнопки.
Можете почитать следующие статьи, где я описывал, как размещать баннер на сайте, они будут вам полезны, если вы испытываете затруднения с размещением изображений на своем ресурсе.
Как поместить баннер в шапку сайта
На этом разрешите откланяться. В сегодняшней статье вы узнали, как с помощью онлайн герератора As Button Generator сделать красивые кнопки и добавить их на сайт.
Чтобы быть всегда в курсе выхода новых статей на блоге, советую подписаться на обновления и получать анонсы постов на адрес электронной почты.
Успехов вам!
В заключении посмотрите видео о том, как хомячок троллит гаишника, по моему веселенькое видео