Easy Tool to Decompose Sprite Image

Easy tool to decompose sprite image?

Use the slice tool in Photoshop:

1. Use the slice select tool (note the select part of that, see screenshot).
2. Right-click anywhere on the canvas and select Divide Slice... from the drop down menu.
3. Enter in the height/width or sprite multiple.
4. Once finished, go to save for web and devices...
5. When you save, this will export all the individual cutouts to the file format of your choosing in a separate folder.

If they are of uneven size (not on a grid) you can also select them individually with the vanilla 'slice select' tool. If you have a lot of similar grids, save everything as a photoshop action and batch process them.

Generating CSS sprites for dynamic images

You can check and try jawr (https://jawr.dev.java.net/) library for generating/modifying (also compressing, merging) css files on servlet. It has option to change background images dynamically.
You may arrange bundles for switching css file(s) for changing skin(s).

Plus side: You can also manage and arrange your .js files too!

How to get the size of sprite in a sprite Sheet?

You do know how many sprites are there in each row and column right? then just divide the width with how many sprites are there in a column and divide the height with how many sprites are there in a row.

(I may get the column and row wrong, I'm not native English, but you should just switch the row/column if the first try didn't work out)

---

Related Topics