Using The AI Artboard Tool To Generate Sprite Images
When your source files are in Adobe Illustrator, using the Artboard Tool is a huge time-saver. Very simply, what you do is create an artboard for each graphic you want to place on the sprite image, and it doesn’t matter what size they are. The trick is that you create a master artboard in which each of the graphic artboards is placed and sized so they land next to each other, sized correctly, and ready for web deployment. For best results, do not include a divider between your images, but land them directly against each other.
Export The Master Artboard
Then all you do is export the master Artboard like this…
What you end up with is a nice image that is ready for your CSS sprite setup…
Other than making sure that the artboards are pressed up against each other in the master artboard, there are other ways to optimize for performance. You will usually be smaller in file size if you save them as a PNG (instead of JPG or GIF) and if you use a horizontal layout instead of stacking them all vertically. Play around with different layouts, and you will see what I mean. The best way to conserve filesize on your sprite image is a mostly-horizonal layout with a little bit of vertical stacking.
If you would like a little help using the Artboard tool, watch this video for a quick introduction…