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?


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 guides, the sprites are not clearly delimited

With slices

with slices, each sprites area is clearly visible

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?

  • Check out this question that has a few answers: graphicdesign.stackexchange.com/questions/18780/…
    – ckpepper02
    Commented Oct 11, 2013 at 12:58
  • Thanks, but this is not what my question is about.
    – Sébastien
    Commented Oct 11, 2013 at 13:42
  • Images cannot contain slices as slices are individual images. You can always choose Save as... to save your spritesheet as an image.
    – KMSTR
    Commented Oct 11, 2013 at 13:45

1 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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.