Leandro Marcel Costa Neto

Este tutorial está bem detalhado, faça um teste seguindo passo-a-passo, e logo estará apto à aplicar em qualquer site!

1) Faça o download (http://smartsprites.osinski.name/download.html) da ferramenta SmartSprites, descompacte em um diretório qualquer (aqui estou usando o meu diretório padrão de projetos, que é c:\gonow\developer).

2) Vamos fazer a marcação do css, necessária para a ferramenta se identificar. Fazemos isso usando comentários.

O sprite é composto por várias imagens, unidas em uma só e exibidas pelo posicionamento do bg de cada elemento;

Para criar um sprite automaticamente devemos criar instruções para o SmartSprites entender que imagem pertence ao sprite x;

Criamos referência ao primeiro Sprite, usando o seguinte código dentro do css:

/**
sprite: mysprite;
sprite-image: url('../img/mysprite.png');
sprite-layout: vertical
*/

ou ainda:

/**sprite: mysprite; sprite-image: url('../img/mysprite.png'); sprite-layout: vertical */

-Explicando esse código temos:

sprite // nome do sprite, será usado futuramente para referenciar cada imagem que compõe o sprite;

sprite-image // nome e caminho da imagem que será gerada pelo programa;
sprite-layout // orientação da imagem (vertical | horizontal);

Obs: deve vir antes de qualquer referência a este sprite, mas não precisa estar no topo do css.

Existem ainda outras opções, recomendo o acesso ao site, e pesquisas na internet para conhece-las mais a fundo, já existe bastante coisa a respeito na internet, e no fim deste post vou mencionar alguns links.

Após criar a regra do primeiro sprite, já podemos começar a definir que fará parte dele, para isso vamos atribuir na frente da propriedade background-image um outro comentário, como este:

background-image:url(../img/xpto.png); /** sprite-ref: mysprite; repeat; sprite-margin-top: 5px */

Explicando esse código temos:

background-image:url(../img/xpto.png); // propriedade obrigatória, indica qual imagem será incluida no sprite;

e nos comentários:

sprite-ref: mysprite; //Nome usado anteriormente na instancia, diz que essa imagem deve estar no sprite mysprite;
repeat; //Avisa que permite repetição, então deve-se estender a imagem na direção da repetição (x = horizontal | y = vertical)
sprite-margin-top: 5px // distância em relação a outras imagens;

Esse comentário deve estar presente em todas as regras de css que contenham imagens de bg para o sprite, mas, em nenhum dos casos, a propriedade background poderá ser usada de forma abreviada para funcionar, em um exemplo prático, o código abaixo:

background: transparent url("../img/center_bg.png") no-repeat center top;

irá virar:

background-color: transparent;
background-image: url("../img/center_bg.png") ;
background-repeat:no-repeat;
background-position:center top;

sendo que o background-repeat se tornou descartável e o background-position será gerado pela ferramenta, então podemos reduzir ainda para:

background-color: transparent;
background-image: url("../img/center_bg.png") ;

e aplicando as intruções para o smartSprite:

background-color: transparent;

background-image: url("../img/center_bg.png") ;/** sprite-ref: mysprite; */

Finalizada esta explicação, segue um exemplo de código real, antes da formatação:

#logo{
    background:url("../img/logo.png") no-repeat top left;
    width:180px;
    height:57px;
    left: 28px;
    position: absolute;
    top: 40px;

}
 
#center {
    background: transparent url("../img/center_bg.png") no-repeat center top;
    padding-top: 10px;
    position: relative;

}
 
#left #leftContent {
    position: relative;
    overflow: auto;
    background: transparent url("../img/homeContentBg.png") repeat-x center bottom;
    width: 284px;

}

E agora, após configurado para o smartSprites:

#logo{
    background-image:url("../img/logo.png");/** sprite-ref: mysprite; */
    width:180px;
    height:57px;
    left: 28px;
    position: absolute;
    top: 40px;

}
 
#center {
    background-image: transparent url("../img/center_bg.png");/** sprite-ref: mysprite; */
    padding-top: 10px;
    position: relative;

}
 
#left #leftContent {
    position: relative;
    overflow: auto;
    background-image: url("../img/homeContentBg.png");/** sprite-ref: mysprite; */

    width: 284px;
}

Usei a forma mais simples para mostrar como pode se relacionar uma imagem atual à uma imagem de sprite, você pode aplicar diversas outras configurações, como alinhamento, margem, etc;

3) Após concluir a aplicação dos comentários no css temos que fazer com que a ferramenta processe o que foi pedido, para isso, acessamos via prompt de comando o diretório onde descompactamos o smartSprites (C:\gonow\developer\smartsprites) e digitamos a seguinte linha:

smartsprites --root-dir-path c:/example

Onde c:/example é o diretório raiz do projeto, onde o css esteja visível;

4) Se chegou até aqui, o prompt terá exibido uma tela com várias [INFOS], então você ja gerou seus sprites.
Vá até a pasta definida para os sprites no primeiro comentário, veja sua nova imagem, vá até a pasta de css e veja seu novo css ja configurado com as positions do sprite, e altere o html do seu site para chamar o novo css. Faça um preview e tire suas conclusões.

Observações

- O programa já vem com um diretório contendo vários exemplos, é interessante executá-los para ver o resultado final.
- Acesse o faq: http://smartsprites.osinski.name/#faq

Links Externos

- http://smartsprites.osinski.name/
- http://framebox.blogspot.com/2009/01/implementando-css-sprites-com.html