Imagens · Gerador de sprite sheets

Criar uma sprite sheet CSS no Mac

Junte ícones em uma imagem com o CSS para mostrar cada um, mais uma prévia em HTML.

Roda no seu Mac

Perguntar à IAChatGPTClaudePerplexityModo IAGrokMarkdown

Baixar o OneMacTools Mais ferramentas de Imagens

Gerador de sprite sheets em um Mac

Gerador de sprite sheets com arquivos de exemplo e suas opções

O que Gerador de sprite sheets gerou a partir dos arquivos de exemplo

Capturas de tela do app, usando arquivos de exemplo.

Como usar Gerador de sprite sheets

1
Arraste seus ícones
Adicione duas ou mais imagens. Cada nome de arquivo vira uma classe CSS, então dê bons nomes antes, por exemplo “search.png” e “cart.png”.
2
Defina o espaço e o prefixo
Escolha o espaço entre os ícones e o prefixo da classe CSS.
3
Marque ícones Retina
Se seus ícones forem @2x, ative a opção Retina para que apareçam na metade do tamanho, com nitidez.
4
Clique em Criar folha
Os ícones são organizados em linhas e salvos como sprite.png, com sprite.css e uma página preview.html, em uma pasta com data em Downloads › OneMacTools.
5
Use no seu site
Coloque sprite.png e sprite.css juntos, vincule o CSS e adicione as classes aos elementos. Abra preview.html para ver todas as classes.

O que Gerador de sprite sheets faz

Ícones de qualquer tamanho são organizados bem juntos em linhas, cada um recebe sua própria classe CSS com a posição e o tamanho certos, e uma página de prévia mostra todos eles. Defina o espaço entre os ícones, o prefixo das classes e se os ícones são @2x para telas Retina nítidas.

Ideal para

Carregar um conjunto de ícones em uma única requisição
Criar uma sprite sheet para um jogo
Reunir bandeiras ou emojis para um site

Opções explicadas

Espaço entre ícones: 0, 2, 4 ou 8 px; o padrão é 2 px. Um pequeno espaço impede que ícones vizinhos vazem quando a página recebe zoom.
Os ícones são @2x (exiba na metade do tamanho para telas Retina nítidas): Desativado por padrão. Quando ativado, o CSS mostra cada ícone com metade do tamanho em pixels e ajusta a folha na mesma proporção, para que ícones em resolução dupla fiquem nítidos em telas Retina.
Prefixo de classe CSS: O início de cada nome de classe; “icon” se ficar vazio. Com o prefixo icon, “search.png” vira .icon-search.

Boas práticas

Antes de começar, nomeie os arquivos em minúsculas e com hifens. Os nomes das classes vêm deles, e o “@2x” é removido automaticamente.
Use ícones com fundo transparente para que a folha funcione em qualquer cor de página.
Crie ícones Retina com exatamente o dobro do tamanho de exibição, com tamanhos em pixels pares, para que os tamanhos divididos por dois sejam pixels inteiros.
Comprima o sprite.png com o Comprimir PNG depois; um PNG com paleta costuma ficar bem menor em folhas de ícones.
Use um espaço de 2 px ou mais se os ícones forem redimensionados ou exibidos com a página ampliada.

Funciona com

Entrada: Duas ou mais imagens, geralmente ícones PNG, de qualquer tamanho.
Saída: sprite.png (todos os ícones juntos), sprite.css (uma classe por ícone com tamanho e posição) e preview.html.

Ícones de tamanhos diferentes são organizados bem juntos em linhas, os mais altos primeiro.
Arquivos com o mesmo nome recebem classes numeradas, como -2, para que nenhum se perca.

Perguntas sobre o Gerador de sprite sheets

O que é uma sprite sheet de CSS?

Uma imagem que contém vários ícones, com CSS que mostra só um ícone por elemento deslocando o fundo. Carrega todos os seus ícones em uma única requisição.

Como usar o sprite no meu site?

Envie sprite.png e sprite.css para a mesma pasta, vincule o CSS na sua página e adicione classes como class="icon icon-search" a um elemento.

Como os nomes das classes são criados?

A partir do nome de cada arquivo, em minúsculas e com espaços e símbolos trocados por hifens, depois do seu prefixo. “Shopping Cart.png” com o prefixo icon vira .icon-shopping-cart.

Posso usar ícones de tamanhos diferentes?

Sim. Cada ícone mantém o próprio tamanho, e a classe CSS dele recebe a largura e a altura correspondentes.

Como deixar sprites nítidos em telas Retina?

Crie os ícones com o dobro do tamanho em que vão aparecer e ative a opção @2x. O CSS então os exibe na metade do tamanho, o que fica nítido em telas de alta resolução.

Posso usar para sprites de jogos?

Sim. O sprite.css lista a posição e o tamanho de cada imagem na folha, que você pode ler em um motor de jogo ou em código de canvas.

Gerador de sprite sheets envia meus arquivos?

Não. O Gerador de sprite sheets roda inteiramente no seu Mac, então seus arquivos nunca saem dele e ele funciona offline.

Gerador de sprite sheets altera meus arquivos originais?

Não. Os resultados são salvos como novos arquivos em uma pasta datada em Downloads › OneMacTools, e seus originais ficam exatamente como estavam, a menos que você ative uma opção que diga o contrário.

Do que Gerador de sprite sheets precisa?

Só um Mac com macOS 26 ou posterior. Não há mais nada para instalar.