Кнопки для сайта

Красная кнопка для сайтаКнопки для сайта являются вторым после ссылок, элементом навигации по веб-ресурсам.

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

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

Скачать этот редактор можно чуть ниже на этой странице.

DeKnop 5.0

Кнопки для сайта DeKnop 5.0
Рейтинг:
Размер:
1.4 МБ (инсталлятор)
Интерфейс:Русский/Английский
Платформа:
Windows 2000/XP/Vista/7 32-bit
Обновлено:2010-04-12
Разработчик:
Платный аналог:  
Xara 3D Maker (1544 руб.)


Похожая программа: Редактор иконок icon suchi





DeKnop 5.0

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

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

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

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

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

Особенности DeKnop GifArt's Button Maker
Стоимость бесплатно $69.95
Изменение формы кнопки только прямоугольник при наличии определенной библиотеки
Создание 2D и 3D кнопок + +
Управление цветами всех элементов + только использование шаблонов
Наложение текстур + +
Дополнительные эффекты тень, 3D-эффект тень, 3D-эффект, внешняя тень
Возможность подключения скриптов - +

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

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

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

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

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

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

Установка DeKnop

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

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

Установка русского языка в программе для создания кнопок DeKnop


Интерфейс DeKnop

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

Окно программы DeKnop

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

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

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

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

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

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

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

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

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

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

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

Вкладка Цвет программы DeKnop

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

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

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

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

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

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

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

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

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

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

Вкладка Текст и расположение программы DeKnop

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

Шрифт и стиль

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

Вкладка Шрифт и стиль программы DeKnop

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

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

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

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

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

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

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

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

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

Вкладка Градиентная заливка программы DeKnop

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

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

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

Вкладка Текстуры программы DeKnop

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

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

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

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

Вкладка Сохранение и загрузка программы DeKnop

Здесь, как видите, можно сохранить всю нашу работу в виде проекта (чтобы можно было продолжить редактировать кнопку в дальнейшем) либо экспортировать её в один из графических форматов (доступны png, bmp, gif и jpg).

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

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

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

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

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

Окно предпросмотра кнопок программы DeKnop

Выводы

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

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

P.P.S. Для того, чтобы создаваемая кнопка получилась красивой, иногда бывает нужно правильно подобрать цвета. С этой задачей Вам поможет следующая программа, которая позволяет «захватить» цвет с любой точки монитора:
Захват HTML цвета https://www.bestfree.ru/soft/graph/html-colors.php



Похожие программы:

Редактор фотографий: Paint.NET
Редактор фотографий и прочих растровых изображений, умеющий накладывать множество эффектов, убирать "красные глаза", работать со слоями, со сканером и камерой.
Векторный редактор: Inkscape
Отличный бесплатный векторный редактор, предназначенный для создания красочных векторных изображений с минимальными затратами времени и сил.
Взлом программ: Resource Hacker
Бесплатная программа для взлома и редактирования ресурсов программ, приложений, библиотек и т.д.
Спецэффекты: Magic Particles 3D
Бесплатная программа для создания фото- и видео- спецэффектов в домашних условиях, и с минимальными затратами времени и сил.
Графический редактор: GIMP
Бесплатный графический редактор с открытым исходным кодом, для создания и редактирования растровых изображений.
Изменение размера изображений: RIOT
Бесплатная программа для изменения размера изображений, их оптимизации и конвертации без заметной потери качества. В комплекте идёт полный арсенал инструментов, предназначенных для сжатия любых графических файлов.
Редактор иконок: icon suchi
Небольшой редактор иконок. Поддерживаются альфа-каналы, иконки размером до 256х256, библиотеки, XP-иконки и основные форматы: ICO, BMP, PNG, PSD, EXE, DLL, ICL.
Поиск иконок: IconS
Бесплатная программа для поиска иконок по файлам библиотек и приложений. Программа очень проста и нетребовательна.
Подбор цвета: Color point
Маленькая, стильная и аккуратная программка подбора цвета для оформления HTML-страниц и других задач, требующих подбора сочетающихся цветов.





** Задавать вопросы лучше на нашем форуме. Просто зарегистрируйтесь и создайте новую тему.

Полезный совет:



Система проверки ошибок от Mistakes.ru