Générateur de grille transparente en PNG ou SVG
Ce générateur de grille trace des lignes régulièrement espacées sur un fond transparent, à la taille exacte en pixels que vous choisissez. Vous réglez les colonnes, les lignes, l’épaisseur et la couleur du trait, puis vous téléchargez la grille en PNG ou en SVG, ou vous la copiez en fond CSS. Elle sert de calque de repère sur une illustration, une maquette ou une capture d’écran. Tout se passe dans le navigateur et rien n’est envoyé.
Créer une grille en ligne : mode d’emploi
La grille se dessine directement sur la page, en quatre étapes :
- Saisissez la Largeur du canevas (px) et la Hauteur du canevas (px). Chacune va de 10 à 5000 et démarre à 1920 par 1080.
- Réglez les Colonnes (de 1 à 200, départ à 12) et les Lignes (de 1 à 200, départ à 6).
- Choisissez l’Épaisseur du trait (px), de 1 à 50, et une Couleur du trait. Par défaut, c’est le rouge, #FF0000.
- Vérifiez l’aperçu, puis appuyez sur Télécharger le PNG, Télécharger le SVG ou Copier le CSS.
Il n’y a pas de bouton pour appliquer. L’aperçu se redessine pendant la saisie, et le damier derrière montre quelles parties du fichier sont transparentes. Ce damier ne fait pas partie du téléchargement.
Taille des cellules selon le canevas, les colonnes et les lignes
Le canevas est divisé en parts égales : la largeur d’une cellule est la largeur divisée par les colonnes, et sa hauteur est la hauteur divisée par les lignes. L’indication « Chaque cellule mesure … × … px » sous l’aperçu affiche le résultat quand vous changez une valeur. Pour des cellules carrées, choisissez des nombres qui donnent la même taille dans les deux sens. Un canevas de 1920 × 1080 avec 16 colonnes et 9 lignes donne des cellules de 120 × 120 px.
Les traits sont centrés sur chaque division intérieure. Si le canevas ne se divise pas exactement, un trait peut tomber entre deux pixels et paraître un peu flou dans le PNG. Pour des traits nets, prenez une largeur multiple du nombre de colonnes et une hauteur multiple du nombre de lignes.
Grille PNG transparente : les formats courants
Voici les tailles les plus demandées (largeur × hauteur, colonnes × lignes, taille de cellule) :
- Cellules carrées en Full HD : 1920 × 1080, 16 × 9, 120 × 120 px
- Cellules carrées en 4K : 3840 × 2160, 32 × 18, 120 × 120 px
- Grille de 3 par 3, carrée : 1080 × 1080, 3 × 3, 360 × 360 px
- Grille de 3 par 3, vertical 9:16 : 1080 × 1920, 3 × 3, 360 × 640 px
Un quadrillage PNG transparent de ces tailles se superpose ensuite à n’importe quel visuel.
Épaisseur, couleur et options avancées
L’épaisseur du trait est la largeur de la ligne en pixels du canevas. Sur un grand canevas, un trait fin demande donc une valeur plus élevée pour rester visible quand l’image est réduite. Le champ de couleur du trait ouvre le sélecteur de couleur de votre navigateur et affiche la valeur hexadécimale à côté. Choisissez une couleur qui contraste avec le fond : du blanc sur une image sombre, une couleur foncée sur une image claire.
Les Options avancées proposent trois cases à cocher. Une grille simple n’a de lignes que sur les divisions intérieures, les bords du fichier restent donc vides.
- Bordure extérieure ajoute un cadre. Il est dessiné à l’intérieur du bord du canevas et garde donc toute l’épaisseur du trait.
- Croix centrale ajoute une ligne verticale et une ligne horizontale au milieu. Avec un nombre pair de colonnes ou de lignes, il y a déjà un trait au centre : vous ne voyez de changement qu’avec des nombres impairs.
- Lignes diagonales ajoute deux lignes d’un coin à l’autre, qui se croisent au centre.
Grille SVG, fond CSS et téléchargement
Télécharger le PNG enregistre une image transparente à la taille exacte du canevas, nommée par exemple grille-1920x1080.png. Télécharger le SVG enregistre la même grille sous forme de lignes vectorielles, nommée par exemple grille-1920x1080.svg, sans fond. Copier le CSS place dans le presse-papiers une ligne background-image: url("data:image/svg+xml,...") et une ligne background-size, pour qu’un développeur puisse poser la grille sur une page sans fichier image séparé.
Le fond se répète par défaut. Si vous le mettez en mosaïque, souvenez-vous qu’une grille simple n’a pas de ligne sur son bord extérieur. Avec la Bordure extérieure activée, deux bordures se rejoignent à chaque jonction et paraissent environ deux fois plus épaisses que la valeur choisie.
Faire une grille sur image, ou du code CSS Grid ?
Pour tracer une grille sur une image que vous avez déjà, selon la méthode du quadrillage pour dessiner, utilisez le Générateur d’image à grille. Si vous voulez construire une mise en page et obtenir le code grid-template-areas, c’est le Générateur CSS Grid qu’il vous faut. Cet outil sert pour le fichier de grille vierge et transparent.
Questions fréquentes
Comment créer une grille PNG à fond transparent ?
Saisissez « Largeur du canevas (px) » et « Hauteur du canevas (px) », réglez « Colonnes » et « Lignes », choisissez une « Couleur du trait », puis appuyez sur « Télécharger le PNG ». Le fond du fichier est transparent. Le damier de l’aperçu sert seulement à le montrer. Le fichier s’enregistre sous un nom comme grille-1920x1080.png, avec votre propre taille.
Comment faire une grille de 3 par 3 en PNG ?
Réglez « Colonnes » sur 3 et « Lignes » sur 3. Cela trace deux lignes verticales et deux horizontales et découpe le canevas en neuf cellules égales. Activez « Bordure extérieure » dans « Options avancées » si vous voulez aussi un cadre sur le bord, puis appuyez sur « Télécharger le PNG ».
Quelle taille pour une grille PNG en 9:16 ?
Réglez « Largeur du canevas (px) » sur 1080 et « Hauteur du canevas (px) » sur 1920 pour une image verticale plein écran. 2160 par 3840 donne la même forme 9:16 avec deux fois plus de détail. Les deux tiennent dans la limite de 5000 px. L’indication sous l’aperçu donne la taille d’une cellule.
Comment obtenir une grille blanche en PNG ?
Choisissez le blanc, #FFFFFF, dans « Couleur du trait ». Les traits blancs sont parfois difficiles à voir sur le damier de l’aperçu, mais le PNG téléchargé les conserve sur un fond transparent : ils apparaissent dès que vous placez le fichier sur une photo ou une mise en page sombre.
Peut-on faire une grille SVG ?
Oui. Appuyez sur « Télécharger le SVG » pour enregistrer la même grille en fichier vectoriel, par exemple grille-1920x1080.svg. Les lignes sont des traits de la couleur choisie, sans remplissage de fond : le fichier reste net à tous les zooms et s’ouvre dans un navigateur ou dans n’importe quel éditeur vectoriel.
Comment utiliser la grille comme fond CSS ?
Appuyez sur « Copier le CSS » et collez le résultat dans une règle. Vous obtenez un background-image avec la grille en SVG intégré, plus un background-size égal à la taille de votre canevas. Modifiez background-size pour changer l’échelle, ou prenez un petit canevas et laissez le fond se répéter. Sans « Bordure extérieure », les bords de chaque motif n’ont pas de ligne.
Comment ajouter une grille dans Illustrator ou Figma ?
Les deux logiciels ont leurs propres grilles et repères. Utilisez ce générateur quand vous voulez une grille sous forme de fichier à une taille exacte. Ouvrez le SVG dans Illustrator pour garder les lignes en vectoriel, ou placez le PNG sur votre visuel comme calque transparent. Dans Figma, vous pouvez ajouter l’un ou l’autre fichier à un cadre.
Pourquoi mon PNG est-il plus petit sur iPhone ou iPad ?
Safari sur iPhone et iPad renvoie une image vide au-delà d’environ 16 millions de pixels. Le PNG y est donc réduit pour tenir, et une note indique la taille d’enregistrement. Le SVG garde toujours la taille complète demandée : utilisez-le quand il vous faut les dimensions exactes.
Recommandés
-
Porte-mine Pentel GraphGear 500Esquissez d’abord la mise en page sur papier, avec des traits fins qui suivent votre grille
-
Carnet Leuchtturm1917 A5, pointillésCrayonnez vos écrans sur une grille de points avant d’ouvrir Figma
-
Tablette graphique Wacom Intuos SDessinez à la main sur votre calque de grille, avec un stylet qui suit le curseur
Aide à garder les outils gratuits. ✨
Images non contractuelles. En tant que Partenaire Amazon, je réalise un bénéfice sur les achats remplissant les conditions requises.
