Criador de Modelo de Grade de Ícones | Exporte um PNG Transparente com Guias de Alinhamento

Defina colunas, linhas, tamanho da célula, preenchimento e espaçamento em pixels e exporte um modelo PNG transparente com guias de alinhamento. É uma forma rápida de montar folhas de ícones, folhas de sprites e a estrutura de um kit de interface sem abrir um programa de design completo.

💡 Sobre esta ferramenta

Posicionar um conjunto de ícones com espaçamento uniforme exige calcular de cabeça: uma célula de 64px, um vão de 8px, uma margem externa de 16px, multiplicado por quantas colunas e linhas houver. Basta errar um número para que a folha inteira saia do alinhamento, algo que muitas vezes só se percebe depois de exportar, obrigando a refazer o trabalho.

Esta ferramenta faz essa conta por você. Ao digitar as colunas, linhas, tamanho da célula, preenchimento e espaçamento, ela mostra a largura total, a altura e o número de ícones enquanto você edita. A prévia sobrepõe o contorno de cada célula, o preenchimento externo, os espaçamentos entre células e a cruz central, de modo que você veja onde cada ícone vai cair antes de confirmar. A exportação é um PNG transparente que se encaixa de forma limpa no Figma, Sketch, Illustrator ou em qualquer editor por camadas, servindo de grade base sobre a qual alinhar as artes reais. Ative ou desative as guias e a exportação acompanha esse estado, então um único botão gera um rascunho de trabalho com guias ou um modelo finalizado só com células.

🧐 Perguntas frequentes

O fundo do PNG exportado é transparente? Sim. O PNG exportado tem fundo transparente. O padrão quadriculado que aparece na prévia serve apenas para visualizar a transparência na tela e não é incorporado à imagem.

Qual é a diferença entre espaçamento e preenchimento? O preenchimento é a margem reservada ao redor da parte externa de toda a grade; o espaçamento é o vão deixado entre células adjacentes. Se você zerar os dois, as células ficam encostadas umas nas outras, sem separação.

Como decido se o PNG exportado inclui as guias? Use o botão "mostrar guias". Ativado, a exportação inclui a cruz central e as linhas de preenchimento, que ajudam no alinhamento durante a fase de rascunho. Desativado, ficam apenas os contornos das células, gerando um modelo mais limpo, próximo do layout final. O botão afeta tanto a prévia quanto a exportação, por isso há um único botão de download.

Como o tamanho de saída é calculado? A largura equivale ao preenchimento vezes dois, mais o tamanho da célula vezes o número de colunas, mais o espaçamento vezes o número de colunas menos um. A altura segue a mesma lógica a partir das linhas, e o indicador de tamanho de saída é atualizado sempre que você muda um valor.

Posso colocar aqui as imagens reais dos ícones? Esta ferramenta gera um modelo de grade vazio que serve de camada base. Cada célula mostra apenas o seu contorno; as artes reais dos ícones são sobrepostas sobre cada célula no seu próprio programa de design.

📚 Como funcionam as grades

O sistema de grade, que organiza os elementos em intervalos iguais, vem diretamente da tradição de diagramação impressa, e o termo "gutter" (espaçamento) carrega essa história: originalmente nomeava a margem interna reservada no lado de encadernação de uma página. Em folhas de sprites de ícones e interface, o espaçamento também tem função prática: impede que as bordas renderizadas de ícones vizinhos se misturem, permitindo que cada célula seja exportada ou recortada de forma independente. Combinar um espaçamento constante com um preenchimento externo estável mantém as proporções intactas mesmo quando você acrescenta outra célula depois.