Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for professional graphic designers and non-designers trying to do their own graphic design. It's 100% free, no registration required.

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 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 mys prites but then it is impossible to export the whole image.

Is there any workaround in Photoshop?

share|improve this question
    
Check out this question that has a few answers: graphicdesign.stackexchange.com/questions/18780/… –  ckpepper02 Oct 11 '13 at 12:58
    
Thanks, but this is not what my question is about. –  Sébastien Oct 11 '13 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 Oct 11 '13 at 13:45
add comment

migrated from webmasters.stackexchange.com Oct 11 '13 at 11:34

This question came from our site for pro webmasters.

1 Answer

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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