29

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?

Abadaba
  • 1,418
  • 6
  • 19
  • 29

7 Answers7

15

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.

mickmackusa
  • 33,121
  • 11
  • 58
  • 86
BYS2
  • 4,870
  • 4
  • 20
  • 31
  • 1
    when i drag the sprite onto the application then click export selected, it freezes... – Abadaba Feb 22 '12 at 00:07
  • 2
    @abadaba, oh really? it seems to work well for me :S.. do you have a copy of your sprite that I can download from the internet? I've tried it on some of my own and it seems to work perfectly – BYS2 Feb 22 '12 at 21:49
  • 1
    Ok...this was just awesome. Worked perfectly. I was not expecting it to do ALL the work for me. Thanks a ton! – Arbel Nov 18 '13 at 15:36
  • 1
    this program works great! for the people for which it freezes when you export it, according to the FAQ you have to unselect the "export to folder" checkbox, that did the trick for me :) – xorinzor Dec 29 '13 at 15:00
  • good to know my suggestion is still being looked at after all this time :P – BYS2 Dec 30 '13 at 15:57
  • 1
    @BYS2 No doubt this one should be the correct answer. That program is amazing!! Thanks!! – Nick L. May 19 '14 at 17:35
  • 1
    Also, laughed on the FAQ: -"Do you know how to spell Alfred?" -"Yes". – Nick L. May 19 '14 at 17:37
  • It has to be run as an administrator (on Windows 8 at least) – scar80 Feb 26 '15 at 13:48
  • Link not working for me – Black Thunder Jul 07 '20 at 12:00
8

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.

slice **select** tool

Indolering
  • 2,845
  • 27
  • 43
Abadaba
  • 1,418
  • 6
  • 19
  • 29
6

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.

fmovlex
  • 61
  • 1
  • 2
  • note this only works when you have an CSS file containing the width/height and background-position of the individual images, when you only have a sprite image this option won't help you – xorinzor Dec 29 '13 at 15:01
6

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

6ton
  • 4,038
  • 1
  • 18
  • 37
5

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

Adam Seabridge
  • 1,711
  • 17
  • 24
0

There is an android application that will dynamically split a sprite map:

https://play.google.com/store/apps/details?id=com.fourqueue.android.texture

Four Queue
  • 1
-2

Creation of png:

I use spritepad to create the png image, just drag and drop your images to create the sprite: http://spritepad.wearekiss.com/ (but as I assume you dont want this step).

CSS:

After this I import the image to spritecow and get the css for every image (double click every image to get its height-width and coordinates): http://www.spritecow.com/

You could use spritepad only but I prefer to use it only for the creation of the sprite. For css, spritecow seems easier to me. Anyway its up to you.

vaskort
  • 1,871
  • 1
  • 18
  • 27