: How to work with image sprites in Photoshop? 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.

@Radia289

Posted in: #AdobePhotoshop #Css #ImageSprite #Slices

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?

Vote Up Vote Down

Login to post a comment!