Приветствую вас, уважаемые читатели блога 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) создаваемой кнопки выполняется аналогичным способом. Если в окне оставить нулевое значение, углы будут острыми.
Перейти в генератор кнопки
Выбор типа градации (Gradation Type).
В параметрах тип градации (Gradation Type) можно выбрать оттенок, который придаст кнопке эффект блика или переход цвета от темного к светлому. При выборе Тип 3 (Type) этот эффект отключается.
Функция нанесение полос (stripe) на кнопку сайта.
Функция (Stripe) позволяет использовать (Use) или не использовать (Dont use) на кнопке полосы. Цвет (Color) полос, наносимых на кнопку, выбирается из палитры цвета.
Как выбирать цвет в палитре, читайте ниже.
Толщина (Thickness) и интервал (Interval) между полосами регулируются ползунками или вводятся цифровые значения в пикселях. Перемещая ползунок в параметре Alpha, можно изменить степень прозрачности полос кнопки от прозрачного до непрозрачного. Параметр угол (Angle) позволяет изменять наклон полос в пределах 180 градусов.
Перейти в генератор кнопки
Функция фильтр (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 позволяет вернуться к исходной точке, установленной по умолчанию.
Перейти в генератор кнопки
Функция фильтра отбрасывания тени кнопки (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) следует отключить их (снять галочки), чтобы вставить текст и отредактировать его. После настроек текста можно снова включить фильтры.
Перейти в генератор кнопки
Вставка изображения на кнопку.
Функция изображение (Image) позволяет вставить на кнопку рисунок или фотографию в формате PNG, JPEG или GIF. Чтобы создать кнопку с изображением, достаточно нажать на Insert Image (вставить изображение) и выбрать заранее подготовленный файл с изображением на своем компьютере.
Чтобы разместить изображение на кнопке в нужном месте, наведите курсор на него и, удерживая левой кнопкой мышки, переместите его.
Если размер изображения не соответствует размеру вашей кнопки, вы можете отредактировать размер самой кнопки во вкладке (Color/Form) цвет/форма. Изменить размер изображения в редакторе невозможно. Это нужно сделать заранее в графическом редакторе, например, в фотошоп онлайн. Можно делать кнопки для сайта, вставляя на них любое количество изображений. Если вы хотите удалить изображение, выделите его и нажмите Delete selected element (удалить выделенный элемент).
ВНИМАНИЕ! На момент вставки изображения на кнопку все фильтры следует отключить.
Перейти в генератор кнопки
Вставка текста на кнопку и его редактирование.
ВНИМАНИЕ! На время нанесения на кнопку текста отключите фильтры скашивания и тени.
Выберите вкладку Text и сделайте щелчок по кнопке Insert Text (вставить).
На создаваемой кнопке появится надпись «Edit me» (исправь меня), в рамке, управляемой маркерами.
Установите курсор в окно ввода текста (текстовый редактор), наберите слова, которые будут размещаться на кнопке, и нажмите Apply (применить). На создаваемой кнопке в управляемой рамке вместо надписи «Edit me» появится ваш текст.
Если текст не вместился в рамку, достаточно маркером растянуть ее на нужную ширину и высоту. Изменить шрифт текста кнопки, задать размер, толщину, наклон и выбрать цвет можно в нижней части панели текстового редактора. Для этого выделите курсором нужную часть текста в окне редактора, произведите нужные вам настройки и сохраните изменения, нажав Apply (применить). Чтобы удалить текст с кнопки, выделите его и нажмите Delete selected element (удалить выделенный элемент). Можно сделать кнопку с неограниченным числом вставляемых (Insert Text) текстов.
Перейти в генератор кнопки
Функция фильтра скашивания (Bevel Filter) для текста кнопки.
Принцип действия фильтра скашивания текста на кнопке идентичен принципу работы фильтра скашивания самой кнопки. Можно вернуться наверх к описанию параметров Bevel Filter кнопки и провести нужные настройки для текста.
Фильтр отбрасывания тени от текста кнопки (DropShadow Filter).
Принцип действия фильтра отбрасывания тени от текста на кнопке идентичен принципу работы фильтра отбрасывания тени от самой кнопки. Можно вернуться наверх к описанию параметров DropShadow Filter кнопки и провести нужные настройки для текста.
ВНИМАНИЕ! После редактирования надписи на кнопке можно вернуться и включить параметры фильтров тени и скашивания.
Простые советы:
Для лучшей визуализации можно убрать рамку с маркерами вокруг текста на кнопке
Добавьте новую строку (Insert Text) и сразу удалите Delete selected element выделенный фрагмент с надписью «Edit me»
Затем можно включить все настроенные фильтры и посмотреть, как будет выглядеть кнопка с надписью без отвлекающих внимание маркеров рамки.
Если вам потребуется вернуться к редактированию надписи на кнопке, отключите снова все задействованные фильтры, наведите курсор на надпись и выделите ее щелчком мышки.
Перейти в генератор кнопки
Сохранение кнопки.
После завершения создания кнопки ее можно сохранить к себе на компьютер для дальнейшего размещения на сайт или блог. По умолчанию в момент сохранения (кнопка меню Save) генератор задает изображению кнопки произвольное имя (например: button-4481) в формате PNG. Если вы захотите задать собственное имя кнопке, обязательно укажите расширение (.png).
Выбор цвета в палитре.
Для вызова окна палитры, наведите курсор на квадрат рядом с надписью цвет (Color) и щелкните левой кнопкой мышки. Чтобы всплывающее окно палитры цвета не закрывало рабочую область, где создается кнопка, переместите его. Наведите курсор на верхнюю полосу окна палитры, захватите щелчком левой кнопки мышки и отведите в любую сторону. Для выбора цвета наведите курсор на нужную вам световую область в главном окне палитры и сделайте щелчок кнопкой или подвигайте ползунок с правой стороны окна. Если вам известны цифровые значения цвета, их можно задать в правом нижнем углу окна палитры. После выбора цвета сохраняем его (ок).
Простые советы: Для идеального совпадения цвета различных элементов кнопки используйте цифровые значения цветов палитры. Например: Чтобы цвет границы кнопки совпадал с цветом текста, скопируйте (или запишите) цифровое значение цвета одного элемента и вставьте его в окно палитры другого элемента.
(Вернутся в начало наверх).
2. Выбор типа градации (Gradation Type).
3. Функция нанесение полос (stripe)на кнопку сайта.
4. Функция фильтр (Filter) скашивания кнопки.
5. Функция фильтра отбрасывания тени кнопки (DropShadow Filter).
6. Вставка изображения на кнопку.
7. Вставка текста на кнопку и его редактирование.
8. Функция фильтра скашивания (Bevel Filter) для текста кнопки.
9. Фильтр отбрасывания тени от текста кнопки (DropShadow Filter).
Перейти в генератор кнопки
Вас это может заинтересовать:
Иконка для сайта или как сделать Favicon ico…
![Форумы с оплатой за сообщение [подробный обзор всех площадок, где платят за посты]](/cache/mod_xpertscroller/4161680b69f9861e84d37a25fa946852_resized.jpg)
![Как перевести деньги с телефона на телефон через телефон [короткие команды для Билайн, Мегафон, МТС, Теле2]](/cache/mod_xpertscroller/014aed81ed22c90101685b4dbda11bc7_resized.jpg)
Комментарии
КЛАСС! СПАСИБОЧКИ!
Вам нужен код чтобы установить кнопку??? Если код то вот держите: