4

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.

1

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

3

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.

  • This is the very technique I've always used. – DA01 Nov 27 '13 at 23:07
  • this is typically how i've done it...except i have so many icons that the idea of doing this manually is a bit soul-killing :-/ – yeahumok Nov 28 '13 at 17:54
0

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.

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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