Ir para o conteúdo principal
eyunzhu

Criador de sprite sheet

Organizar imagens · Espaçamento · CSS e coordenadas

As imagens ficam no seu dispositivo

Arquivos

0 · 0 selecionadas

Nenhuma imagem selecionada.

Arraste imagens ou um arquivo ZIP aqui Você também pode colar uma imagem ou selecionar várias de uma vez.
JPEG · PNG · WEBP · AVIF

Ajustes

Configurações avançadas
Opções de exportação
Enquadramento da foto de identificaçãoA detecção no dispositivo apenas sugere o recorte; você ainda pode ajustá-lo antes de exportar.

O enquadramento desta imagem ainda não foi confirmado.

Fundo da foto de identificaçãoRecorte de retrato opcional no dispositivo; a imagem original não é enviada.
Aplicar a
Formato
Dimensões
Tamanho predefinidoTamanhos comuns das plataformas

Escolha um ou mais tamanhos; cada imagem será exportada em todos eles.

Área segura do ícone12%
Fundo do ícone

Um único enquadramento gera favicon, ícones PWA e tamanhos comuns de aplicativos, além do manifest.

Área de corteArraste a moldura para mover ou redimensionar
Rotação
Qualidade88%
Dimensões
Posição da imagem
Espaço em cada ladopx
Fundo
Dividir por
Disposição
Alinhamento
Configurações avançadas
Histograma de luminosidade
Imagem da marca-d’água

Posição

Configurações avançadas
Modo de remoção de fundo
Ampliar imagemReal-ESRGAN · 2×

Selecionar uma cor da imagem

Alinhamento
Tarefa de metadados
Aparência da digitalização

Arraste cada ponto até um canto do documento. Use as setas para fazer ajustes precisos.

Qualidade
Intervalo de quadrosDeixe o último quadro em branco para ir até o fim.

Base64 ocupa mais espaço. A entrada é limitada para proteger a memória do navegador.

Escolha o próximo passo

As imagens são transferidas temporariamente neste navegador e não são enviadas ao servidor.

Imagens para continuar
Processador de imagens em loteCombine etapas · Processe imagens em lote Recortar imagemProporções de corte · Correção de inclinação · Enquadramento Dividir imagemGrade · Divisão de imagens longas · Guias personalizadas Juntar imagensJunção horizontal · Vertical · Em grade Redimensionar imagemPixels ou porcentagem · Ajuste · Vários tamanhos Ampliar a tela da imagemAdicionar margens · Tamanho da tela · Fundo Redimensionador para redes sociaisTamanhos por plataforma · Guias de enquadramento · Exportação múltipla Comprimir imagemCompressão automática · Tamanho desejado · Comparar original Converter formato de imagemConverte ao importar · Vários formatos · Download em lote Conversor de imagem e Base64Imagem ↔ Base64 · Prévia instantânea · Copiar Editar imagemGirar e espelhar · Ajustar cores · Desfazer e refazer Adicionar marca-d’águaMarca d’água de texto ou imagem · Arraste para posicionar · Repetir Ocultar rostos e dados privadosDetecção de rostos · Marcação manual · Processamento em lote Ajustar cores da imagemExposição e cores · Histograma · Prévia em tempo real Seletor de cores da imagemClique para escolher a cor · HEX / RGB / HSL · Paleta Substituir uma cor da imagemSelecionar cor · Tolerância e bordas suaves · Prévia Comparar imagensComparação deslizante · Lado a lado · Diferenças entre pixels Ver e remover metadadosInformações da imagem · Revisão de privacidade · Remover metadados Encontrar imagens duplicadasImportar pastas · Duplicatas exatas · Imagens parecidas Criar GIF com imagensCriar animações · Duração por quadro · Ordem Extrair quadros de GIFIntervalo de quadros · Frequência de extração · Download em lote Editar GIF animadoOrdem e duração · Reprodução reversa · Corte e tamanho Comprimir GIFReduzir cores · Pular quadros · Redimensionar GIF para spritesheetQuadros em grade · Arquivo de coordenadas Imagens para PDFOrganizar imagens · Formato de página · Juntar em PDF Gerador de favicon e ícones de aplicativosÍcones para sites e apps · Margens · Vários tamanhos Gerador de placeholder de imagemBlurHash · ThumbHash · Prévias pequenas Remover fundo localmenteRecortar pessoas ou objetos · Ajustar bordas · Trocar fundo Imagem para texto (OCR)Reconhecer texto · Selecionar área · Exportar texto Scanner de documentos fotografadosCorrigir cantos · Melhorar documentos · PDF com várias páginas Ampliar imagemAmpliação com IA local · Dobro do tamanho · Realçar detalhes Criador de foto para documentosEspecificações da foto · Enquadramento · Fundo Foto para passaporte chinêsEspecificações da foto · Enquadramento · Fundo Foto para documento de identidade chinêsEspecificações da foto · Enquadramento · Fundo Foto para exame de habilitação docente da ChinaEspecificações da foto · Enquadramento · Fundo Foto para concurso público nacional da ChinaEspecificações da foto · Enquadramento · Fundo Foto para cartão de seguridade social de HubeiEspecificações da foto · Enquadramento · Fundo Foto para visto dos EUAEspecificações da foto · Enquadramento · Fundo Foto para visto do JapãoEspecificações da foto · Enquadramento · Fundo

Sobre a ferramenta

Agrupe ícones ou pequenos elementos de jogo em uma imagem e acesse cada região pelas coordenadas. As células usam o tamanho da maior origem, então imagens menores podem deixar espaços vazios.

Como usar

Criador de sprite sheet

Para que serve

Reúna imagens em uma grade PNG com colunas e espaçamento. Preserve as dimensões originais e exporte coordenadas JSON e posições de fundo CSS.

Como usar

Organize as imagens e ajuste colunas e espaçamento. Cada imagem mantém suas dimensões no canto superior esquerdo de uma célula baseada na maior imagem. O pacote inclui a folha, coordenadas JSON e posições CSS.

Resultados e próximos passos

A imagem principal acompanha coordenadas, manifesto ou código. O ZIP completo preserva a relação.

Privacidade e processamento local

O processamento acontece no navegador. Esta ferramenta não envia as imagens originais.

Perguntas frequentes

As imagens de tamanhos diferentes são esticadas?

Não. Elas mantêm as dimensões e ficam no canto superior esquerdo de células baseadas na maior origem, por isso podem sobrar espaços. O pacote traz PNG, coordenadas JSON e posições CSS. É uma grade, sem empacotamento compacto ou corte automático das bordas transparentes.

Por que o CSS exportado não mostra os sprites sozinho?

Ele fornece dimensões e posições de fundo. Na página, acrescente o caminho background-image da folha e um modo de exibição adequado. PNG, JSON e CSS devem vir da mesma exportação; substitua todos quando mudar colunas ou espaçamentos.

Como evitar coordenadas incorretas ao gerar a folha novamente?

Defina a ordem da fila antes das colunas e dos espaços. As posições seguem essa ordem, então adicionar, remover ou mover imagens pode alterar coordenadas posteriores. Não use um mapa antigo com uma folha nova.

Comentários

0
para participar da discussão.
Ainda não há comentários.
Conversa de respostas

Acompanhe a conversa completa em ordem cronológica; cada resposta identifica a mensagem específica à qual responde.