Спрайт (в вебмастерской терминологии) есть фиговина призванная уменьшить количество запросов к серверу путем аккамулирования в себе кучи картинок которые используются в верстке. При помощи "хитрых" приемов верстки в нужном месте появляется нужный кусочек изображения из спрайта и выглядит как полагается, но при этом на 100 показанных картинок (например) реально у сервера запрашивается только одна - спрайт который всю эту мелочевку содержит. Как ими правильно пользоваться, как верстать и как не злоупотреблять ими - читайте у настоящих Верстальщиков. "Я не настоящий сварщик" ©

Я тут хочу написать о другом. Допустим есть у нас NN картинок для спрайта. Как спрайт сделать. Ну как, берём открываем там фотошоооп или гимп или ещё какой-нибудь графический редактор и начинаем все засовывать туда и записывать координаты где чего лежит. Теоретически все так и должно быть, профессионалы я думаю так примерно и делают. Я не профессионал-верстальщик и вообще не верстальщик, но зато я большой лентяй. Поэтому рассмотрим лентяйский пример ниже :)

Вообще-то для этой цели есть ещё куча онлайн генераторов спрайтов, но все что я нашел мне не понравилось, а то что понравилось - просило денег. Они легко гуглятся - решайте сами как быть.

В общем суть примера. Есть NN картинок одинакового разрешения и типа. У меня это было 4 png-шки 128x128. Когда я поставил и открыл Gimp мне сделалось нехорошо. Опять надо все это вспоминать, считать, двигать подгонять.. Пошел гуглить на предмет того как бы это в гимпе сделать автоматически а нагуглил вот что. Есть консольная утилитка convert, часть пакета imagemagick, я даже когда-то давно ей пользовался но забыл уже про это. Она замечательно с этой задачей справляется.

ставим imagemagick

sudo apt-get install imagemagick

это у нас ман по конверту, ага

man convert

идем в папку с файлами из которых будем лепить спрайт

cd 4sprite-test/
ls
facebook.png  github.png  google.png  twitter.png

теперь берем и все эти файлы склеиваем вот так

convert *.png +append sp-big.png
ls
facebook.png  github.png  google.png  sp-big.png  twitter.png

если надо ещё и изменить размер исходных файлов то делаем так

convert *.png -resize 64x64 +append sp-med.png

Думаю даже не надо пояснять что к чему, все понятно из ключей к конверту. Единственное что в примере под маску попадают все файлы *.png в папке. И если оттуда не убрать сгенеренный спрайт то при повторном запуске в новый созданный спрайт он попадет тоже. Повнимательнее с рекурсией и маской:)

з.ы. Ещё стоит помнить что конверт умный, по расширению результирующего файла определяет результирующий тип файла, соот-но если вы например из png склеите jpg то логично потеряете прозрачность.

No comments here yet.