Griglia trasparente PNG, SVG o CSS
Con questa griglia trasparente PNG tracci linee a distanza uguale su uno sfondo vuoto, esattamente alla dimensione in pixel che scegli. Imposti colonne, righe, spessore e colore della linea, poi scarichi la griglia in PNG o SVG oppure la copi come sfondo CSS. Ti serve come livello guida sopra un disegno, un layout o uno screenshot. Funziona nel browser e non viene caricato nessun file.
Creare griglia online in quattro passi
La griglia si disegna direttamente nella pagina:
- Inserisci la Larghezza della tela (px) e l’Altezza della tela (px). Vanno entrambe da 10 a 5000 e partono da 1920 per 1080.
- Imposta le Colonne (da 1 a 200, parte da 12) e le Righe (da 1 a 200, parte da 6).
- Scegli lo Spessore della linea (px) da 1 a 50 e un Colore della linea. Di default è rosso, #FF0000.
- Controlla l’anteprima, poi premi Scarica PNG, Scarica SVG o Copia CSS.
Non c’è un pulsante per applicare. L’anteprima si ridisegna mentre scrivi, e la scacchiera dietro mostra quali parti del file sono trasparenti. La scacchiera non fa parte del file scaricato.
Dimensione delle celle da tela, colonne e righe
La tela viene divisa in parti uguali: la larghezza di una cella è la larghezza divisa per le colonne, l’altezza è l’altezza divisa per le righe. La scritta «Ogni cella misura … × … px» sotto l’anteprima mostra il risultato mentre cambi i valori. Per celle quadrate, scegli numeri che diano la stessa misura nei due sensi. Una tela da 1920 × 1080 con 16 colonne e 9 righe dà celle da 120 × 120 px.
Le linee sono centrate su ogni divisione interna. Se la tela non si divide in modo esatto, una linea può cadere tra due pixel e risultare un po’ sfocata nel PNG. Per linee nitide, scegli una larghezza multipla delle colonne e un’altezza multipla delle righe.
Griglia 3x3 PNG e altre misure comuni
Le misure più richieste (larghezza × altezza, colonne × righe, misura della cella):
- Celle quadrate in Full HD: 1920 × 1080, 16 × 9, 120 × 120 px
- Celle quadrate in 4K: 3840 × 2160, 32 × 18, 120 × 120 px
- Griglia 3x3 quadrata: 1080 × 1080, 3 × 3, 360 × 360 px
- Griglia 3x3 verticale 9:16: 1080 × 1920, 3 × 3, 360 × 640 px
Con una griglia PNG trasparente di queste misure hai subito un livello guida pronto da sovrapporre.
Spessore, colore e opzioni avanzate
Lo spessore della linea è la larghezza del tratto in pixel della tela. Su una tela grande, una linea sottile richiede un valore più alto per restare visibile quando l’immagine viene ridotta. Il campo del colore della linea apre il selettore colori del tuo browser e mostra accanto il valore esadecimale. Scegli un colore che contrasti con ciò che c’è sotto: bianco su un disegno scuro, un colore scuro su uno chiaro.
In Opzioni avanzate trovi tre caselle. Una griglia semplice ha linee solo sulle divisioni interne, quindi i bordi del file restano vuoti.
- Bordo esterno aggiunge una cornice. Viene disegnata dentro il bordo della tela e mantiene quindi tutto lo spessore.
- Croce centrale aggiunge una linea verticale e una orizzontale al centro. Con un numero pari di colonne o righe al centro c’è già una linea, quindi la differenza si vede solo con numeri dispari.
- Linee diagonali aggiunge due linee da un angolo all’altro, che si incrociano al centro.
Griglia SVG e sfondo CSS
Scarica PNG salva un’immagine trasparente esattamente della misura della tela, con un nome come griglia-1920x1080.png. Scarica SVG salva la stessa griglia come linee vettoriali, con un nome come griglia-1920x1080.svg, senza sfondo. Copia CSS mette negli appunti una riga background-image: url("data:image/svg+xml,...") e una riga background-size, così chi sviluppa può mettere la griglia sopra una pagina senza un file immagine separato.
Lo sfondo si ripete di default. Se lo usi a mosaico, ricorda che la griglia semplice non ha una linea sul bordo esterno. Con Bordo esterno attivo, a ogni giunzione si incontrano due bordi e sembrano spessi circa il doppio del valore impostato.
Griglia su una foto o codice di layout CSS?
Per disegnare una griglia sopra un’immagine che hai già, con il metodo della quadrettatura per disegnare, usa lo strumento per la griglia su immagine di Capsule Tools. Se vuoi costruire il layout di una pagina e ottenere il codice grid-template-areas, ti serve il Generatore di CSS Grid. Questo strumento serve per il file di griglia vuoto e trasparente.
Domande frequenti
Come si crea una griglia PNG con sfondo trasparente?
Inserisci «Larghezza della tela (px)» e «Altezza della tela (px)», imposta «Colonne» e «Righe», scegli un «Colore della linea» e premi «Scarica PNG». Lo sfondo del file è trasparente. La scacchiera dell’anteprima serve solo a mostrarlo. Il file viene salvato con un nome come griglia-1920x1080.png, con la tua misura nel nome.
Come si fa una griglia 3x3 PNG?
Imposta «Colonne» su 3 e «Righe» su 3. Vengono tracciate due linee verticali e due orizzontali e la tela si divide in nove celle uguali. Attiva «Bordo esterno» in «Opzioni avanzate» se vuoi anche una cornice sul bordo, poi premi «Scarica PNG».
Che dimensione deve avere una griglia PNG 9:16?
Imposta «Larghezza della tela (px)» su 1080 e «Altezza della tela (px)» su 1920 per un’immagine verticale a schermo intero. 2160 per 3840 è la stessa forma 9:16 con il doppio del dettaglio. Entrambe rientrano nel limite di 5000 px. La scritta sotto l’anteprima mostra la misura di una cella.
Come si fa una griglia bianca da sovrapporre?
Scegli il bianco, #FFFFFF, in «Colore della linea». Le linee bianche possono essere difficili da vedere sulla scacchiera dell’anteprima, ma il PNG scaricato le mantiene su sfondo trasparente, quindi si vedono quando metti il file sopra una foto o un layout scuro.
Posso fare una griglia SVG?
Sì. Premi «Scarica SVG» per salvare la stessa griglia come file vettoriale, per esempio griglia-1920x1080.svg. Le linee sono tratti del colore che hai scelto e non c’è nessun riempimento di sfondo, quindi resta nitida a qualsiasi zoom e si apre nel browser o in qualunque editor vettoriale.
Come uso la griglia come sfondo CSS?
Premi «Copia CSS» e incolla il risultato in una regola. Ottieni un background-image con la griglia come SVG incorporato, più un background-size uguale alla misura della tua tela. Cambia background-size per ridimensionarla, oppure usa una tela piccola e lascia che lo sfondo si ripeta. Senza «Bordo esterno» i bordi di ogni tassello non hanno linea.
Come aggiungo una griglia in Illustrator o Figma?
Entrambi hanno griglie e guide proprie. Usa questo strumento quando ti serve una griglia come file di misura esatta. Apri l’SVG in Illustrator per tenere le linee come vettori, oppure metti il PNG sopra il tuo lavoro come livello trasparente. In Figma puoi aggiungere uno dei due file a un frame.
Perché il mio PNG è più piccolo su iPhone o iPad?
Safari su iPhone e iPad restituisce un’immagine vuota oltre i 16 milioni di pixel circa, quindi lì il PNG viene ridotto e una nota indica la misura con cui è stato salvato. L’SVG mantiene sempre la dimensione completa che hai chiesto: usalo quando ti servono le misure esatte.
Consigliati
-
Portamine Pentel GraphGear 500Abbozza prima il layout su carta, con tratti sottili che seguono la tua griglia
-
Taccuino Leuchtturm1917 A5 a puntiniDisegna le schermate su una griglia a puntini prima di aprire Figma
-
Tavoletta grafica Wacom Intuos SmallDisegna a mano sul livello griglia, con una penna che segue il cursore
Aiuta a mantenere gratuiti gli strumenti. ✨
Le immagini sono solo a scopo illustrativo. In qualità di Affiliato Amazon io ricevo un guadagno dagli acquisti idonei.
