GIMP и Web-дизайн

Элементарные возможности графического редактора GIMP при создании простых изображений, которые возможно использовать для web-дизайна и не только.

Программа GIMP (The GNU Image Manipulation Program) предназначена для редактирования растровой графики. По своим возможностям эта программа максимально приближена к популярной программе Photoshop, а по некоторым своим параметрам GIMP уже давно обогнал Photoshop. Однажды поработав с GIMP, вы поймете, чего же вам не хватало в Photoshop.

В этой статье будут рассмотрены возможности программы GIMP для Web-дизайна. Данная программа является хорошим подспорьем, как для начинающего, так и для профессионального дизайнера. Чтобы создавать красивые кнопки, эмблемы, логотипы и фоновые изображения вам не нужно быть профессионалом в области растровой графики, вам даже не нужно знать Photoshop. Следуя рекомендациям в этом статье, вы научитесь создавать довольно неплохую графику за небольшой период времени. При использовании GIMP ваш сайт будет выглядеть значительно оригинальнее, чем при использовании многих шаблонов популярных Windows-программ.

Кнопки

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

Запустите GIMP (рис. 1) и выберите пункт меню Расш.->Скрипт-Фу->Кнопки->Круглая кнопка.

Рис. 1. The GNU Image Manipulation Program

Появится окно, в котором нужно будет задать параметры кнопки: текст надписи, шрифт текста, размер шрифта, цвет фона и шрифта, заполнение по X и по Y. Можно также указать внешний вид кнопки: не нажатая, не нажатая (активная) и нажатая. Если вы включите все три режима, вы получите сразу три рисунка одной кнопки в разных состояниях. Теперь смело можно использовать готовые кнопки в своем проекте. На рисунке 2 изображена не нажатая активная кнопка.

Рис. 2. Активная круглая кнопка

Второй тип кнопок – это «Простая выпуклая кнопка». Для ее создания выберите пункт меню Расш.->Скрипт-Фу->Кнопки->Простая выпуклая кнопка. Появится окно с параметрами кнопки. Параметров у простой кнопки значительно меньше, поэтому она полностью оправдывает свое название. Если вам нужна нажатая кнопка, установите одноименный параметр в окне параметров. Установив нужные вам параметры, нажмите на кнопку OK. Пример простой кнопки вы можете увидеть на рисунке 3.

Рис. 3. Простая кнопка

Эмблемы

Теперь займемся созданием логотипов и надписей для нашего сайта. С помощью меню Расш.->Скрипт-Фу->Эмблемы можно создавать различные надписи для вашего сайта. Выберите пункт меню Расш.->Скрипт-Фу->Эмблемы->Объемный контур. Среди параметров данной эмблемы доступны следующие:
1. Шаблон
2. Текст
3. Шрифт и размер шрифта
4. Радиус размывания контура и тени
5. Альфа-слой
6. Смещение тени по X и по Y

В примере на рисунке 4 я использовал шрифт LEDFIXED.

Рис. 4. Объемный контур

Сейчас нужно рассмотреть еще один полезный скрипт – «Текст по кругу». Для его использования активизируйте пункт меню Расш.->Скрипт-Фу->Эмблемы->Текст по кругу. Появится окно, в котром нужно будет указать текст надписи шрифт и его размер. Непосредственно к параметрами отображения текста по кругу относятся Начальный угол, Радиус, Угол заполнения (Заполнить угол). Установив определенным образом данные параметры, можно расположить текст не только по кругу, а и по дуге. Пример показан на рисунке 5.

Рис. 5. Текст по кругу

Лично мне очень понравился скрипт «SOTA Хром» (см. рис. 6). Для его применения активизируйте пункт Расш.->Скрипт-Фу->Эмблемы->SOTA Хром.

Рис. 6. SOTA Хром

При работе с этим скриптом можно изменить Насыщенность, светлость и фактор хрома. Для примера я использовал значения параметров -80, -47, 0.75 соответственно. Размер шрифта – 75. Кроме этих параметров, можно также задать баланс бликов и баланс хрома.

Также могу порекомендовать скрипты «Чужое свечение» и «Чужой неон». Результат работы скрипта «Чужое свечение» изображен на рисунке 7, а результат работы скрипта «Чужой неон» – рисунке 8.

Рис. 7, 8. Чужое свечение, Чужой неон

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

Фоновые изображения

Теперь перейдем к созданию различных фоновых изображений. Создать необычное фоновое изображение в GIMP можно за пару щелчков мыши. Разные шаблоны для фоновых изображений вы найдете в меню Расш.->Скрипт-Фу->Шаблоны. Например, для создания небольшой карты можно воспользоваться шаблонами «Визуализация карты» и «Земля». Пример применения шаблона «Земля» изображен на рисунке 9.

Рис. 9. Земля

Другие возможности

В меню Расш.->Скрипт-Фу->Разное можно найти интересные скрипты для изображения тех или иных объектов. Например, для создания сферы активизируйте пункт меню Расш.->Скрипт-Фу->Разное->Сфера. Пример работы этого скрипта отображен на рисунке 10.

Рис. 10. Сфера

Создание вращающего шара

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

Как вы уже догадались, сейчас мы займемся созданием вращающегося шара. Создайте новый файл, активизировав меню основного окна GIMP Файл, Новый. Установите размер нового изображения – 256x256. Тип заливки – «Прозрачное».

После создания нового изображения нам нужно использовать инструмент «Заливка с градиентом цвета», но перед этим установите цвет переднего плана и фона. Это можно сделать с помощью инструмента выбора цвета: внизу основного окна GIMP находятся два цветных квадратика. Дважды щелкнув на верхнем квадрате, вы увидите окно «Выбор цвета», в котором вы установите цвет переднего плана. Аналогично, двойной щелчок на нижнем квадратике предоставляет возможность выбора цвета фона. Установить цвета по умолчанию вы можете, щелкнув на двух маленьких квадратиках, которые находятся под большими. С помощью стрелок, расположенных над большими квадратами, вы можете переключать цвета по кругу.

В результате применения инструмента «Заливка с градиентом цвета» у вас должен получиться рисунок, похожий на этот:

Рис. 11. Заливка

Теперь щелкаем правой кнопкой мыши по любоу участку получившегося изображения. Из появившегося меню выбираем Скрипт-Фу->Аниматоры->Вращающийся шар. Затем устанавливаем параметры аниматора: количество кадров, количество цветов индекса, а также обязательно включите режим «Работать с копией». Затем нажимаем Ок и ждем, пока аниматор завершит свою работу. Потом появится окно с изображением шара. Переходим в этом окно, щелкаем правой кнопкой мыши на любой части изображения и выбираем пункт меню Фильтры->Анимация->Воспроизведение. В появившемся окне нажимаем на кнопку Пуск/Стоп (см. рис. 12). Все! Шар вращается.

Рис. 12. Результат работы аниматора «Вращающийся шар»

Потом это изображение можно сохранить в формате GIF. Для этого выберите пункт меню Файл, Сохранить. Установите тип файла «По расширению» или «GIF». При выборе определения типа файла по расширению, разумеется, нужно ввести имя файла с расширением .gif. Нажмите на конпку Ок. Затем появится окно «Экспортировать файл», в котором нужно будет установить режим «Сохранить как анимацию».

Теперь можно просмотреть файл в браузере или другой программе. Если вы хотите применить этот аниматор к уже существующему изображению, это изображение нужно преобразовать в режим RGB. Для этого выполните команду меню Изображение->Режим->RGB.

Предположим, что нам нужно разрезать наше изображение пополам, то есть разрезать на две части (или на три, четыре и т.д.). Это может потребоваться, например, для снижения времени загрузки изображения через Web, если размер изображения слишком большой.

Для этого ухватитесь мышкой за линейку слева и тащите ее до предполагаемого места разреза: появится синяя вертикальная пунктирная линия. Эта линия иногда называется направляющей. Направляющие линии используются для выравнивания или привязки к координатам. С помощью направляющей установите границу разреза. Аналогично, ухватившись за верхнюю линейку, установите горизонтальную линию разреза.

Итак, мы установили границы разреза изображения (см. рис. 13). Осталось его только разрезать. Для этого выберите пункт меню Изображение, Преобразования, Гильотина и вы получите четыре изображения.

Рис. 13. Направляющие линии

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

Рис. 14. Слои изображения

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

В этой статье я рассмотрел только некоторые возможности программы GIMP. Советую вам поэкспериментировать с программой и изучить ее подробнее.