Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question

4 Answers 4

up vote 1 down vote accepted

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

share|improve this answer

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.

share|improve this answer
    
That's what I would go with to, just extend the sprite sheet further (vertically or horizontally - stick to one) each time you have to add more icons. Leave all existing icons where they were and nothing should change (with fixed pixel values). Good answer. –  user Nov 27 '13 at 21:57
    
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

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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