coub css express.js freeware git jquery laravel links linux macos mysql node.js php PostgreSQL python task1 ubuntu vim virtualbox анекдот игры интересно музыка стихи цитаты

Как быстро сделать спрайт? Ubuntu December 26, 2012
Спрайт (в вебмастерской терминологии) есть фиговина призванная уменьшить количество запросов к серверу путем аккамулирования в себе кучи картинок которые используются в верстке. При помощи "хитрых" приемов верстки в нужном месте появляется нужный кусочек изображения из спрайта и выглядит как полагается, но при этом на 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 то логично потеряете прозрачность.
linux ubuntu

Comments

No comments here yet.
You have to login to post a new comment.
Want this blog? Checkout that  here