Need to create maintanable sprites

Question

Does anybody know of a good tool or generator that allows me to create sprites, save the sprite set and be able to update the css sheet if i add new icons to the icon set? What i mean is this:

Currently i have 100 icons. They all need to be made into sprites. Once they go into production, the CSS cannot change (meaning they have to stay in exactly the same location every time). However, I will be expected to update the icon set when I am required to add more.

Does anyone know of anything that exists like this? I've tried a Photoshop extension (I cannot recall the name) that makes sprites from the layers in my photoshop file, but sadly it just didn't work and I kept hitting errors (presumably because I may have too many images that need to be turned into sprites).

Any help is much much appreciated.

Answer 1

If this were my issue, I'd configure a photoshop file with guides where I needed them and everything positioned correctly. Then I could edit anything, everything remains within the guides I've configured, and I could add new items at anytime. Then simply re-save the file via Save for Web as a .png (or whatever) and have a new sprite sheet without anything moving.

Automated solutions rarely work for complex issues.

Answer 2

The answer to your dreams managing sprites with Sass and Compass.

Compass makes it very easy to combine multiple images into a sprite and then manage them as the project goes on.

Here is another tutorial with more examples: Web Design: CSS Image Sprite With Compass

Answer 3

Actually I found this gem

http://spritepad.wearekiss.com/

I'm able to save SpritePads and keep adding to them as I need to. The UX on this is a bit lacking (IMO) but it saved me so much time it was ridiculous.

Answer 4

I've recently encountered this problem and I found a tool called Stitches. It allows you to drag in images and organize them in a few different way. This app will generate a sprite-sheet as well as a CSS document and supports LESS as well.