Создание и оптимизация CSS спрайтов в Gimp

На странице CSS спрайты мной был опубликован обзор трёх генераторов CSS-спрайтов – программ для автоматического создания спрайтов CSS, реализующих прогрессивную технологию увеличения скорости загрузки веб-страниц. В этом обзоре будут рассмотрены создание и оптимизация CSS-спрайтов в бесплатно распространяемом графическом редакторе Gimp. Кроме простого и лёгкого создания спрайтов и необходимых стилей (CSS) этот редактор позволяет не только объединить изображения в css спрайты, но и оптимизировать и уменьшить размер полученного спрайта. Помимо этого также имеется возможность задать нужные опции стилей и оптимизировать и их. И всё это не отходя от кассы, то есть, не выходя из программы и не пользуясь другими приложениями.

Сначала несколько оговорок и ссылок. На написание этого обзора меня натолкнула статья с сайта GIMP Plugin Registry, где опубликован плагин CSS WebSprites. В ней достаточно подробно описывается создание CSS спрайтов и стилей для них в редакторе Gimp с помощью упомянутого плагина. Статью можно найти на сайте GIMP Plugin Registry. Некоторые подробности о плагине (на португальском) можно найти на сайте автора Hmagalhaes. Оптимизация спрайтов с помощью плагина Save for Web навеяна материалами с сайта Антона Лапшина GimpArt.Org.

Пример создания и оптимизации CSS-спрайтов будет рассмотрен для юниксовой версии Gimp. Для пользователей Windows будут делаться оговорки, где необходимо. Сначала я опишу процесс создания и оптимизации спрайтов, а в конце приведу для заинтересовавшихся пользователей ссылки на необходимый инструментарий. Этот обзор, как и другие мои опусы, не претендует на какую-либо гурувость или менторность и предназначен для среднестатистических пользователей.

Хочу особо подчеркнуть,что все действия по объединению изображений, созданию CSS спрайта и созданию стилевого файла проводились в юниксовой версии Gimp 2.6.12. Чуть позже, после написания этой статьи я все же решил установить Gimp под Windows. Установил последнюю версию на момент написания статьи (2.8.6) и проверил работу плагинов под Windows. Результат аналогичный и даже лучше, поэтому кое-где по тексту я сделал вставки по работе в Windows.

Создание и оптимизация CSS-спрайтов в Gimp

Создание спрайтов осуществляется за три шага.

Создание спрайтов

Алгоритм работы следующий:

  • Открываем нужные для создания спрайта изображения как слои
  • Выравниваем (упорядочиваем) слои по горизонтали или вертикали
  • Создаём CSS-файл

Основная работа сделана. Далее для полноценного примера нам предстоит сделать еще несколько шажков:

  • Оптимизировать и сохранить полученный мастер-спрайт (лучше в формате PNG)
  • Создать демонстрационную веб-страницу с необходимой HTML-разметкой
  • Посмотреть результат

А теперь рассмотрим все это более подробно.

Открываем нужные для создания CSS-спрайта изображения как слои

Я заранее положил нужные тестовые картинки в отдельную папку для удобства работы. Для простоты и чистоты эксперимента выбран формат файлов PNG, с этой же целью выбран и одинаковый размер картинок 48х48 px. Чтобы объединить изображения в CSS спрайт открываем Gimp и в меню Файл выбираем пункт Открыть как слои.

Скриншот открытия изображений

В открывшемся диалоге находим подготовленную папку с исходными изображениями и множественным выбором через CTRL или SHIFT открываем нужные картинки. Я загрузил их все.

Скриншот папки с исходными изображениями

Изображения на рабочем пространстве программы будут выглядеть как стопка слоёв, одно под другим.

Скриншот рабочей области редактора

Переходим к следующему шагу нашей работы.

Выравниваем (упорядочиваем) слои по горизонтали или вертикали

Плагин CSS WebSprites, который позволяет создать в Gimp'е CSS-спрайты, добавляет в меню Изображение пункт Веб-спрайты.

Скриншот меню

Этот пункт меню содержит три подпункта, в этом шаге мы остановимся на первых двух. Их назначение понятно без особых пояснений – они растягивают стопку слоёв-изображений по вертикали или горизонтали соответственно. Таким образом создаётся мастер-спрайт (спрайт-лист) с вертикальной или горизонтальной компоновкой. Выберем для нашего примера горизонтальную компоновку. На скриншоте внизу посмотрим результат наших действий.

Скриншот горизонтального спрайта

Если заглянуть в свойства изображения, то можно увидеть его размер 288х48 px. Отсюда можно сделать заключение, что программа просто склеила исходные изображения в ленту без создания промежутков (смещений, отступов) между спрайтами и их границами, которые создаются некоторыми специализированными генераторами спрайтов (см. предыдущий обзор CSS-спрайты). Эти промежутки (по мнению некоторых пользователей) предохраняют визуализацию спрайтов от различных накладок при просмотре страницы в браузере с пользовательским изменением масштаба просмотра (см. предыдущий обзор CSS-спрайты). Лекарством от этого недуга (опять же по мнению пользовательского сообщества) может послужить создание страховочных отступов в стилевом файле. Переходим к следующему шагу.

Создаём CSS-файл

Чтобы создать стилевой файл для нашего CSS-спрайта, выберем третий пункт в меню Изображение > Веб-спрайты, а именно Экспорт CSS-файла. Появляется диалоговое окно следующего вида.

Скриншот диалогового окна

Пояснения к этому диалогу я приведу из упомянутого выше первоисточника. При создании CSS-файла программа использует имена каждого слоя в качестве имен селекторов.

Имеющиеся параметры:

  • CSS-файл – Введите здесь имя выходного CSS-файла
  • Папка CSS-файла – Папка для сохранения CSS-файла
  • Файл спрайта – Имя мастер-спрайта, которое будет использоваться в стилевом файле
  • Префикс селектора – Префикс, добавляемый к каждому селектору CSS. Например, вы делаете меню, в котором каждый элемент является пунктом списка "li" и идентифицируется как класс CSS, поэтому очень удобно установить префикс "li"
  • Постфикс селектора – Постфикс, добавляемый к каждому селектору CSS. Используется также для удобства создания стиля и разметки страницы
  • Значение свойства background-repeat – Выбор соответствующего значения указанного свойства
  • Абстракция селектора – С его помощью можно уменьшить избыточность в файле CSS, то есть слегка оптимизировать его. Например, вы делаете меню, в котором каждый элемент является пунктом списка "li", то установите абстракцию "li". При этом свойства, такие как "background-image" будут установлены только в этой абстракции, а не в каждом селекторе
  • Группировать селекторы – Отметьте эту опцию для группировки селекторов в одно уникальный правило, чтобы установить свойства, как "background-image" только один раз, чтобы уменьшить избыточность CSS. Используйте эту опцию при невозможности использования абстракции селекторов.
  • Включить ширину слоя – Включает ширину каждого слоя в CSS
  • Включить высоту слоя – Включает высоту каждого слоя в CSS
  • Включить размеры в сгруппированные селекторы/абстракцию селекторов – Используйте эту опцию, чтобы установить ширину и высоту только на сгруппированные селекторы и/или на абстракцию селекторов. В этом случае будут использованы размеры первого слоя
  • Сохранять пробелы – Отключите эту опцию, чтобы удалить все необязательного пробелы из стилевого файла
  • Сохранять переносы строк – Отключите эту опцию, чтобы удалить все необязательного разрывы строк из стилевого файла
  • Удалять расширения файлов – Удаляет расширения файлов в именах слоёв (естественно вместе с точкой). Эту опцию лучше не отключать во избежание неожиданных накладок, поскольку точки также используются в CSS.

Не мудрствуя лукаво я оставил все опции по умолчанию за некоторыми исключениями: установил нужную папку вывода и установил префикс селекторов в виде точки, поскольку предполагаю использовать их в виде классов. Увидеть выбранные параметры можно на вышеприведенном скриншоте. Нажимаем на кнопку OK и посмотрим на созданный CSS-файл, в котором среди прочего мы хотим увидеть координаты css спрайта (значение свойства background-position).

Скриншот стилевого файла

Смотрим и видим, что координаты присутствуют. Кроме этого видим, что возможности для оптимизации стиля я недоиспользовал: можно было за счёт выбора нужной опции указать размеры картинок только один раз в сгруппированных селекторах (поскольку картинки у меня все одного размера) и убрать необязательные пробелы. С другой стороны главная моя задача показать возможность создания CSS-спрайтов в редакторе Gimp, а заинтересованные пользователи могут испытать все возможности плагина CSS WebSprites. Хуже другое, у меня было 6 исходных картинок и одна из них почему-то не отображена в стиле. Все стало понятно, когда я увидел неизвестную мне картинку под названием Фон. Видимо, программа считает нижнюю картинку в стопке слоев фоном и, не смотря на имеющееся у неё имя, самовольно назвала её фоном. Досадно, но докапываться до причин сего явления я сейчас не буду (может сделал что-то не так), а просто поправлю стилевой файл. Вот таким он стал (см. ниже). Позже я перепроверил создание стилевого файла. С завидной регулярностью при разном количестве картинок, при смешанной загрузке и с разными именами один из селекторов всё равно получал имя Фон вместо наименования по соответствующей картинке. Программа или скрипт загружала картинки в обратном алфавитном порядке, а фоном становилась картинка, имя которой было первым в прямом алфавитном порядке. (При работе под Windows этого не наблюдалось – все селекторы имели имена исходных картинок. Может быть версия Gimp посвежее, может еще что-нибудь).

Скриншот отредактированного стилевого файла

Идем дальше.

Оптимизируем и сохраняем полученный мастер-спрайт

Для этого переходим в меню Файл и выбираем пункт Сохранить для веба.

Скриншот меню

В открывшемся диалоге плагина Save for Web я установил параметры оптимизации, указанные на скриншоте и сохранил полученный мастер-спрайт в нужную мне папку.

Скриншот диалога сохранения спрайта

Обратите внимание на размер оптимизированного файла и сравните его с суммарным размером исходных картинок, из которых он состоит. Посмотреть их можно на этом скриншоте. Разница очевидна. (Здесь я немного слукавил: исходные изображения в примере имеют глубину цвета 24 бит, а результирующий мастер-спрайт имеет глубину цвета 8 бит. В случае картинок с одной глубиной цвета и входных, и выходной – разница не столь значительна, но достаточно существенна.)

Вот созданный мастер-спрайт в чистом виде. Для наглядности он обведен рамкой.

Скриншот спрайта

Пойдем дальше.

Создаем демо-страницу.

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

Скриншот HTML-разметки

Кроме этого для наглядности просмотра в браузере я добавлю в стилевой файл различные отступы в некоторые селекторы.

Скриншот стилевого файла

Открываем демонстрационную страницу в браузере. На скриншоте ниже приведен её фрагмент. Расположение картинок лесенкой за счет отступов в селекторах наглядно показывает один из многих вариантов возможного размещения нужных картинок в нужных местах веб-страницы. Можно было бы применить обратный или произвольный порядок размещения картинок в HTML-разметке, было бы ещё наглядней.

Скриншот фрагмента демо-страницы

Ну, вот и всё. Задача выполнена. Созданы CSS-файл, CSS-спрайт и демо-страница. Этот пример показывает, что в Gimp можно просто и эффективно создавать и оптимизировать CSS-спрайты. Причём есть возможность оптимизации как стилей, так и изображений. Мне кажется, он может пригодиться для создания с нуля современных стильных меню из спрайтов с применением rollover-эффекта изображений на CSS. Возможностей для создания различных кнопок и других графических элементов для веб-страниц в редакторе предостаточно. Загляните в меню Файл > Создать – чего там только нет: и кнопки, и логотипы и текстуры, и темы веб-страниц… Загляните в меню Фильтры > Веб, здесь есть возможность порезать картинку, а также создать карту-изображение. Покопавшись немного можно нарыть еще массу возможностей, было бы желание.

Вдогонку

Ранее я несколько скептически относился к созданию CSS-спрайтов при помощи графических редакторов и предпочитал использовать специализированные генераторы спрайтов (см. предыдущий обзор CSS спрайты). Но связка бесплатного Gimp с плагинами CSS WebSprites и Save for Web заставила изменить мое мнение. Действительно, очень редкие генераторы CSS-спрайтов имеют в своём арсенале средства оптимизации графики, поэтому приходится прибегать к сторонним программам или сервисам. Сам же чрезвычайно мощный Gimp позволяет или подправить графику, используемую в спрайтах, или создать её под свои нужды с нуля. Возможности этого редактора впечатляют. Вот только один пример. Я говорил о том, что для визуализации картинок при масштабируемом просмотре, желательно иметь промежутки (зазоры, отступы, смещения) между картинками в спрайте. В нашем примере их не было, но ничто не мешало мне увеличить размер холста одной картинки в стопке слоёв (меню Изображение > Размер холста), отцентрировать картинку на увеличенном холсте и применить полученное ко всем слоям в стопке – зазоры созданы-с. Всё это делается быстрее, чем вы прочитали этот текст – за три-четыре клика. Попробуйте и убедитесь в этом сами. При использовании в спрайте картинок разных размеров тоже возможны варианты (меню Слой > Границы слоя). И всё это делается в редакторе, не выходя никуда. Если хотите, можно использовать весь арсенал этого мощного редактора для модернизации изображений под свои нужды. Понравилась мне также возможность задать некоторые параметры создаваемого стилевого файла. Этой возможностью не могут похвастаться некоторые специализированные онлайн-сервисы и программы по созданию CSS-спрайтов. То, о чем я сказал, лежит на поверхности, а если копнуть поглубже… Пользователи, которые (я надеюсь) решат попробовать этот метод создания CSS-спрайтов, найдут свои изюминки.

Где взять упомянутые плагины? Посмотрите на ссылки в начале обзора. На сайте Антона Лапшина есть ссылки на загрузку плагина Save for Web как для Windows-, так и для Unix-систем. Плагин для Unix по ссылке с его сайта устанавливается традиционно и вкупе с кучей других плагинов. Плагин для Windows я не устанавливал, у меня нет Gimp под Windows. Плагин для Windows (webexport.exe) устанавливается в папку расширений, чуть ниже я приведу скриншот для Windows XP. Второй плагин CSS WebSprites можно скачать по второй ссылке в английском и португальском варианте. Тем кто не владеет ни тем ни другим языками или предпочитает русский, предлагаю скачать русифицированный мной плагин со страницы скачивания русификаторов. Он состоит из трёх небольших файлов и упакован в zip-архив. Я установил его в папку Скрипты для Gimp, для этого надо просто скопировать файлы плагина в эту папку. На скриншотах этого обзора вы видели переведенный плагин в работе. Как найти упомянутую папку для установки плагина? Легко. Открываете программу, затем переходите в меню Правка > Параметры, далее в открывшемся окне настроек щелкаете по треугольничку (или плюсику) Каталоги, находите пункт Сценарии, щелкаете по нему и видите такую картину.

Скриншот пути установки скрипта

На правой панели указаны пути к папкам для сценариев. У себя я установил файлы плагина по первому пути. Это справедливо для Unix, какие пути увидят пользователи Windows мне неведомо, но сложного здесь ничего нет ниже будут приведены скриншоты пути для установки плагинов под Windows. Кстати, для Gimp под Windows существует еще один плагин для оптимизации графики, созданный на базе Riot (Radical Image Optimization Tool). Мне кажется, этот плагин эффективнее уже упомянутого (так оно и оказалось при последующем тестировании). Найти его можно на сайте разработчика программы Riot.

Приведу скриншоты для пользователей Windows:

Вид пункта меню плагина CSS WebSprites в меню Изображение для Gimp под Windows.

Скриншот пункта меню

Вид пунктов меню плагинов Save for Web и Save for Web with Riot в меню Файл для Gimp под Windows.

Скриншот пункта меню

Путь установки плагина Save for Web для Gimp под Windows.

Скриншот пути установки плагина

Путь установки плагина CSS WebSprites для Gimp под Windows.

Скриншот пути установки плагина

Пожалуй, все.

Мой обзор не претендует на полноту, но я достаточно подробно описал то, через чего прошёл сам. Думаю, среднестатистический пользователь, каковым я и сам являюсь, почерпнет что-то новое для себя.

Рекомендую еще несколько моих опусов о css спрайтах и иже с ними:

Спасибо за то, что вы это всё прочитали.

Если понравилось, поделитесь с друзьями.