How to work with image sprites in Photoshop?

Question

I use CSS sprites to reduce server load and thus make the page load faster. This is very effective but I find managing these compound images difficult.

I decided to use Photoshop slices to keep track of the various areas allotted to each image (some of them have white space around), because guides quickly became unmanageable.

The problem is now that when I export for the web I can only export individual slices and not the whole image, which negates the idea. So I resort to making a copy of the image before exporting and exporting that flat image.

Is there a way to export for the web an entire image that contains slices? And additionally is there a more practical way to do this?

edit

I have images of different sizes (on the same Photoshop canvas) and of varying uses, which means that sometimes I'll need to dedicate a whole line to a sprite or sometimes I'll have to keep track of white space that needs to be preserved around an icon.

Guides don't allow me to keep a clear view of the area dedicated to a specific sprite.

But an image will show that better than words:

With guides

With slices

So working with slices makes it easier to visualize my sprites but then it is impossible to export the whole image.

Is there any workaround in Photoshop?

Answer 1

Don't use slices. Slices are for...well, slicing...which is the exact opposite of what you want to do with sprite sheets.

I just use guides. So if I'm making an icon sprite sheet, I'll maybe make my image 40px tall x 400px wide and then drag a vertical guide every 40px to make my 'box' for the icon.