acá un tutorial:
http://librosweb.es/css_avanzado/cap...y_sprites.html
acá un ejemplo (hay algo de jquery por ahi pero no le hagas caso :D):
http://jsfiddle.net/cristian_cena/fYXfv/
Para hacerlo a mano solo hay que tener en claro que se debe tomar como referencia la esquina superior izquierda de la imagen (origen de coordenadas) y de ahi tomar las cotas hacia abajo y hacia la derecha.
Estas cotas/coordenadas te darán los valores de background-position que necesites.
Yo lo armo en photoshop por si debo editarlo. Siempre parto de un diseño parcial(casi total)mente definido, ya que: o dejo los huecos que voy a necesitar, o pongo el nuevo contenido abajo agrandando en alto la imagen, lo que permite conservar lo que ya armamos.
Ejemplo: Cargamos el sprite en N elementos:
Código CSS:
Ver originalelemento1, elemento2, elementoN {
background:("ruta/sprite.xxx") no-repeat;
}
Ahora suponte que necesitas buscar un trozo del sprite que esta 10px hacia la derecha y 50px hacia abajo. Entonces escribe:
Código CSS:
Ver originalelemento1{
width: ... ; height: ... ;
background-position:10px -50px; /*verás: el 1er valor corresponde al eje x y el segundo al eje y*/
}
Listo :)
Si se complica hacerlo a mano, existen muchas herramientas online que te pueden ayudar, tal como te indican.
Este también es muy bueno.
La ventaja de estas, te ahorran tiempo (discutible, porque si lo sabes hacer lo armas rápido).
desventaja: imágen de mayor tamaño (y peso) que la imagen que construirías a mano. Ya que, te va colocando las imagenes una debajo de la otra, (o al lado de la otra según elijas) y si las imagenes no tienen las mismas proporciones te quedarán demasiados espacios en blanco.
Espero te sea útil.