High 5 : Sprite Cow

November 14, 2011

One of my favorite new tools is Sprite Cow. Sprite Cow helps you get the height, width, and background position of different sprite images within a larger sprite sheet. It is really easy to use and works much like a lot other graphic kinds of tools (i.e., Photoshop).

You just open your image in Sprite Cow, use the marquee tool to select your sprite, and Sprite Cow generates the CSS you need for height, width, and background position.

I had used simple sprites in the past, but was challenged by a colleague to make sprite sheets to cover the majority of background images for a site to improve performance. Sprite Cow has made it very easy for me to do this. I just build the sprite sheet as I go and use Sprite Cow to do the hard work. No more manual labor in Photoshop to determine these 3 values.

Sprite Cow is a side project from the guys at The Team. They created it to solve their own problem to create a quicker and easier process for this tedious, repetitive, and time consuming process. Then they turned around and shared it with the broader community. High five!

It is always great when you find great tools. And the timing of it coincided with my decision and desire to build more complex sprites back in June.

Shout out to Chris Coyier for mentioning Sprite Cow on CSS Tricks.

UPDATE: Chris Coyier released a screencast today (November 16) on Using Sprite Cow. Check it out.