Как создать кнопки для сайта в графическом генераторе кнопок As Button Generator (меню, инструменты управления).

Приветствую вас, уважаемые читатели блога Vorabota.ru! В прошлой статье я писал о замечательных возможностях бесплатного онлайн сервиса As Button Generator, в котором можно создать кнопки для сайта. А в этой статье я постараюсь подробно описать, как устроен интерфейс и меню этого сервиса. Надеюсь, что для начинающих Web мастеров, которые принципиально выбрали бесплатное создание сайта, научиться делать красивые кнопки в этом генераторе будет очень просто.

Но есть маленький нюанс – он на английском языке.

К сожалению, перевод сайта онлайн, на котором находится генератор кнопок, сделать невозможно, поэтому мне пришлось сделать скриншоты на русском языке. Надеюсь, это ускорит процесс самостоятельного создания кнопок в онлайн сервисе As Button Generator.

Выбор цвета и формы (Color / Form) кнопки с помощью инструментов управления и установки параметров меню онлайн сервиса.

При создании кнопки в онлайн редакторе As Button Generator по умолчанию установлен прозрачный фон. Соответственно, следует учитывать, на каком фоне сайта или блога будет размещаться кнопка. Чтобы изменить цвет фона (Panel background color), на котором будет создаваться кнопка, достаточно навести курсор на квадрат рядом с надписью и щелкнуть левой кнопкой мышки.

цвет кнопки и фона, ширина, высота, цвет и толщина границы, степень скругления кнопки

Откроется окно палитры выбора цвета, в котором устанавливаются нужные параметры.

Как выбирать цвет в палитре, читайте ниже.

Таким же способом выбирается основной цвет (Color) кнопки. Установка параметров ширины (Width) и высоты (Height) кнопки производится перемещением ползунков или задается цифрами в пикселях. Самое большое изображение кнопки можно задать 600 х200 пикселей или 21 х 7 сантиметров. Точно также задаются толщина (Border Thickness) и цвет границы (Border Color)кнопки. Выбор степени скругления углов (Round Strength) создаваемой кнопки выполняется аналогичным способом. Если в окне оставить нулевое значение, углы будут острыми.

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

Выбор типа градации (Gradation Type).

Тип градации кнопки

В параметрах тип градации (Gradation Type) можно выбрать оттенок, который придаст кнопке эффект блика или переход цвета от темного к светлому. При выборе Тип 3 (Type) этот эффект отключается.

Функция нанесение полос (stripe) на кнопку сайта.

Нанесение полос на кнопку

Функция (Stripe) позволяет использовать (Use) или не использовать (Dont use) на кнопке полосы. Цвет (Color) полос, наносимых на кнопку, выбирается из палитры цвета.

Как выбирать цвет в палитре, читайте ниже.

Толщина (Thickness) и интервал (Interval) между полосами регулируются ползунками или вводятся цифровые значения в пикселях. Перемещая ползунок в параметре Alpha, можно изменить степень прозрачности полос кнопки от прозрачного до непрозрачного. Параметр угол (Angle) позволяет изменять наклон полос в пределах 180 градусов.

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

Функция фильтр (Filter) скашивания кнопки.

Применяя функцию фильтра скашивания(Bevel Filter) и управляя настройками в параметрах, можно придать создаваемым кнопкам оригинальные эффекты, включая объем. Поставьте галочку напротив Enable (включить) чтобы функция фильтра скашивания кнопки стала активной. После включения, фильтр автоматически создаст два дубликата кнопки (слои), один дубликат (слой) будет выполнять функцию подсветки (Highlight), другой (слой) функцию тени (Shadow).

Фильтр скашивания кнопки

Чтобы придать кнопкам объем и различные эффекты, посмотрите на примере, как можно расположить слой подсветки и тени. В фильтре скашивания есть три типа (Type) отображения слоя тени и подсветки. Внутренний (Inner), внешний (outer), растянутый (pull)

- Внутренний (Inner): Слой подсветки и тени будет отображаться только на внутреннюю область кнопки.

- Внешний (outer): Отображение слоя будет вокруг кнопки, за ее границей.

- Растянутый (pull): Слой будет отображаться как на кнопке, так и вокруг ее границ.

Слой тени и подсветки кнопки

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

Тип внутренний (Inner) Тип внешний (outer) Тип растянутый (pull)

Тип кнопки внутренний, внешний и растянутый

Выбор цвета тени (Shadow Color) и подсветки (Highlight Color) выполняется щелчком по квадрату.

Как выбирать цвет в палитре, читайте ниже.

Параметр (Offset Distance) регулирует расстояние смещения слоя тени и подсветки от кнопки. Параметр (Angle) позволяет менять угол отображения слоев относительно кнопки на 360 градусов. Когда вы меняете параметры (Blur X)размытие по Х и (Blur Y) размытие по Y, слои растягиваются, приобретая легкую размытость относительно осей.

Размытие слоя тени и подсветки кнопки по осям

Параметр жесткость (Strength) регулирует плавность перехода от цвета к прозрачности.

Переход от цвета к прозрачности

Параметры подсветка Alpha (Highlight Alpha) и тень Alpha (Shadow Alpha) позволяют регулировать прозрачность слоев кнопки по-отдельности. Кнопка в меню Restore Default позволяет вернуться к исходной точке, установленной по умолчанию.

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

Функция фильтра отбрасывания тени кнопки (DropShadow Filter).

Чтобы у создаваемой кнопки появилась тень, которой можно управлять и настраивать ее параметры, следует включить (Enable) и выбрать нужный цвет (Color) из палитры.

Как выбирать цвет в палитре, читайте ниже.

Фильтр отбрасывания тени от кнопки

Фильтр тени позволяет отбрасывать тень от создаваемой кнопки. Если включен фильтр скашивания (Bevel Filter), то тень отбрасывается не только от кнопки, но и от слоя, содержащего тень и подсветку.

- Включенный фильтр скашивания(Bevel Filter). - Отключенный фильтр скашивания(Bevel Filter).

Фильтр скашивания тени кнопки

Параметр (Offset Distance) регулирует расстояние смещения тени от изображения кнопки. Параметр угол (Angle) меняет отображения тени относительно кнопки, он может изменяться на 360 градусов. Параметры (Blur Y) размытие по Y и (Blur X) размытие по Х растягивают отражение тени по осям. Параметр Alpha дает эффект перехода тени от прозрачности до непрозрачности. Параметр (Strength) жесткость, регулирует плавный переход цвета тени к прозрачности. Параметр Restore Default восстанавливает настройки по умолчанию, к исходному значению.

ВНИМАНИЕ! После настроек параметров фильтра скашивания (Bevel Filter) и фильтра отбрасывания тени (DropShadow Filter) следует отключить их (снять галочки), чтобы вставить текст и отредактировать его. После настроек текста можно снова включить фильтры.

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

Вставка изображения на кнопку.

Функция изображение (Image) позволяет вставить на кнопку рисунок или фотографию в формате PNG, JPEG или GIF. Чтобы создать кнопку с изображением, достаточно нажать на Insert Image (вставить изображение) и выбрать заранее подготовленный файл с изображением на своем компьютере.

Как вставить изображение на кнопку

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

Перемещение изображения на кнопке

Если размер изображения не соответствует размеру вашей кнопки, вы можете отредактировать размер самой кнопки во вкладке (Color/Form) цвет/форма. Изменить размер изображения в редакторе невозможно. Это нужно сделать заранее в графическом редакторе, например, в фотошоп онлайн. Можно делать кнопки для сайта, вставляя на них любое количество изображений. Если вы хотите удалить изображение, выделите его и нажмите Delete selected element (удалить выделенный элемент).

ВНИМАНИЕ! На момент вставки изображения на кнопку все фильтры следует отключить.

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

Вставка текста на кнопку и его редактирование.

ВНИМАНИЕ! На время нанесения на кнопку текста отключите фильтры скашивания и тени.

Выберите вкладку Text и сделайте щелчок по кнопке Insert Text (вставить).

Вставка текста на кнопку

Текст «Edit me» на кнопкеНа создаваемой кнопке появится надпись «Edit me» (исправь меня), в рамке, управляемой маркерами.

 

 

Установите курсор в окно ввода текста (текстовый редактор), наберите слова, которые будут размещаться на кнопке, и нажмите Apply (применить). На создаваемой кнопке в управляемой рамке вместо надписи «Edit me» появится ваш текст.

Текстовой редактор кнопки

Если текст не вместился в рамку, достаточно маркером растянуть ее на нужную ширину и высоту. Изменить шрифт текста кнопки, задать размер, толщину, наклон и выбрать цвет можно в нижней части панели текстового редактора. Для этого выделите курсором нужную часть текста в окне редактора, произведите нужные вам настройки и сохраните изменения, нажав Apply (применить). Чтобы удалить текст с кнопки, выделите его и нажмите Delete selected element (удалить выделенный элемент). Можно сделать кнопку с неограниченным числом вставляемых (Insert Text) текстов.

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

Функция фильтра скашивания (Bevel Filter) для текста кнопки.

Фильтр скашивания текста кнопки

Принцип действия фильтра скашивания текста на кнопке идентичен принципу работы фильтра скашивания самой кнопки. Можно вернуться наверх к описанию параметров Bevel Filter кнопки и провести нужные настройки для текста.

Фильтр отбрасывания тени от текста кнопки (DropShadow Filter).

Фильтр тени кнопки

Принцип действия фильтра отбрасывания тени от текста на кнопке идентичен принципу работы фильтра отбрасывания тени от самой кнопки. Можно вернуться наверх к описанию параметров DropShadow Filter кнопки и провести нужные настройки для текста.

ВНИМАНИЕ! После редактирования надписи на кнопке можно вернуться и включить параметры фильтров тени и скашивания.

Простые советы:

Кнопка в рамке

 

 

Для лучшей визуализации можно убрать рамку с маркерами вокруг текста на кнопке

 

удалить «Edit me» в рамке кнопки

 

Добавьте новую строку (Insert Text) и сразу удалите Delete selected element выделенный фрагмент с надписью «Edit me»

 

Кнопка без рамки

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

 

 

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

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

Сохранение кнопки.

После завершения создания кнопки ее можно сохранить к себе на компьютер для дальнейшего размещения на сайт или блог. По умолчанию в момент сохранения (кнопка меню Save) генератор задает изображению кнопки произвольное имя (например: button-4481) в формате PNG. Если вы захотите задать собственное имя кнопке, обязательно укажите расширение (.png).

Выбор цвета в палитре.

Для вызова окна палитры, наведите курсор на квадрат рядом с надписью цвет (Color) и щелкните левой кнопкой мышки. Чтобы всплывающее окно палитры цвета не закрывало рабочую область, где создается кнопка, переместите его. Наведите курсор на верхнюю полосу окна палитры, захватите щелчком левой кнопки мышки и отведите в любую сторону. Для выбора цвета наведите курсор на нужную вам световую область в главном окне палитры и сделайте щелчок кнопкой или подвигайте ползунок с правой стороны окна. Если вам известны цифровые значения цвета, их можно задать в правом нижнем углу окна палитры. После выбора цвета сохраняем его (ок).

Палитра выбора цвета

Простые советы: Для идеального совпадения цвета различных элементов кнопки используйте цифровые значения цветов палитры. Например: Чтобы цвет границы кнопки совпадал с цветом текста, скопируйте (или запишите) цифровое значение цвета одного элемента и вставьте его в окно палитры другого элемента.

(Вернутся в начало наверх).

1.Выбор цвета и формы (Color / Form) кнопки, инструментами управления и установкой параметров в меню онлайн сервиса.

2. Выбор типа градации (Gradation Type).

3. Функция нанесение полос (stripe)на кнопку сайта.

4. Функция фильтр (Filter) скашивания кнопки.

5. Функция фильтра отбрасывания тени кнопки (DropShadow Filter).

6. Вставка изображения на кнопку.

7. Вставка текста на кнопку и его редактирование.

8. Функция фильтра скашивания (Bevel Filter) для текста кнопки.

9. Фильтр отбрасывания тени от текста кнопки (DropShadow Filter).

10. Сохранение кнопки.

11. Выбор цвета в палитре.

Перейти в генератор кнопки

Создать кнопки для сайта в бесплатном онлайн сервисе графическом генераторе  As Button Generator.

 

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

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

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

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

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

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

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

Комментарии  

Darra
# 0 Darra
Большое спасибо за такую подробную инструкцию! Все просто и понятно. Я давно хочу сделать себе пару-тройку кнопок для сайта, обязательно воспользуюсь этим материалом. Делать кнопки буду в вашем онлайн генераторе, он самый удобный. :-)
Ответить Ответить с цитатой Цитировать
Салтанат
# 0 Салтанат
:P :P :P :P
КЛАСС! СПАСИБОЧКИ!
Ответить Ответить с цитатой Цитировать
Саныч
# 0 Саныч
Рад, что вам нравится! :-)
Ответить Ответить с цитатой Цитировать
Vlad
# 0 Vlad
И генератор и инструкция понравились. Спасибо большое за ваши труды. Но вот проблема - кнопка сохраняется с прямоугольным фоном по заданному размеру. При этом тень и прочие эффекты не сохраняются. Как сохранить кнопку без фона и с эффектами? Спасибо за помощь.
Ответить Ответить с цитатой Цитировать
doktor555
# 0 doktor555
Подскажите пожалуйста! Как получить правильный код к кнопке,для установке на сайт? какой то рамочник просит код и начинатся он должен с HTTP что за прога,название? как работает? за 2 дня столько перечитал,что уже каша в голове.. может и я конечно на столько тупой..)
Ответить Ответить с цитатой Цитировать
Игорь
# 0 Игорь
Цитирую doktor555:
Подскажите пожалуйста! Как получить правильный код к кнопке,для установке на сайт? какой то рамочник просит код и начинатся он должен с HTTP что за прога,название? как работает? за 2 дня столько перечитал,что уже каша в голове.. может и я конечно на столько тупой..)


Вам нужен код чтобы установить кнопку??? Если код то вот держите:
Ответить Ответить с цитатой Цитировать

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

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