Come disegnare forme ed esportare grafica vettoriale (SVG)
Risposta rapida
Premi U per lo strumento Forma, scegli una forma nella barra delle opzioni e trascina sul quadro; tieni premuto Maiusc o ⇧ per un cerchio o un quadrato perfetto. Ogni forma è un livello a sé che resta modificabile: puoi cambiarne in qualsiasi momento dimensioni, angoli, riempimento e contorno nel pannello Proprietà. Per ottenere un file vettoriale, scegli
- Tempo
- 6 minuti
- Livello
- Principiante
- Ti serve
- Niente: parti da un nuovo documento vuoto
- Funziona con
- Esporta in SVG, PDF, PNG, WebP e altri formati immagine; nei progetti Lil Cactus le forme restano completamente modificabili
Gratis, senza registrazione. Il tuo lavoro resta sul tuo computer.
Un livello forma memorizza una forma come una descrizione, per esempio “un cerchio di 600 px di diametro in 100, 100, riempito di verde”, invece che come pixel. Puoi ridimensionarla, arrotondarne gli angoli o cambiarne il colore senza perdere nitidezza, e l’esportazione in SVG la conserva come vettore, nitido a qualsiasi dimensione, da una favicon a un poster.
In questo tutorial costruisci un semplice badge con due forme, un cerchio verde con un anello bianco (il suo contorno) e una stella bianca, e lo esporti in SVG.
Disegna forme ed esporta in SVG in sette passaggi
Crea un nuovo documento
Vai su lilcactus.app e scegli Digita 800 nel campo Larghezza e 800 nel campo Altezza, fai clic sul campione a scacchi sotto Sfondo per avere uno sfondo trasparente e fai clic su Crea.
800 × 800 px con sfondo trasparente. Disegna un cerchio
Premi U per lo strumento Forma. Nella barra delle opzioni (la striscia sotto i menu) scegli Ellisse nell’elenco Forma; il campo Metodo deve indicare Forma. Tieni premuto Maiusc o ⇧ e trascina su gran parte del quadro: compare un cerchio nero su un nuovo livello chiamato Forma. Le nuove forme vengono riempite con il colore di primo piano.
Forma: Ellisse. Imposta dimensioni, posizione e colore esatti
Con il cerchio selezionato, il pannello Proprietà mostra le sue impostazioni dinamiche. Digita 100 nei campi X (px) e Y (px) e 600 nei campi Larghezza (px) e Altezza (px), premendo Tab dopo ciascuno: ora il cerchio è centrato con un margine di 100 px.
Più in basso, sotto Riempimento, fai clic sul campione di colore, digita 2E7D5B nel campo esadecimale e fai clic su OK. Il cerchio diventa verde.
Posizione e dimensioni esatte. 
Il colore di riempimento, #2E7D5B. Disegna una stella bianca con le punte arrotondate
Premi D e poi X, così il bianco diventa il colore di primo piano. Scegli Stella nell’elenco Forma della barra delle opzioni e imposta Punte su 5, Raggio interno su 50 e Raggio dell’angolo su 24. Tieni premuto Maiusc o ⇧ e trascina da circa un quarto del cerchio fino a tre quarti: compare una stella bianca con le punte morbide, su un livello a sé. Per posizionarla con precisione, in Proprietà digita 250 nei campi X (px) e Y (px) e 300 nei campi Larghezza (px) e Altezza (px).
Punte 5, Raggio interno 50%, Raggio dell’angolo 24 px. 
La stella sul cerchio. Modifica la stella in seguito
Le forme restano dinamiche. Con il livello della stella selezionato, digita 6 nel campo Punte del pannello Proprietà e premi Tab: la stella viene ridisegnata con sei punte, con le stesse dimensioni e gli stessi angoli arrotondati. Larghezza (px) e Raggio (px) (il raggio dell’angolo) funzionano allo stesso modo.
Punte: 6. Aggiungi un anello bianco
Nel pannello Livelli fai clic sul livello del cerchio (Forma). In Proprietà, sotto Traccia, imposta Contenuto su Colore, fai clic sul campione e scegli il bianco (FFFFFF). Sotto Geometria della traccia, digita 16 nel campo Larghezza (px) e imposta Posizione su Interna, così l’anello resta dentro il cerchio di 600 px.
Una traccia bianca di 16 px, all’interno del bordo. 
Il badge finito. Esporta in SVG e salva il progetto
Prima nascondi il livello vuoto Sfondo con la sua icona a forma di occhio nel pannello Livelli: altrimenti l’SVG riceve per quel livello una minuscola immagine trasparente, che le altre app importano come oggetto in più. Poi scegli e fai clic su Esporta. L’SVG conserva ogni forma come tracciato vettoriale, quindi resta nitida a qualsiasi dimensione su un sito web o in un’altra app di grafica, e lo sfondo resta trasparente.
Per mantenere le forme modificabili in Lil Cactus, scegli anche (Ctrl+Maiusc+S o ⇧⌘S); da quel momento aggiorna quel file. le conserva come livelli forma vettoriali, ma quando riapri il PSD diventano tracciati modificabili senza le impostazioni dinamiche di angoli e punte.
Forme e opzioni
- Rettangolo: Raggio dell’angolo nella barra delle opzioni ne arrotonda gli angoli, per pulsanti e schede.
- Linea: trascina da un’estremità all’altra, poi imposta in Proprietà il colore della traccia, lo spessore e le Estremità (piatte, arrotondate o quadrate). Una nuova linea ha la traccia nel colore di primo piano; se non si vede, quel colore coincide con il documento: scegli lì un altro colore per la traccia.
- Poligono e Stella: Lati o Punte e, per una stella, il Raggio interno, che stabilisce quanto sono profonde le punte.
Metodo nella barra delle opzioni decide cosa crea un trascinamento: un livello forma (Forma), un tracciato da trasformare in selezione o in traccia (Tracciato), oppure pixel dipinti sul livello attuale (Pixel), che non sono più modificabili come forma.
Combinare e rimodellare le forme
Per ritagliare una forma da un’altra, seleziona il livello forma e, prima di disegnare, imposta Operazione nella barra delle opzioni su Sottrai: la nuova forma diventa un foro in quella selezionata, sullo stesso livello. Unisci la aggiunge, Interseca conserva solo la sovrapposizione ed Escludi conserva tutto tranne la sovrapposizione. Per forme separate, riporta Operazione su Nuovo livello.
Per trascinare singoli punti, fai clic con il pulsante destro sul pulsante della penna nella barra degli strumenti, scegli Selezione diretta e trascina un punto della forma selezionata. Una forma combinata o rimodellata diventa un tracciato libero: il suo elenco Forma in Proprietà indica Tracciato modificabile, e non ha più impostazioni dinamiche di angoli o punte. Vedi come usare lo strumento Penna.
Cosa conserva l’esportazione SVG
- I livelli forma, con riempimenti a colore e a sfumatura lineare, radiale e riflessa, tracce e tratteggi, diventano tracciati vettoriali. Una forma con una sfumatura angolare o a rombi diventa un’immagine.
- Il testo diventa contorni vettoriali delle lettere, se il font lo consente.
- Le foto, gli stili livello come le ombre esterne e le maschere diventano un’immagine solo per quel livello.
- Un livello visibile con un metodo di fusione diverso da Normale, una maschera di ritaglio o un livello di regolazione trasformano l’intero SVG in un’unica immagine, senza vettori. Lo stesso accade con un documento Lab o in scala di grigio, oppure con uno che ha un profilo colore diverso da quello predefinito e contiene testo, trasparenza o sfumature. La finestra di esportazione lo segnala prima che tu esporti.
Per un file puramente vettoriale, limita il progetto a livelli forma e testo semplice con metodo Normale, e nascondi i livelli vuoti.
Risolvi i problemi più comuni
La forma è venuta nera
Il colore di primo piano era nero. Cambia il riempimento in Proprietà, oppure imposta il colore di primo piano prima di disegnare.
La nuova forma ha fatto un foro in quella vecchia
Operazione nella barra delle opzioni è impostata su Sottrai. Annulla con (Ctrl+Z o ⌘Z), impostala su Nuovo livello e disegna di nuovo.
Il cerchio è un ovale
In Proprietà digita lo stesso valore in Larghezza (px) e in Altezza (px).
Se vieni da un altro editor
- Photoshop
- Gli strumenti forma (U) e le impostazioni dinamiche delle forme nel pannello Proprietà.
Forme e grafica vettoriale: domande e risposte
Che differenza c’è tra un livello forma e un livello di pixel?
Un livello forma memorizza la forma come descrizione, quindi in Lil Cactus puoi ridimensionarla, arrotondarne gli angoli o ricolorarla in qualsiasi momento senza perdere nitidezza. Un livello di pixel memorizza punti di colore, che diventano sfocati quando li ingrandisci.
Come faccio un rettangolo con gli angoli arrotondati?
In Lil Cactus scegli lo strumento “Forma” (U), scegli “Rettangolo” nella barra delle opzioni, digita un “Raggio dell’angolo”, per esempio 20 px, e trascina. Puoi cambiare il raggio in seguito nel pannello “Proprietà”.
Come esporto un logo con lo sfondo trasparente?
In Lil Cactus parti da “File › Nuovo…” con il campione di sfondo trasparente e nascondi il livello vuoto “Sfondo” (oppure nascondi uno sfondo pieno), poi scegli “File › Esporta › SVG…” per un file vettoriale o “PNG…” per un’immagine.
Posso aprire l’SVG in altre app?
Sì. L’SVG di Lil Cactus è un file standard che si apre nei browser web, nelle app di grafica e nel codice dei siti web, con ogni forma come tracciato. Una traccia interna o esterna ha lo stesso aspetto, ma in un’app di grafica è una traccia larga il doppio dentro un tracciato di ritaglio.
Come centro una forma nel quadro?
In Lil Cactus imposta X e Y nel pannello “Proprietà” a metà delle dimensioni del quadro meno metà delle dimensioni della forma; per un cerchio di 600 px su un quadro di 800 px, sono 100 e 100.
Il mio lavoro viene caricato online quando disegno forme in Lil Cactus?
No. Tutto avviene nel browser, sul tuo dispositivo. Quando le statistiche sono attive, l’editor registra quali strumenti vengono usati, mai l’immagine, come spiega l’informativa sulla privacy.
Continua
Come usare lo strumento Penna per scontornare un oggettoContorni precisi e morbidi per scontorni, selezioni e forme.Intermedio · 8 min
Come aggiungere un’ombra esterna e un contorno con gli stili livelloOmbre, contorni, bagliori e sovrapposizioni che restano modificabili.Principiante · 6 min
Come usare i livelli in un editor di fotoSovrapponi, riordina, rendi trasparenti, nascondi e raggruppa le parti di un’immagine.Principiante · 6 min