Editor vettoriale in Zero Block

Come creare le proprie immagini vettoriali su Tilda

Nell'editor Zero Block è possibile creare la propria immagine vettoriale nell'editor vettoriale integrato. A tale scopo, fare clic sul pulsante più per l'aggiunta di nuovi elementi → Aggiungi vettore.

Andare in Impostazioni elemento e fare clic sul pulsante "Modifica vettore". È possibile iniziare a lavorare con il vettore anche facendo doppio clic sull'elemento.
Si aprirà l'editor di immagini vettoriali. Sono disponibili 4 strumenti: Strumento Seleziona, Strumento Disegna, Strumento Piega e Strumento Modifica per i punti di ancoraggio.
Strumento di disegno

Lo strumento Disegna consente di creare un nuovo vettore aggiungendo curve di Bezier con punti di ancoraggio (al clic). punti di ancoraggio (al clic) e regolando le maniglie delle curve. Con questo strumento strumento è possibile creare linee rette e curve.


Se si tiene premuto il tasto Shift, il punto di ancoraggio successivo sarà posizionato orizzontalmente, verticalmente o in diagonale con un angolo di 45 gradi rispetto al punto precedente.


Per chiudere il tracciato, aggiungere l'ultimo punto al primo. Per mantenere la forma aperta, fare doppio clic sull'ultimo punto o utilizzare il tasto ESC.
Selezionare lo strumento
Lo strumento Seleziona consente di selezionare, trascinare, scalare e ruotare le forme separate create, nonché di configurarne le impostazioni (colore e larghezza del riempimento e del tratto).
Esistono quattro modalità di scalatura:
  • Libero. L'elemento viene ridimensionato liberamente e il rapporto di aspetto non viene mantenuto.
  • Proporzionale ( tasto Maiusc tenuto premuto). L'elemento viene ridimensionato e il rapporto di aspetto viene mantenuto.
  • Ridimensionamento dal centro ( tasto Alt/Opzione tenuto premuto). L'elemento mantiene la sua posizione rispetto al punto centrale. Il rapporto di aspetto non viene mantenuto.
  • Ridimensionare proporzionalmente dal centro ( tasti Maiusc + Alt/Opzione tenuti premuti). L'elemento mantiene la sua posizione rispetto al punto centrale. Il rapporto di aspetto viene mantenuto.
Esempi delle 4 modalità di scalatura
Esistono due modi per ruotare elementi:
  • Libero. L'elemento può essere ruotato arbitrariamente spostando il cursore sull'angolo dell'elemento.
  • Rotazione con passo di 15 gradi (tasto Shift tenuto premuto).

A azzeramento rotazione, fare clic con il tasto destro del mouse per aprire il menu contestuale dell'elemento e selezionare "Ripristina rotazione".
Per speculare l'elemento in verticale o in orizzontale, utilizzare le opzioni del menu contestuale: Capovolgi orizzontale, Capovolgi verticale.
Strumento di piegatura
Lo strumento Curva consente di modificare i segmenti di curva separati e l'angolo delle maniglie della curva. angolo delle maniglie della curva per i punti di ancoraggio dopo aver creato un vettore.
Strumento di modifica
Lo strumento Modifica consente di modificare i punti di ancoraggio (spostare e modificare le curve di Bezier) e modificare i segmenti tra due punti di ancoraggio. Per attivare questo strumento, fare doppio clic sull'elemento che si desidera modificare.
Diverse forme in un'immagine vettoriale
È possibile creare più forme all'interno di un'immagine vettoriale. Per posizionarle una sopra o una sotto l'altra (come livelli), aprire il menu contestuale con il tasto destro del mouse sull'elemento e selezionare l'opzione "Porta davanti" o "Manda dietro". È anche possibile utilizzare i tasti ] o [ per eliminare un elemento.

Per eliminare un elemento, premere il tasto Backspace o utilizzare il menu contestuale.
Importazione di file SVG

Utilizzare il menu contestuale, il menu della barra degli strumenti o il menu Cmd/Ctrl+l per importare un'immagine. È possibile importare qualsiasi immagine SVG fino a 20KB.

Elenco delle scorciatoie da tastiera
Per visualizzare l'elenco completo delle scorciatoie da tastiera, fare clic sui tre punti → Scorciatoie nell'editor.
Le scorciatoie sono specificate anche nella tabella seguente.
Panoramica delle caratteristiche principali
Lavorare con i contenitori e creare elementi reattivi
Un elenco completo di scorciatoie per velocizzare il processo di progettazione
Fissazione degli elementi, parallasse e animazione in dissolvenza
Animazione complessa a più fasi: Principi di base, impostazioni ed esempi

Come impostare l'animazione di un elemento al clic o al passaggio su un altro elemento

Come importare automaticamente un layout da Figma a Zero Block

Realizzato su
Tilda