I understand there are tools on the net to make a sprite, but I'd like to learn how to create icons for the different states of the icon. Is there an easy way to make all these different variations of this icon:
(Also, can you tell me how I can better word my question so it doesn't sound like I'm asking for sprite advice?)
If I understand your question, and you already know that a sprite is really just an image-combining-image, then the last part you need to know is about the CSS.
The CSS is what associates a portion of your image with a state. You create the html representing the button, assign it a class, then you write up your CSS.
.my-button{
width:20px;
height:20px;
background:url('my-button-sprite.gif') top left no-repeat;
}
.my-button:hover{background-position: 20px 0px;}
Just add an appropriate horizontal offset (the first number) to bump the sprite where it should appear for the desired state.
Hover images aren't the only use for a CSS sprite, you can also use a sprite for static images or different icon states. You would create a single image pretty much like you have given as an example and use different CSS background coordinates for each icon state. The trick is just getting the background coordinates right.
