Créateur de Modèle de Grille d'Icônes | Exportez un PNG Transparent avec Repères d'Alignement

Définissez les colonnes, les lignes, la taille de cellule, la marge et la gouttière en pixels, puis exportez un modèle PNG transparent avec des repères d'alignement. C'est un moyen rapide de mettre en page des planches d'icônes, des planches de sprites et l'ossature d'un kit d'interface sans ouvrir un logiciel de conception complet.

💡 À propos de cet outil

Disposer une série d'icônes à intervalle régulier suppose de calculer de tête : une cellule de 64px, un écart de 8px, une marge extérieure de 16px, le tout multiplié par le nombre de colonnes et de lignes. Une seule valeur erronée et toute la planche se décale, ce que l'on ne remarque souvent qu'après l'export, obligeant à tout recommencer.

Cet outil effectue ce calcul à votre place. En saisissant les colonnes, les lignes, la taille de cellule, la marge et la gouttière, il affiche la largeur totale, la hauteur et le nombre d'icônes au fil de la frappe. L'aperçu superpose le contour de chaque cellule, la marge extérieure, les gouttières entre cellules et la croix centrale, ce qui vous permet de voir où chaque icône se placera avant de valider. L'export est un PNG transparent qui s'intègre proprement dans Figma, Sketch, Illustrator ou tout éditeur en calques comme grille de fond sur laquelle aligner les visuels réels. Activez ou désactivez les repères et l'export suit cet état : un seul bouton vous donne donc un brouillon de travail avec repères ou un modèle finalisé en cellules seules.

🧐 Questions fréquentes

Le fond du PNG exporté est-il transparent ? Oui. Le PNG exporté possède un fond transparent. Le damier visible dans l'aperçu sert uniquement à visualiser la transparence à l'écran et n'est pas intégré à l'image.

Quelle est la différence entre gouttière et marge ? La marge est l'espace réservé tout autour de l'extérieur de la grille ; la gouttière est l'écart laissé entre deux cellules adjacentes. Réglez les deux sur zéro et les cellules se collent les unes aux autres sans aucun espacement.

Comment choisir si le PNG exporté inclut les repères ? Utilisez l'interrupteur « afficher les repères ». Activé, l'export inclut la croix centrale et les lignes de marge, utiles pour aligner pendant la phase de brouillon. Désactivé, seuls les contours des cellules subsistent, ce qui donne un modèle plus net proche de la mise en page finale. L'interrupteur agit à la fois sur l'aperçu et sur l'export, d'où un seul bouton de téléchargement.

Comment la taille de sortie est-elle calculée ? La largeur vaut deux fois la marge, plus la taille de cellule multipliée par le nombre de colonnes, plus la gouttière multipliée par le nombre de colonnes moins un. La hauteur suit la même logique à partir du nombre de lignes, et l'indicateur de taille de sortie se met à jour à chaque changement de valeur.

Puis-je placer ici les images réelles des icônes ? Cet outil produit un modèle de grille vide qui sert de calque de fond. Chaque cellule n'affiche que son contour ; les visuels réels des icônes se superposent sur chaque cellule dans votre propre logiciel de conception.

📚 Le rôle des grilles et des gouttières

Le système de grille, qui ordonne les éléments à intervalle régulier, est directement issu de la tradition typographique imprimée, et le mot « gouttière » en porte l'héritage : il désignait à l'origine la marge intérieure réservée au pli de reliure d'une page. Dans les planches de sprites d'icônes et d'interface, la gouttière joue aussi un rôle concret : elle empêche les bords rendus d'icônes voisines de déborder l'un sur l'autre, de sorte que chaque cellule puisse être exportée ou découpée séparément. Associer une gouttière constante à une marge extérieure stable préserve les proportions même lorsque vous ajoutez une cellule par la suite.