Há um tempo criei uns scripts para facilitar a criação de websprites com o Gimp. Os scripts acabaram sendo uma mão na roda para mim, então resolvi postá-los.

Segue a descrição dos scripts e o link para download…

O Pacote de scripts-fu composto por 3 scripts:

• Exportação de arquivo CSS para usar a web sprite;
• Organização de layers horizontalmente, lado a lado;
• Organização de layers verticalmente, um sobre o outro.

Instalação dos scripts

Basta colocar os arquivos “.scm” dentro da pasta scripts da pasta de configurações do Gimp e reabrir/abrir o Gimp. Se não quiser fechar o Gimp, pode acessar “Filters/Script-fu/Refresh Scripts“. Exemplo da pasta de config do Gimp: “/home/hudson/.gimp-2.6/scripts/”

Os menus de acesso aos três scripts são os seguintes:

• Image/Web Sprites/Organizar layers horizontalmente
• Image/Web Sprites/Organizar layers verticalmente
• Image/Web Sprites/Exportar arquivo CSS

Organizando layers:

Os scripts de organização apenas reposicionam os layers e redimensionam o canvas para caber os layers.
* Sempre que possível prefira sprites horizontais, pois resultará em arquivos menores.

Exportando o CSS:

Seletores CSS: O nome de cada layer será usado como seletor CSS.
Opções: Ao acionar o script, abrirá uma caixa de diálogo com as opções de geração do arquivo. As opções são:

• Arquivo CSS (arquivo a salvar): Entre aqui com o nome do arquivo CSS a gerar.
• Diretório do arquivo CSS: Diretório onde salvar o arquivo.
• Arquivo de imagem (bkg-image): Nome da imagem/sprite que será usada no CSS (ex.: a própria imagem exportada para PNG).
• Prefixo dos seletores: Prefixo a incluir em cada seletor CSS. Ex.: Você está montando um menu onde cada item é um “li” e está identificado por uma classe, utilize “li.”. Assim um layer chamado “home” irá resultar no seletor “li.home”.
• Sufixo dos seletores: Sufixo a incluir em cada seletor CSS. Ex.: Seguindo o exemplo acima, defina como ” > span” para resultar em “li.home > span”.
• Repetição do Background: Regra “background-repeat” a incluir. Caso queira deixar em branco selecione “Leave it Blank!”.
• Seletor de abstração: Seletor de abstração para definir reduzir a redundância no CSS. Ex.: Está montando um menu onde cada item é um “LI” então defina como “li “. Assim propriedades como “background-image” será definido somente nesta abstração e não nos seletores de cada layer.
• Agrupar seletores: Marque para agrupar os seletores em uma única regra CSS e definir coisas tipo “background-image” e reduzir então a redundância do CSS. Use isto quando não for possível usar o seletor de abstração.
• Incluir largura do layer: Incluir a largura de cada layer no CSS.
• Incluir altura do layer: Incluir a altura de cada layer no CSS.
• Definir tamanho no grupo/abstração: Use isto para que largura e altura sejam definidas somente no agrupamento de seletores e/ou no seletor de abstração. Neste caso, serão utilizadas as medidas do primeiro layer encontrado.
• Manter espaços em branco: Desmarque isto para remover todos espaços em branco não obrigatórios.
• Manter quebras de linha: Desmarque isto para remove todas as quebras de linha não obrigatórias (todas).
• Remover extensão de arquivo: Desmarque isto caso não queira que a extensão dos arquivos presente no nome dos layers não seja removida. Lembrando que pontos no CSS tem uma utilidade específica e não pode fazer parte do identificador de um seletor.

Download

hmagalhaes-scriptfu-websprites-v1-pt (versão português)
hmagalhaes-scriptfu-websprites-v1-en (versão inglês)

Gimp Registry

Postagem no Gimp Registry http://registry.gimp.org/node/25908