Easy tool to decompose sprite image?

Question

I have a lot of sprite images that contain dozens of icons. Is there an easy way to unravel the sprites into separate image files either automatically or feeding it coordinates, widths and heights?

Solution 1

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.

Solution 2

This program is pretty good at decomposing sprites into individual frames

https://github.com/ForkandBeard/Alferd-Spritesheet-Unpacker

it supports all standard bitmap formats, .png, .bmp, .gif, .tiff and does everything pretty much automatically.

Solution 3

I encountered a similar problem after losing the source images for a sprite and built this relatively simple tool: https://github.com/fmovlex/desprite

Hope this helps.

Solution 4

This one worked nicely for me to extract images from jquery ui sprites http://renderhjs.net/shoebox/

Solution 5

give this as try as it will split it into individual rows: http://imagesplitter.net

View more solutions