Вход   Регистрация

Поиск по сайту

Присоединяйтесь к группам

Вконтакте
akfotosait

Одноклассники
54003350175999

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

Продолжаю цикл статей про возможности графического редактора 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), а это уже совсем другая история.

Категория: Как обрабатывать фотографии

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

Книга «О фотографии простым языком»

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

Выберите способ оплаты:

Все мои книги      Написать мне

Если материал понравился, пожалуйста, поставьте "лайк" или напишите отзыв!

Чтобы написать комментарий, нужно войти на сайт.
Комментариев пока нет

Статьи на эту же тему

Самые читаемые материалы (Top10)