Наши партнеры

UnixForum

Библиотека сайта rus-linux.net

Использование GIMP и pngquant в процессе разработки веб-страниц

Автор: Владимир Царьков
Дата публикации: 18.04.2012

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

Обработку тестовых изображений мы осуществляли с помощью GIMP (GNU Image Manipulation Program) версии 2.6.11 и pngquant 1.0.

Сконцентрируемся на методах подготовки графики к размещению в Интернет, а также автоматизированной генерации HTML кода, связанного с нею. Люди, занимающиеся разработкой веб-страниц часто решают следующие вопросы.

Как сделать изображение прозрачным вне контура нарисованного объекта?

Будем считать, что обрабатываемая картинка хранится в формате PNG (Portable Network Graphics. Подробнее см. [Миано2003, С. 249-318]).

Добавьте альфа-канал к изображению. Это делается выбором вкладки ``Слой -> Прозрачность -> Добавить альфа-канал'' (Layer -> Transparency -> Add alpha-chanel).

Выберите инструмент ``Выделение соседних областей по схожести цвета'' (Select Continguous Regions; см. панель инструментов). Далее последовательно, одну за одной выделяйте области изображения, которые должны быть удалены и нажимайте кнопку <Delete> для их устранения.

На месте удалённых частей картинки останется ``прозрачный фон''.

Как уменьшить объём памяти, занимаемый изображением?

Файлы в формате PNG, особенно содержащие однотонно закрашенные области, хорошо ужимаются средствами программы pngquant. В системе на базе deb пакетов её можно установить командой sudo apt-get install pngquant.

К примеру, созданные программой Dia файлы PNG обычно содержат минимум цветов. Для них подойдёт команда pngquant 8 ИМЯ_ФАЙЛА.png. Подробнее см. man pngquant.

Как создать карту (тэг map языка HTML) изображения?

Выберите в меню ``Фильтры -> Веб -> Карта изображения'' (Filters -> Web -> Image map). Перед вами появится окно для создания карты изображения. Подразумеватся, что вы достаточно опытный пользователь, чтобы разобраться в его нехитром интерфейсе. Если что --- читайте справочное руководство.

GIMP сохраняет получившуюся карту в файле с расширением map. Ниже представлен пример того, что в нём может находиться. 

<img src="ИМЯ_ФАЙЛА_ИЗОБРАЖЕНИЯ.png" width="303" height="278" border="0" usemap="#map" />

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:vl -->
<area shape="poly" coords="98,36,97,31,143,137,166,14,133,9,117,22" alt="file 1 HTML" href="file1.html" />
<area shape="poly" coords="153,162,123,244,206,268,196,241" alt="FILE 2 HTML" href="file2.html" />
</map>

По сути --- это текстовый файл, содержимое которого нужно вставить в код разрабатываемой вами веб-страницы.

Как разделить изображение на части и поместить его в HTML таблицу?

Воспользуйтесь вкладкой ``Изображение -> Направляющие'' (Image -> Guides) для того, чтобы разбить изображение на сегменты, которые потом станут клетками таблицы на языке HTML. Затем нажмите ``Фильтры -> Веб -> Slice...'' (Filters -> Web -> Slice...) и завершите нарезку картинки. На выходе у вас получится файл с HTML кодом таблицы и набор изображений, составляющих исходную картинку.

В процессе выполнения этой операции могут появиться сообщения об ошибках. Два из них стоит отметить особо.

Traceback (most recent call last):
  File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response
    dialog.res = run_script(params)
  File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script
    return apply(function, params)
  File "/usr/lib/gimp/2.0/plug-ins/py-slice.py", line 117, in pyslice
    left, right, top, bottom, i, j, ""))
  File "/usr/lib/gimp/2.0/plug-ins/py-slice.py", line 182, in slice
    pdb.gimp_file_save(temp_image, temp_drawable, filename, filename)
RuntimeError: Процедура 'gimp-file-save' вызвана с некорректным идентификатором 
для аргумента 'drawable'. Скорее всего, модуль пытается работать со слоем, 
который уже не существует.

Причина появления обозначенного сообщения кроется в том, что изображение, которое мы хотим разрезать на части, содержит несколько слоёв. Таким образом, решить проблему можно соединив (merge) все слои изображения перед ``резкой'' (slicing).

Traceback (most recent call last):
  File "/usr/lib/gimp/2.0/python/gimpfu.py", line 692, in response
    dialog.res = run_script(params)
  File "/usr/lib/gimp/2.0/python/gimpfu.py", line 353, in run_script
    return apply(function, params)
  File "/usr/lib/gimp/2.0/plug-ins/py-slice.py", line 117, in pyslice
    left, right, top, bottom, i, j, ""))
  File "/usr/lib/gimp/2.0/plug-ins/py-slice.py", line 172, in slice
    temp_image.crop(right - left, bottom - top, left, top)
TypeError: integer argument expected, got float

Избавиться от указанного выше сообщения можно заменив строку номер 172 в файле /usr/lib/gimp/2.0/plug-ins/py-slice.py. Закомментируйте (с помощью знака решётка: #) старое содержимое 172-ой строки и вставьте следующую строку: temp_image.crop(int(right - left), int(bottom - top), int(left), int(top)).

Рассмотренные приёмы работы с GIMP и pngquant позволяют быстро решать задачи, возникающие в процессе создания веб-страниц.

Литература для самообразования

  1. Миано Дж. PNG. Развёртывание сжатых данных PNG-изображения. Создание PNG-файлов // Форматы и алгоритмы сжатия изображений в действии. Учеб. пособ. М.: Издательство Триумф, 2003. С. 249-318.
  2. Хилл Ф. Альфа-канал и смешивание изображений // OpenGL. Программирование компьютерной графики. Для профессионалов. СПб.: Питер, 2002. C. 632-636.
  3. Roelofs G., Зенков И., Busheff D. PNG: Простое введение в особенности формата. URL: http://rus-linux.net/zen/png_feature/png_feature.html (дата обращения: 10.04.2012).
  4. GIMP keyboard shortcuts. URL: http://www.gimpusers.com/gimp/hotkeys (дата обращения: 10.04.2012).
  5. pngquant. URL: http://www.libpng.org/pub/png/apps/pngquant.html; http://pngquant.org/ (дата обращения: 10.04.2012).