CSS Sprite Sheets: Best Practices, Tools and Helpful Applications
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/css-sprite-sheets-best-practices-tools-and-helpful-applications/
Using CSS sprites, instead of a collection of smaller individual
images, will improve your web pages’ performance and keep things more
organized. Let’s take a look at some best practices and some helpful
tools for your sprite-making workflow.
The name sprite might remind you of gaming sprites; retro console games and even browser-based games these days:
Tools to Help
There is a massive range of tools to make your sprite sheet
generation as easy as possible. When you create and design with a range
of individual images, compile them all into one sprite sheet at the end –
the ‘after’ method.
Here are some of the best Sprite Sheet generators:
-
Compass
Price: Free!
Compass includes a brilliant sprite and stylesheet generator, building
the sprites from your individual images stored in a folder. Also related
is Sass; a CSS preprocessor that makes your CSS clearer, more organized
and easier to maintain. More info: http://enva.to/z12V70
http://compass-style.org/
-
Lemonade
Price: Free!
Extremely simple and easy to use, Lemonade uses Sass as mentioned above.
All you need to do is add a line of code to your Sass or SCSS Files and
you’re done – a sprite is generated. However, the developers have now
moved on to work on Compass and Sass – so don’t expect any updates to
Lemonade anytime soon.
http://www.hagenburger.net/BLOG/Lemonade-CSS-Sprites-for-Sass-Compass.html
-
SpriteMe
Price: Free!
A fantastic bookmarklet-based sprite sheet generator and viewer. It can
be used to view any sprites used on any website. The best feature is
that you can design your website using individual images, then run
SpriteMe. It will quickly generate a sprite sheet that you can export
and also generates the associated CSS for the new sprite. It even
injects the sprite into the current page. If you’re used to working with
individual images, this offers the easiest transition to working with
sprite sheets. I’ll go into more detail about how to use SpriteMe later
on.
http://spriteme.org/
-
Fireworks CS6
Price: Definitely not free!
The latest version of Fireworks in Adobe’s Creative Suite includes Sprite Sheet generation.
More info: http://enva.to/IURM73
http://www.adobe.com/devnet/fireworks/articles/css-sprites.html
