Creating CSS sprites from Photoshop

Question

I have a PSD with a web design.
Every time I tweak the design, I need to manually copy different portions of the image, with different layer visibilities (for transparency) into CSS sprites.

How much can that be automated?

Answer 1

I used an automatic photoshop script once and worked well.

The concept is :

• Each portion is a different image.
• Each portion (and so, each images) must be in the same folder w/o any other images.
• Run the script indicating the folder and some parameters (size, css name, etc...).

• The script does :

  1. Merge all images into one with the size you indicated.
  2. Generate the CSS file

In your case, if you modify one image, you regenerate the global image and the CSS via the script and... that's it. Maybe you'll need to copy/paste the CSS in yours if you don't want to use the generated one.

Notes :

I tried it with a few files and worked great. Then, I tried like ~600 pictures and then, you'll need a goooood CPU and patience ;) In this case, don't use it.

Answer 2

Wouldn't using slices + starting an Action that beguins marquee selecting (with snap to slices & document bounds on) all your slices one by one, but cropping to selection each time, and saving as png, ctrl alt z undoing till not cropped, selecting each sector, cropping..etc, till done with all sectors, then stopping the Action. In the middle you could hide/show any layer, as is the same file always, so shouldn't be conflicts... So you would load the action over your changed psd each time. Only thing I can think of is you actually need to change the slices borders. Or that... I did not understand you right...

Edit: if no need slicing, then a macro (action) that include only the hiding or showing the layers in the order you need, after all tweaks are done. As I say, I might not be understanding...