Split image into 16x16px or 32x32px sections then save them individually?



Split image into 16x16px or 32x32px sections then save them individually?


Question

I want to split up the terrain.png image from Minecraft to use in some projects. Is there a quicker way to split the image than selecting each 16x16px section and copy-pasting the sections into new files?

Here is an example:

Example image

2011/06/05
1
4
6/5/2011 10:05:00 PM

Use the Slice Tool like this:

  1. Drag out a slice that encompasses the entire image. You want a "slice", in other words, that is the entire image.

  2. Right-click (Ctl-click with 1-button mouse on a Mac) and choose "Divide Slice" from the context menu. Select your slice sizes and click OK. (Note: you might consider choosing how many slices, rather than what size. It might make things a bit easier when it comes to reassembling the slices.)

  3. Choose "Save for Web&Devices", set whatever parameters will work best for your application, choose a directory in which to save the slices and hit Save. The save creates a folder called "images" and puts all of your slices in there, each with the original filename plus a numeric suffix.

You're done.

[Late edit:] I had one of those forehead-smacking moments. On step 3, choose "Save As Type: HTML and images" to have Photoshop output the slices and a handy HTML Table that puts everything where it should be. One of the few cases where tables are somewhat useful in web design.

2011/06/06
5
6/6/2011 7:25:00 PM