Creating CSS sprites from Photoshop

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?


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.

Source : Link , Question Author : SLaks , Answer Author : Shikiryu

Leave a Comment