Как создать красивые надписи, логотипы и кнопки для сайта

Продолжаю цикл статей про возможности графического редактора GIMP. Напомню, что программа бесплатная и свободно распространяемая. Ее можно скачать с сайта gimp.org, весит программа всего 20-30 мегабайт, так что скачать ее не составит особого труда.

В предыдущих статьях были рассмотрены базовые возможности GIMP по коррекции изображений — яркость, контрастность, уровни, тонирование, нанесение надписей а также работа со слоями.

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

Создание графической надписи (логотипа)

Для создание надписи выбираем подменю "Логотипы". Там представлено множество настраиваемых шаблонов. Диалоги настройки у шаблонов различаются.

Вот пример настройки шаблона SOTA Хром.

Результат:

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

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

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

Попробуем создать "круглую кнопку" (т.е. прямоугольную кнопку с закругленными краями). Выбираем соответствующий пункт меню и перед нами открывается диалог настройки параметров кнопки — тип и размер шрифта, цвета в активном и неактивном состоянии

После нажатия кнопки OK будут созданы 3 кнопки. Очень удобно — один вариант если на кнопку наведен курсор, если курсор не наведен, если кнопка нажата.

(цвета выбраны наугад)

В действии это будет выглядеть так (попробуйте навести курсор на кнопку и нажать ее):

Скрипт для показа такой кнопки показан ниже (один из множества вариантов). Вам нужно вставить в него свои url картинок:

<script language="JavaScript">
up = new Image(40,15); // 40 на 15 — размер кнопки в пикселях
up.src = "up.png"; // обычная кнопка
down = new Image(40,15);
down.src = "down.png"; // кнопка при наведении курсора
click = new Image(40,15);
click.src = "click.png"; // кнопка при нажатии
function switchThis(object) { document.knopka.src=object.src; }
</script>
<img name = "knopka" border=0 SRC = "up.png" onMouseOver="switchThis(up)" onMouseOut="switchThis(down)" onClick="switchThis(click)">

Создание текстур

GIMP позволяет так же легко создавать текстуры для фоновых рисунков. Для этого используем инструмент "Текстура". Так же как и в предыдущих случаях есть несколько шаблонов текстур, в которые можно внести изменения. Примеры текстур, сформированных в GIMP:

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

Выводы

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

Подводя итоги этой серии статей, скажу что GIMP, бесспорно, очень интересный и функциональный инструмент, но ему не достает "дружественности" по отношению к пользователю. Стандартные операции обработки изображений выполняются просто и привычно, но если задача стоит более сложная и нетривиальная, может возникнуть потребность в программировании на языке Scheme (через консоль Script-Fu), а это уже совсем другая история.

Дата последней правки: 25.02.2010

Как создать красивые надписи, логотипы и кнопки для сайта

Создание графической надписи (логотипа)

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

Создание текстур

Выводы

Поделиться ссылкой на материал

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