: Create icons from sprite image If I've a big sprite png image with 40x40 icons. How I can convert it to separate images for each icon with photoshop or gimp? As the sprite is quite big I

@Ogunnowo857

Because "the sprite is quite big", an excellent "automated method" is imagemagick. I know it is not Gimp or Photoshop but with large files and automation, it is by far easier to use imagemagick. You can automate this with simple Cron -one-liner, $ crontab -e but ask more about it in Stackoverflow. Anyway here the command:


$ convert your_grid.png -crop 100x100 out%d.png


getting new icons, $ sudo apt-get install imagemagick in Ubuntu. You can thank RJ for this -- welcome to the ##imagemagick -irc channel in Freenode if you need help.

Vote Up Vote Down

@Cugini998

Okay, if you don't have too many sprites then this shouldn't take too long. It's not automated, but if that's what you're looking for let me know and I can help you with a script to do it (although at that point this begins to fall out of the bounds of Graphic Design)


Setup your sprite grid in the Photoshop preferences: 40px x 40px with 1 subdivision.

Make sure the grid is showing (View -> Show -> Grid) and snapping is on (View -> Snap To -> Grid)
If the rulers aren't showing around your document, press Cmd (Ctrl) + R to show them.
Click on the left side ruler and drag onto your document to make vertical guides. Line up the guides with your grid. Do the same horizontally from the top ruler. You can hide the grid now with Cmd (Ctrl) + "

Select the Slice Tool and press Slices from Guides

File -> Save For Web & Devices
Save Images Only


Another way to do this is to select the slice tool and create one big slice around the entire image. Then, with the slice tool still selected, right click on the slice and click on "divide slice". You will have several options for how to divide the slice both horizontally and vertically. You can divide it evenly in a certain number of slices or you can specify a pixel size.

Vote Up Vote Down