Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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 would prefer and automated method.

share|improve this question
add comment

2 Answers

up vote 5 down vote accepted

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)

  1. Setup your sprite grid in the Photoshop preferences: 40px x 40px with 1 subdivision.
  2. enter image description here
  3. Make sure the grid is showing (View -> Show -> Grid) and snapping is on (View -> Snap To -> Grid)
  4. If the rulers aren't showing around your document, press Cmd (Ctrl) + R to show them.
  5. 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) + "
  6. enter image description here

  7. Select the Slice Tool and press Slices from Guides

  8. enter image description here
  9. File -> Save For Web & Devices
  10. 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.

share|improve this answer
    
That's quite good. Thank you hamstu –  lujop May 6 '12 at 18:49
add comment

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.

share|improve this answer
    
+1, though I doubt the OP is actually looking for the level of automation that would require the use of cron. Based on the comments, it looks like they'll probably be fine with any method that doesn't require manually selecting and saving each icon one by one. –  Ilmari Karonen Aug 29 '12 at 11:25
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.