Photoshop for Game Programmers : The Slice

Starting a new project, like many programmers I like to grab some placeholder art so I can get some idea of what my final game might look like. I've been programming some 2d RPG games and wanted some path tiles to use for a test program. I found this image which fit my needs quite nicely

The source file - from which we will get our placeholder tiles.

This image above can be used to make paths through grass but at the moment it's all one image of 96 x 96 pixels. I want to divide it into 9 tiles of 32 x 32 each - 3 tiles per row and 3 tiles per column. This could be done be carefully selecting each 32 by 32 tile, copying it to a new photoshop document and saving it out - but that was is slow and error prone. So how to make thing more efficient? Enter the slice tool!

The slice tool is hidden under the crop tool, what you want is the "Slice Select Tool"

Select the "Slice Select Tool", a little 01 will appear on the image, press that and then press the "Divide" button on the control bar at the top of the screen. It will bring up a nice little ""Divide Slice" dialog box.

The divide slice dialog blocks lets you choose how to break up the source image

The "Divide Slice" dialog box lets you choose how many slices on the vertical and how many on the horizontal, since we know there are 3 x 3 tiles here, we can just choose 3 for both axis. Once that's done the source image will update in realtime and show the slices we've just asked for. Crisp perfectly deliminated tiles of 32 by 32 pixels.

The final step is saving out the tiles as separate images, I do this by choosing Save for Web and Devices.

Save for Web and Devices Dialog

Slices are Jpeg by default. If you want something other than Jpeg then drag and select all the slices and choose the output format you want. Then after choosing the format, press the save button and get this final dialog.

Save dialog with option for saving out all slices.

The big red arrow shows the option that allows all files to be saved out separately. Here we go:

All 9 tiles ... only the first is PNG because I didn't select *all* the slices in the Save for Web and Devices dialog - doh!