Создание кнопок в GIMP

Knach.com » GIMP и Web » Создание кнопок в GIMP

GIMP предлагает два варианта автоматизированного создания кнопок: «Круглая кнопка» и «Простая выпуклая кнопка». Для каждого варианта существует собственный набор настроек. Вызовем диалог настройки «Круглой кнопки»:

Диалог настройки скрипта Круглая кнопка

Этот скрипт позволяет создать сразу три варианта кнопки: неактивную, активную (когда на кнопку наведена мышь) и нажатую. Изменение изображения кнопки обеспечивается уже автором сайта. Соответственно, выбираются цвет затенённой части кнопки (нижний цвет), цвет поверхности кнопки (верхний цвет) и цвет текста. Для нажатой кнопки «верхний» и «нижний» цвета меняются местами (инвертируются). Для активной кнопки поверхность становится более яркой («подсвеченной») и меняется цвет текста. В целом цветовая гамма по умолчанию не очень приятная. Более точно настройки цвета можно воспроизвести по таблице:

Элемент изображения

HTML-код цвета

Верхний цвет:

C0C000

Нижний цвет:

806C00

Цвет текста:

000000 (black)

Верхний цвет (для активн.):

FFFF00 (yellow)

Нижний цвет (для активн.):

806C00

Цвет текста (для активн.):

0000C0

Результаты работы скрипта — три кнопки в порядке их создания: обычная, активная и нажатая

Результаты работы скрипта Круглая кнопка с настройками по умолчанию

Теперь попробуем изменить вид и размер шрифта, цвета и параметр «отношение радиусов»:

Изменение параметров скрипта Круглая кнопка

Коды цветов элементов изображения приведены в таблице:

Элемент изображения

HTML-код цвета

Верхний цвет:

65АЕЕЕ

Нижний цвет:

003980

Цвет текста:

FFD200

Верхний цвет (для активн.):

65АЕЕЕ

Нижний цвет (для активн.):

003980

Цвет текста (для активн.):

E02DDE

а результат показан на рисунке:

Результат работы скрипта с новыми параметрами

Заметим, что создаются полноцветные изображения, следовательно, при сохранении кнопок для использования на Web-странице должен быть выбран формат JPEG (поскольку все ещё используются браузеры, некорректно отображающие изображения в формате PNG). Для сохранения кнопок в формате GIF нужно преобразовать изображения в индексированные.

Теперь познакомимся с работой скрипта «Простая выпуклая кнопка». Диалог настройки скрипта с параметрами по умолчанию:

Параметры скрипта Простая выпуклая кнопка

Следует обратить внимание, что для кнопки может быть включён режим «Нажатая».

Цвета элементов кнопки приведены в таблице (в HTML-кодах):

Элемент изображения

HTML-код цвета

Верхний-левый цвет:
Нижний-правый цвет:
Цвет текста:

00FF7F
007FFF
000000

Посмотрим на результаты работы скрипта при создании обычной кнопки

Кнопка с параметрами по умолчанию

и нажатой кнопки:

Нажатая кнопка с параметрами по умолчанию

с параметрами по умолчанию.

В обоих случаях создаются три слоя изображения: слой с границами (основа), слой с градиентом цвета от верхнего левого угла кнопки к нижнему правому, а также слой с текстом. В результате работы скрипта опять-таки создаётся полноцветное изображение, и при сохранении кнопки для использования на Web-странице должен быть выбран формат JPEG. Для сохранения кнопки в формате GIF также нужно преобразовать изображение в индексированное.

Теперь изменим параметры скрипта в соответствии с рисунком:

Изменённые настройки для простой выпуклой кнопки

и цвета элементов в соответствии с таблицей

Элемент изображения

HTML-код цвета

Верхний-левый цвет:
Нижний-правый цвет:
Цвет текста:

А6А6А6

000000

FFFFFF

и посмотрим на получившуюся «нажатую» кнопку:

Простая выпуклая кнопка с пользовательскими параметрами

  • Создание логотипов и элементов дизайна web страниц
  • Создание аватары для блога или форума
  • Сам себе руководитель: дизайнер-фрилансер
  • Создаем собственное Интернет казино
  • Самые популярные игры в Интернет казино
  • Комментариев пока нет. Будете первым?

    Оставить комментарий

    XHTML: Вы можете использовать эти теги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>