Tools to Make CSS Sprites

Tools to make CSS sprites?

This will do 90% of the work for you: CSS Sprite Generator. You'll still need to edit the rules yourself, but the tool will give you the code fragments you need for the new CSS file.

Tool for css sprites?

There is nothing better than http://www.spritecow.com/

Sprite Cow helps you get the background-position, width and height of
sprites within a spritesheet as a nice bit of copyable css.

Looking for a good Image Sprite generator tool

ZeroSprites is a CSS sprites generator aimed at area minimization using VLSI floorplaning algorithms. It can generate tighter sprites sheet than Sprite Generator and Spritemapper.

How do I create the CSS that represents a sprite image?

Given the sprite sheet is arranged in a regular grid, Sass will do this easily:

Sass

$sprite-sheet-width: 384;
$sprite-sheet-height: 384;
$sprite-cols: 12;
$sprite-rows: 8;

$sprite-width: $sprite-sheet-width/$sprite-cols;
$sprite-height: $sprite-sheet-height/$sprite-rows;

@for $i from 0 to $sprite-rows {

    @for $j from 0 to $sprite-cols {
        .sprite-#{$i}-#{$j} {
            $top: $i * $sprite-height;
            $left: $j * $sprite-width;
            background-position: $top $left;
        }
    }

}

Compiled CSS

.sprite-0-0 {
  background-position: 0 0; }

.sprite-0-1 {
  background-position: 0 32; }

.sprite-0-2 {
  background-position: 0 64; }

.sprite-0-3 {
  background-position: 0 96; }

.sprite-0-4 {
  background-position: 0 128; }

.sprite-0-5 {
  background-position: 0 160; }

.sprite-0-6 {
  background-position: 0 192; }

.sprite-0-7 {
  background-position: 0 224; }

.sprite-0-8 {
  background-position: 0 256; }

.sprite-0-9 {
  background-position: 0 288; }

.sprite-0-10 {
  background-position: 0 320; }

.sprite-0-11 {
  background-position: 0 352; }

[...]

.sprite-7-0 {
  background-position: 336 0; }

.sprite-7-1 {
  background-position: 336 32; }

.sprite-7-2 {
  background-position: 336 64; }

.sprite-7-3 {
  background-position: 336 96; }

.sprite-7-4 {
  background-position: 336 128; }

.sprite-7-5 {
  background-position: 336 160; }

.sprite-7-6 {
  background-position: 336 192; }

.sprite-7-7 {
  background-position: 336 224; }

.sprite-7-8 {
  background-position: 336 256; }

.sprite-7-9 {
  background-position: 336 288; }

.sprite-7-10 {
  background-position: 336 320; }

.sprite-7-11 {
  background-position: 336 352; }

You can try it out with the online compiler

Software/Plugin for css sprite generation

I have created a Ruby library that can generate sprite images and CSS rules, which I have not fully published yet (I'm wanting to Add more features, such as CSS rewriting, so I'm waiting).

Not wanting to spam, add a comment and I'll send you the link.

As for dreamweaver plugins or desktop applications, none I am aware of.

CSS sprites management

The idea is to maintain different named images and to "stitch them together" as an optimization. Either as a part of automatic build procedure, or manually. Just like CSS or JS minification. The pictures are placed on the final image, and background positions are calculated automatically.

It's pretty simple to create such a tool, and hence there are lots of tools of this kind out there.

My personal preference for manual sprites creation is Stitches, it's an online tool and doesn't require installation. It runs on current versions of Chrome (not sure of other browsers).

There are also solutions for automatic builds. For example, SmartSprites Maven plugin:

<plugin>
  <groupId>net.jangaroo</groupId>
  <artifactId>smartsprites-maven-plugin</artifactId>
  <version>1.8</version>
</plugin>

Easy tool to decompose sprite image?

Use the slice tool in Photoshop:

1. Use the slice select tool (note the select part of that, see screenshot).
2. Right-click anywhere on the canvas and select Divide Slice... from the drop down menu.
3. Enter in the height/width or sprite multiple.
4. Once finished, go to save for web and devices...
5. When you save, this will export all the individual cutouts to the file format of your choosing in a separate folder.

If they are of uneven size (not on a grid) you can also select them individually with the vanilla 'slice select' tool. If you have a lot of similar grids, save everything as a photoshop action and batch process them.

---

Related Topics