Кнопки для сайта в онлайн генераторах Сooltext и Dabuttonfactory

Приветствую вас, уважаемые читатели блога Vorabota.ru! Можно ли утверждать, что онлайн генераторы , на которых можно сделать кнопки для сайта, являются бесполезными ресурсами? Или, наоборот, они очень нужные и полезные? Вопрос, конечно, спорный, и, наверное, нет смысла много рассуждать на эту тему. С одной стороны, генераторы кнопок имеют довольно ограниченные возможности и могут загубить в нас творческую личность. С другой стороны, они упрощают нашу жизнь и экономят наше время.

В любом случае, если кому-то понадобятся создать кнопки для сайта или еще для какой-то другой цели, всегда есть возможность выбора. И неважно, что будет использоваться для достижения цели, онлайн генератор кнопок для сайтов или какая-то графическая бесплатная программа, а, возможно, даже Photoshop. Главное заключается в том, что задачу эту каждый постарается решить быстро и эффективно.

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

Генератор кнопки для сайта Cooltext Как сделать кнопки для сайта в графическом онлайн генераторе кнопок Cooltext.

По моему мнению, этот онлайн сервис вполне заслуживает внимания. Из предложенных на этом сервисе образцов кнопок можно выбрать понравившийся вариант и, перейдя в редактор Cooltext, внести различные изменения. Так как этот онлайн генератор англоязычный, для тех, у кого не стоит в браузере переводчик текстов онлайн, я разместил скриншот внешнего вида редактора с переводом.

Графический редактор кнопок cooltext

Любой, даже неопытный пользователь сможет без особого труда разобраться с этим сервисом. Хочу сказать, что, кнопка «рендер кнопки» нажимается чтобы увидеть результат (откроется новое окно), только после внесения изменений в текст. Затем можно вернуться обратно для последующего редактирования. Все остальные изменения, которые вы будете делать в настройках кнопки, будут происходить автоматически прямо в окне этого редактора. Из большого количества шрифтов (есть те, которые поддерживают и кириллицу) можно выбрать любой, который вам понравился. Достаточно навести курсор на образец шрифта под надписью «шрифт» и нажать левую кнопку мыши. В открывшемся окне выбрать нужный вам шрифт и нажать «использовать» (Use). Все остальные манипуляции с размером и цветом шрифта, а также формой кнопки делаются, как угодно душе. Хочу добавить лишь несколько нюансов.

Окно размера кнопки

Когда в окне «размер» кнопки установлены галочки «автоматический» для ширины и высоты, размер кнопки будет подгоняться под высоту и ширину текста. Убрав галочки, можно самостоятельно задавать размер кнопки.

 

 

 

 

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

 

 

 

 

 

 

 

 

 

 

В открывшемся окне будет три изображения кнопки для сайтов. Самая нижняя, третья кнопка при наведении на нее курсора будет показывать заданный вами ей эффект «Mouse Over». Для того чтобы кнопка сохранилась с таким эффектом, надо загрузить две верхние кнопки себе на компьютер и скопировать Html код внизу кнопок в любой текстовой редактор. В моем случае получились вот такие две кнопки и Html код.

Образец кнопки

 

<img src="/cooltext590780346.png" onmouseover="this.src='/cooltext590780346MouseOver.png';"
onmouseout="this.src='/cooltext590780346.png';"/>

Как устанавливается кнопка на сайт (блог).

Для того чтобы разместить кнопу на сайте, достаточно забросить эти два изображения в корневой каталог сайта, к примеру в папку images, и указать до них путь. В своем примере я для удобства переименовал даже кнопки, получилась вот такая картина.

 

<img src="http://vorabota.ru/ images/ knopka-1.png" border="0" onmouseover="this.src='http://vorabota.ru/ images/ knopka-2.png';" onmouseout="this.src='http://vorabota.ru/ images/ knopka-1.png';" />

А для того чтобы эта кнопка для сайта начала работать как ссылка, можно оформить ее примерно вот таким образом:

<a href="http://cooltext.com/Buttons" target="_blank"> <img src="http://vorabota.ru/ images/ knopka-1.png" border="0" onmouseover="this.src='http://vorabota.ru/ images/ knopka-2.png';" onmouseout="this.src='http://vorabota.ru/ images/ knopka-1.png';" /> </a>

Бесплатный генератор графики

Теперь, если кликнуть по этой кнопке, вы перейдете на страницу бесплатного генератора кнопок для сайтов Gooltext. Думаю, как сделать кнопки для сайта с помощью этого онлайн сервиса, разберется даже начинающий пользователь. Хочу добавить, что на этом же онлайн сервисе кроме кнопок для сайтов можно создавать логотипы (как и на сервисе баннеров Banner Fans), включая анимированные. Принцип создания логотипов такой же простой, как и при создании кнопок.

Генератор кнопок для сайта Da Button FactoryКак создать кнопки для сайта в редакторе Da Button Factory.

Следующий онлайн сервис генерации кнопок, которым предлагаю воспользоваться моим читателям, – это Da Button Factory. Как и на сервисе Cooltext, сделать оригинальные и красивые кнопки в генераторе Da Button Factory не представляет никаких трудностей. Не могу сказать почему, но этот генератор у меня вызывает больше симпатий. Возможно, из-за его удобного и большого интерфейса. К тому же, скорость редактирования кнопок происходит намного быстрее, чем на сервисе Cooltext. А основной принцип создания кнопок для сайтов на этом генераторе практически ничем не отличается от его конкурента. Хотя отличия, конечно же, есть. К примеру, при выборе вида сохранения изображения кнопки в окне «Output type» (Тип выхода) можно выбрать и сохранить изображение в виде файла таблиц стилей CSS. А при выборе сохранения в виде графического изображение появится возможность выбрать и формат png, gif, jpeg и ico.

Выбор формата сохранения изображения

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

Напоследок хочу предложить самый, на мой взгляд, лучший онлайн сервис, на котором можно создать кнопки для сайтов: генератор As Button Gen. Попробуйте сами сделать на нем кнопки, и вы в этом убедитесь.

На этом хочу завершить свой рассказ об онлайн генераторах кнопок, которые, буду надеяться, принесут пользу моим читателям. Желаю всем удачи, и до новых встреч на страницах блога Vorabota.ru

 

Получайте новости блога VoRabota.ru

Вас это может заинтересовать:

Иконка для сайта, как сделать иконку Favicon

Иконка для сайта или как сделать Favicon ico…

Фавикон – это небольшая картинка, которая появляется в Яндексе при выдаче результатов поиска. Она привлекает внимание к сайту и провоцирует пользователей переходить…
Как сделать свой новый курсор для мыши.

Как сделать новый курсор для мыши [изменить его…

Удобство использования оригинального курсора мышки на компьютере или сайте каждый может оценить сам. Его можно сделать самому, применив немного фантазии. К примеру, из…
Как защитить авторский уникальный текст на сайте от воровства.

Как защитить текст сайта от воровства и нужно ли…

Не успели вы сделать сайт, как оттуда начали воровать уникальный контент? Ничего удивительного, в интернете многие этим промышляют. Есть разные способы защиты текстов,…
Проверка изображений на уникальность

Проверка изображений на уникальность онлайн…

Не секрет, что уникальными должны быть не только тексты, но и изображения. Иначе поисковые роботы будут плохо относиться к вашему сайту. Есть очень удобный онлайн…

Комментарии  

krot
# 0 krot
Интересная статья! Правда, я такие вещи обычно делаю в Photoshop, но так, конечно, намного проще. Обязательно попробую. В сети много разных генераторов, но вы так подробно описали эти, что искать чего-то другого уже не захочется. Спасибо!
Ответить Ответить с цитатой Цитировать
Ирина
# 0 Ирина
Очень полезная статья! Спасибо! Но у меня возникла такая проблема: кнопки, созданные в Cooltext, становятся видны на сайте только после того, как на них наводят курсор. Без этого действия вместо кнопок посетители видят характерную иконку, означающую неотображаемое изображдение (такой белый маленький прямоугольник с цветным узором внутри). Подскажите, пожалуйста, в чём может быть проблема? Спасибо!
Ответить Ответить с цитатой Цитировать
Людмила
# 0 Людмила
Большое спасибо за отличный урок! :-)
Ответить Ответить с цитатой Цитировать
Саныч
# 0 Саныч
Цитирую Ирина:
Очень полезная статья! Спасибо! Но у меня возникла такая проблема: кнопки, созданные в Cooltext, становятся видны на сайте только после того, как на них наводят курсор. Без этого действия вместо кнопок посетители видят характерную иконку, означающую неотображаемое изображдение (такой белый маленький прямоугольник с цветным узором внутри). Подскажите, пожалуйста, в чём может быть проблема? Спасибо!

На этот вопрос я Ирине ответил сразу по эл. почте. А вот ответ разместить здесь забыл.
Сейчас исправляю свою оплошность. Так как возможно кто-нибудь столкнулся с такой же проблемой.

- Для того чтобы кнопки отображались корректно при применении эффекта «Mouse Over», конструкцию HTML кода следует прописать
через HTML редактор вручную а не через текстовой редактор. Текстовой редактор в этом случае применять не следует.
Ответить Ответить с цитатой Цитировать
Darra
# 0 Darra
Мне, все-таки, больше понравился ваш генератор кнопок As Button Generator. Там можно сделать больше разных кнопок, да и как-то он проще мне показался.
Ответить Ответить с цитатой Цитировать
Марина
# 0 Марина
Спасибо за этот материал, все так толково и понятно изложено. Получилось сделать красивые кнопки, но тоже возникла одна проблема. Буду признательна за ваш совет: прописывала код через HTML редактор, в режиме предпросмотра эффект нажатия отображался правильно, но когда я сохраняла страницу, кнопка оказывалась "мертвой", не меняла цвет при наведении курсора. Объясните, пожалуйста, что я делаю неправильно? Заранее спасибо.
Ответить Ответить с цитатой Цитировать
максим
# 0 максим
генератор понравился, статья супер... шрифтов русских не нашел(( или руки у меня кривые, подскажите можно ли в нем творить кнопки с подписью именно на русском языке или что надо для этого сделать?
Ответить Ответить с цитатой Цитировать
Nelly
# 0 Nelly
Цитирую максим:
генератор понравился, статья супер... шрифтов русских не нашел(( или руки у меня кривые, подскажите можно ли в нем творить кнопки с подписью именно на русском языке или что надо для этого сделать?

Тоже русских шрифтов не нашла, хотя все пишут, что есть, в чем фишка?
Ответить Ответить с цитатой Цитировать
Маргарита
# 0 Маргарита
:lol:Спасибо огромное!!! Сервис генерации кнопок-супер.Очень помогли.
Ответить Ответить с цитатой Цитировать
Ирина
# 0 Ирина
Спасибо, интересная статья.Буду использовать в своей работе.
Ответить Ответить с цитатой Цитировать
Руслан
# 0 Руслан
А как сделать кнопку такую же как на этой странице?)
Ответить Ответить с цитатой Цитировать
евгений
# 0 евгений
спасибо познавательно !то что нужно было
Ответить Ответить с цитатой Цитировать
Юзер-2.0
# 0 Юзер-2.0
Эти генераторы сложнее, чем тот, о котором пишете в другой заметке. А результат там получается даже лучше. В общем, мне как-то сразу понравился As Button Generator, и эти уже не впечатлили. Кроме того, такими сервисами ведь нечасто пользуешься. Так, для информации было интересно почитать. :-)
Ответить Ответить с цитатой Цитировать

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

©2011-Vorabota.ru - Заметки о бесплатных программах и онлайн сервисах для пользователей и начинающих Web мастеров.