Скачать программу для создания кнопок. Текст и его расположение. Градиентная заливка кнопки

Программа называется DeKnop. С помощью графической программы DeKnop, вы сможете создать кнопки для меню сайта.

Время от времени, у каждого веб-мастера возникает потребность в создании кнопок для меню сайта. Каждый из нас по-разному решает эту проблему. Здесь все зависит от собственного опыта.

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

Если вы хорошо владеете графическими программами, то можно нарисовать кнопку в графическом редакторе.

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

Бесплатная программа для создания очень качественных графических кнопок, которую я хочу Вам хочу представить, называется DeKnop.

DeKnop, совершенно бесплатно, вы сможете ниже, в конце статьи.

После установки, программа DeKnop занимает 1,21 Мб дискового пространства на жестком диске. Интерфейс программы английский. Но я нашел файл, с помощью которого, программа легко русифицируется. О русификации программы, я расскажу чуть ниже.

После запуска программы, открывается вкладка Размеры (Англ. - dimensions).

Можно сразу начать создавать кнопку меню, используя следующие параметры кнопки:

button - width - heigh

кнопка - ширина - высота

граница - ширина

скос - ширина

граница - цвет

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

Настройками на вкладке Размеры (dimensions) можно настроить ширину и высоту кнопки, ширину и угол бордюра, а также угол скоса кнопки.

Далее в меню Цвета (colors) программы DeKnop - Вы подбираете цвет кнопки меню. Причем, в пункте Градиентная заливка (gradient) - для вас приготовлены всевозможные цветовые градиенты и графические фоновые вставки на Вашу кнопку.

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

Далее Вам остается только набрать текст кнопки в режиме ‘Текст’ и расположение (text and position) и выбрать положение текста на кнопке. После этого Вы подбираете шрифт и стиль текста, воспользовавшись режимом - Шрифт и стиль (font and style).

Таким образом, Вы можете создать кнопку меню, с внешним видом, который устроит самого придирчивого дизайнера! При этом напоминаю, что программа DeKnop, совершенно бесплатна!

Для русификации программы DeKnop, достаточно скопировать файл russian.ini в папку C:\Program Files\DeKnop\languages, а затем, запустив программу DeKnop, в меню Language выбрать - "Русский".

И для редактирования графических кнопок меню Вашего сайта, бесплатно, можно здесь.

Вы - разработчик в поисках качественного онлайн-сервиса для конструирования кнопок? Если да, то у меня есть для вас отличная подборка. Ниже приводится мой список из 10 лучших онлайн-ресурсов для построения кнопок. Кнопки представляют собой важные элементы интерфейса наших веб-сайтов, и данные сервисы позволят вам конструировать великолепные кнопки.

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

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

Da Button Factory предлагает вам отличные инструменты для построения кнопок. Вы можете варьировать размер кнопки, цвета и вид шрифта, оттенять его, а также выбирать конечный формат (PNG / JPEG / GIF / ICO). В процессе работы кнопка постоянно обновляется в соответствии с вносимыми вами изменениями. Завершив её построение, вы можете выполнить загрузку нажатием на неё же.

03. Buttonator - ресурс больше не существует

Ещё один отличный онлайн-сервис для построения кнопок, Buttonator , предоставит вам практически все возможности для решения данной задачи. Начать можно с выбора определённого стиля оформления кнопки в правой панели. А далее вы можете вносить в него изменения; в том числе, варьировать цвет и начертание/размер шрифта. Загружать кнопки можно в виде GIF-файлов.

Cool RGB - замечательный веб-сайт для конструирования различных элементов веб-страницы. Здесь можно создавать логотипы, баннеры, панели и, разумеется, кнопки. Интерфейс построения кнопок адаптируется через множество опций - от выбора шрифтов и цветов до установки уровня прозрачности и линейных углов наклона.

Сервис As Button Generator позволяет вам конструировать кнопки, выполняя редактирование в интерфейсе, составленном из вкладок. Имеется много опций для адаптации, которых вполне хватит на построение ваших кнопок. Готовое изображение загружается в виде PNG-файла.

07. HTML and CSS Rounded Corner Button Generator - больше не существует

Сайт предназначен для разработчиков, ищущих очень простой, но вдвойне полезный онлайн-сервис построения кнопок. HTML and CSS Rounded Corner Button Generator позволяет вам не только конструировать кнопки, но и варьировать их цвета, а также предоставляет вам ZIP-архив с файлом PNG-изображения кнопки, HTML- и CSS-кодами.

08. Feed Icon - больше не существует

Если вы ищете сервис для построения простой иконки веб-каналов, то Feed Icon - лучшее решение. Вам лишь нужно указать URL-адрес своего веб-сайта, а затем выбрать один из 3 предложенных вариантов HTML-кода. Три варианта кодировки предусматривают одну и ту же форму иконки, но разные её размеры.

У данного сервиса построения кнопок от Эдама Кэлси (Adam Kalsey) очень простой интерфейс. Иконку можно разделить чертой и задать интервал в пикселях между этой границей и краем кнопки.

10. Button Maker - Больше не существует

Сервис очень похож на ресурс Эдама Кэлси, но его важное отличие состоит в том, что вы можете выбирать позицию разделительной черты - "слева", "по центру" или "справа". Выбирать можно и один из двух предлагаемых вариантов размера кнопки.

Программа, позволяющая создавать красивые прямоугольные кнопки для сайтов и программ.

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

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

По функционалу DeKnop очень напоминает платный аналог – GifArt"s Button Maker:

Сравнение программы DeKnop с платным аналогом GifArt"s Button Maker

Как уже было сказано — недостаток DeKnop в том, что нельзя управлять формой кнопки. Однако, при всем при этом, практически ни одна из платных программ не предоставляет возможности настройки любого элемента создаваемой кнопки.

Текстура - картинка, накладываемая на плоскость или 3D-фигуру.

Обычно, аналоги предоставляют готовые шаблоны кнопок для сайта, на которые можно наложить любой текст. DeKnop же подходит к вопросу по-иному: здесь можно самостоятельно установить все цвета и текстуры создаваемых кнопок.

Установка редактора кнопок DeKnop

Установка DeKnop состоит из двух частей. Первая — непосредственно инсталляция: нам просто потребуется запустить exe-файл, который Вы найдете в скачанном архиве, и выполнить все инструкции мастера установки.

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

Второй этап — русификация. В архиве с инсталлятором Вы обнаружите файл russian.ini , который следует поместить в ту же папку, в которую Вы перед этим установили DeKnop.

Теперь запускаем программу и в меню «Language» обнаружим пункт «Русский (Russian)», который и выберем для завершения русификации.

Интерфейс DeKnop

Перед нами появится окно DeKnop с русским интерфейсом. Предлагаю заняться осмотром «поля боя»:).

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

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

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

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

Задание размеров будущей кнопки для сайта

Освоение программы начнем с первой вкладки — «Размеры».

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

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

Задание цвета кнопки

Следующая вкладка — «Цвет».

Здесь можно установить цвета всех элементов создаваемой кнопки. Правда из-за некоторой неточности перевода, порой бывает трудно понять, к какому элементу относится тот или иной цвет. Смотрим по порядку:

1. Группа «Цвета» отвечает за глобальный цвет шрифта («плоское» начертание), фоновый цвет кнопки, а также цвет фона, на котором находится создаваемая кнопка.

2. Со «Скосом» мы уже знакомы, а вот смущает группа «Цвет». Если бы перевод был более точным, то название бы звучало, как «Стиль текста» , что намного ближе к истине. Эта функция помогает сделать красивую обводку текста для имитации его объемности.

Соответственно здесь можно выбрать цвета нижней и верхней обводки.

Градиент - плавное перетекание одного цвета в другой.

3. Группу «Кнопка», по хорошему, стоило перевести как «Градиент». При активированной опции градиентной заливки фона кнопки здесь можно установить нужные цвета.

4. Группа «Надпись» подразумевает градиентную заливку текста (при включенной соответствующей опции).

На этой вкладке мы можем активировать прозрачность всей кнопки (шкала «Прозрачность») или указать использование прозрачных цветов для одного из элементов кнопки (группа «Прозрачный цвет»). Идем дальше…

Текст и его расположение

И следующая вкладка — «Текст и расположение».

Здесь, я думаю, все понятно. В окне слева мы вводим текст, который будет отображен на кнопке, а далее устанавливаем выравнивание текста. Обратите внимание на пункт «Перенос слов». Если он включен, то функции выравнивания текста будут недоступны.

Шрифт и стиль

Вкладка «Шрифт и стиль» предназначена для настройки вида надписи на кнопке.

Гарнитура - общий стиль семейства шрифтов.

В группе «Шрифт» мы можем выбрать тип и гарнитуру шрифта. При этом тип можно выбирать двумя способами: быстрым (выпадающее меню) и расширенным (кнопка «Шрифт»).

Кстати, набор красивых шрифтов можно скачать .

В последнем случае откроется системное окно «Шрифт», где помимо типа можно будет настроить размер, цвет и оформление шрифта.

Группа «Стиль текста» отвечает за внешний вид надписи: однотонная (плоская), выпуклая или вдавленная.

При выборе двух последних вариантов становится доступной возможность настройки цветов обводки текста. «3D-стиль» и «Тень» – это две похожие опции украшения текста, поэтому при выборе одной из них, вторая становится недоступной. Обе они дублируют надпись, делая подложку выбранного цвета.

При этом тень создает нечеткий размытый фон, тогда как 3D-эффект имеет четкие контуры.

Градиентная заливка кнопки

Помимо обычной заливки кнопки мы можем использовать градиентные. Для этого следует перейти во вкладку «Градиентная заливка».

Доступна заливка, как только основной области кнопки, так и текста надписи. Чтобы активировать градиент, отметьте флажком пункт «Использовать заливку». Теперь осталось только настроить цвета градиента и способ заливки.

Заливка текстурой

Кроме того, Вы можете использовать для заливки не только цвета и градиенты, но и текстуры. Для этого перейдем в следующую одноименную вкладку.

Чтобы наложить текстуру активируйте флажок «Использовать», после чего нажмите кнопку «Загрузить» и выберите нужную картинку на компьютере. При этом для кнопки доступно несколько вариантов заливки:

1. Позиция - добавляет выбранный рисунок единожды в левый верхний угол.
2. Растянуть - заполняет всю плоскость кнопки выбранным рисунком. При этом его размер подгоняется под размер кнопки.
3. Мозаика - также заполняет кнопку выбранным изображением, но при этом не меняет его размера, а дублирует нужное количество раз.

Сохранение результатов

И вот он наступил момент истины:). Я имею в виду, что мы, наконец, закончили ваять нашу кнопку для сайта и можем сохранить результаты наших трудов. Переходим к последней вкладке — «Сохранение и загрузка».

В группе «Имя файла кнопки» можно задать именование кнопок по маске с использованием префиксов и/или суффиксов к заданному имени.

Вот мы и прошли весь путь по созданию кнопки с нуля в программе DeKnop.

Единственное, на что можно еще обратить внимание — это на кнопку предпросмотра на верхней панели инструментов. Она выводит на экран горизонтальный и вертикальный ряды сгенерированных кнопок, чтобы можно было оценить, как они будут выглядеть на страничке сайта (помните, что можно менять фон?).

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

Выводы

Всё, господа:). Я надеюсь, что DeKnop пригодится Вам, если Вы захотите создать свой сайт. Данная программа позволяет создавать довольно красивые и оригинальные кнопки для сайтов, даже если Вы не обладаете достаточными навыками работы с графическими редакторами или хотите сэкономить свое время;).

P.S. Разрешается свободно копировать и цитировать данную статью при условии указания открытой активной ссылки на источник и сохранения авторства Руслана Тертышного.

3

4

Trellian Button Factory

Trellian Button Factory v 3.00 (2003 г). Интерфейс и справка - на англ. языке. Вес 3,2 Мб. Бесплатная программа.
Назначение программы - создание кнопок, панелей навигации, эмблем. баннеров, карт ссылок, html-страниц.

Online Button Generator

Online Button Generator - бесплатная онлайн-программа, служит для создания кнопок. Настраиваются: вид кнопки (прямоугольная, с закругленными углами), размеры кнопок, вводится свой текст (выбирается шрифт, его размер, цвет, цвет тени и др.), к тексту можно добавить значок, настраиваются границы, цвет и расположение тени кнопки и другое.
Кнопка может быть создана с эффектом Rollover - для трехсостояний (Normal - нормальное состояние, Hover - при наведении курсора, Pressed - после нажатия). Имеется предварительный просмотр создаваемой кнопки.
Страница программы

3D Buttons Visual Editor

3D Buttons Visual Editor v 5.0 (2000 - 2009 гг). Интерфейс и справка на англ. языке. Вес 8,1 Мб.
Назначение программы - создание кнопок.
При создании кнопок можно использовать большой набор шаблонов, которые идут с программой. Можно создать собственную коллекцию шаблонов (используя функцию "Сохранить как шаблон"). Имеется много настроек создаваемой кнопки.

CSS-Tricks - бесплатная онлайн-программа для создания кнопок (только CSS). Настраивается: размер кнопок, форма кнопок (прямоугольная, с закругленными углами), цвет (в т.ч. градиентный), цвет границ, цвет текста и другое. Возможность создания кнопок с эффектом Rollover.
Страница программы

CSS Button Generator

CSS Button Generator - бесплатная онлайн-программа для создания кнопок (только CSS).
Определяется текст кнопки, шрифт (вид, цвет, размер шрифта), выравнивание текста на кнопке, радиус закругления углов, цвет фона (при создании эффекта Rollover - начальный и конечный цвет) и другое.
Страница программы

Action Button Generator

Action Button Generator - бесплатная онлайн-программа для создания кнопок. Настраивается цвет кнопки, вводится текст, настраивается тип шрифта, его размер и цвет, определяются границы (рамки) кнопки и другое.
Сохранение в форматах CSS и PNG.
Страница программы

Webestools

Webestools - бесплатный онлайн-сервис, позволяющий создать большое количество различных элементов для вставки на веб-страницы.

Button Maker - инструмент позволяет Вам создавать кнопки (X) HTML. Кнопки создаются с эффектом Rollover. Выберите стиль кнопки, введите название и URL. После этого нажмите на кнопку "Generate". Имеется предварительный просмотр. Вы получите код (X) HTML, который Вы должны скопировать и вставить на своем вебсайте, чтобы поместить кнопку.

CSS3 Button Generator - позволял Вам создавать кнопки CSS3, которые Вы можете очень легко настроить. Вы можете изменить цвета кнопок, размер шрифта текста, отступы, границы, тени и другое.
Будет создан код CSS3, который можно применить к кнопкам веб-форм ( submit), и к любому элементу, у которого есть класс "button" (кнопка). Произведенный код совместим со всеми главными браузерами: IE10+, Firefox, Google Chrome, Safari и Opera.

Flash Button Maker
Flash Button Maker - позволяет Вам создавать кнопки формата Flash (SWF) для размещения на веб-страницах. введите текст кнопки, URL, стиль кнопки. Затем нажмите на кнопку "Generate". Вставьте полученный код на свою веб-страницу.

Button Maker - бесплатная онлайн-программа для создания кнопок. Настройка цветов, текста и др. Недостаток программы - неправильное отображение русского текста.
Страница программы

Button Maker

Button Maker - бесплатная онлайн-программа для создания кнопок и значков. Настраиваются размеры, цвета, текст. Программа проста в использовании. Созданная кнопка сохраняется как изображение.
Страница программы

Button Generator

Button Generator - бесплатная онлайн-программа для создания кнопок. При создании кнопки используются шаблоны. Определяются размеры и цвета кнопки и текста, настраивается тень кнопки и текста, цвет и толщина границ и пр. В итоге выдается код CSS и HTML.
Страница программы

Android Button Maker

Android Button Maker - инструмент онлайн для создания кода кнопок для Приложений Андроида (Android Apps). Файл XML определяет геометрическую форму, включая цвета, границу и градиенты. Вы можете настроить свойства кнопки и получить исходный код.
Страница программы

Кнопки Flash

Онлайн-сервис FlashVortex позволяет бесплатно создавать кнопки, меню (панели навигации), анимированный текст и др. в формате Flash.

Слева - кнопка Flash (наведите курсор на кнопку).

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

Программа для создания кнопок для сайта какие они бывают

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

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

Также очень известна и популярна программа Agama Web Buttons, возможности которой очень велики и разнообразны. Создание кнопок с 3D и 2В эффектом, а также металлическим, пластиковым или стеклянным оттенком. Здесь имеются многочисленные шаблоны, число которых достигает 700 экземпляров. Пользователь может поменять размеры кнопок, добавить текст, изменить цвет или форму.

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