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

Автор: Артем Кашканов

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



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



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

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

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

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



Результат:



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



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

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

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



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



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



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



onMouseOut="switchThis(down)" onClick="switchThis(click)">



Скрипт для показа такой кнопки показан ниже (один из множества вариантов). Вам нужно вставить в него свои 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), а это уже совсем другая история.

Предыдущая статья
Как фотографировать ночью

Поделившись ссылкой на сайт в социальной сети вы поможете мне в продвижении и развитии проекта!

Обсуждение публикаций сайта и общение на фототемы в группе Вконтакте. Присоединяйтесь!

Политика сайта

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

Материалы на сайте защищены законом РФ об авторских правах. Перепубликация материалов сайта без согласования с автором запрещена и будет преследоваться по закону!

Реклама на сайте отображается автоматически в соответствии с вашими интересами. Для определения интересов рекламными сервисами используются cookies.

Контакты

Если вы заметили на сайте неточность или хотите высказать свои пожелания – присылайте их по электронной почте: kashkanov_as@mail.ru

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

Статистика сайта:

Яндекс.Метрика

Индекс цитирования