I have a number of equality sized square images and would like to distribute them evenly in a grid on the same image. How does one do this using Photoshop CS4? I'm trying to create a sprite. The images will have styles (borders, shadows) applied to them so using an external site isn't feasible.
3 Answers
The easiest way is to determine how many rows and columns you want, then the width and height boundaries you want the images to display in.
Lay out the first row roughly in the order you want with the leftmost edge of the leftmost image at the left boundary and the rightmost edge of the rightmost image at the right boundary. Select every layer for the first row, select the move tool (v) and click the align vertical centers and then the distribute horizontal centers button. (repeat the steps for leftmost/rightmost edges and aligning vertical centers on all rows)
Next select all of the leftmost column and align the topmost and bottommost with their respective boundaries and use the distribute vertical centers button to get the proper alignment in that direction.
Hope this helps!
Try spritesheet maker. its a free tool. I'm using it...
Stitches is a great open-source online tool that does this:
Stitches is an HTML5 sprite sheet generator.
Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only currently compatible with WebKit and Firefox browsers.
Spritesheet generatoryou should get what you want right away.