Vektor-Editor In Zero Block

Wie Sie Ihre eigenen Vektorgrafiken erstellen auf Tilda

In Zero Block editor können Sie mit dem eingebauten Vektor-Editor Ihr eigenes Vektorgrafikbild erstellen. Klicken Sie dazu auf die Plustaste zum Hinzufügen neuer Elemente → Vektor hinzufügen.

Gehen Sie zu Elementeinstellungen und klicken Sie auf die Schaltfläche "Vektor bearbeiten". Sie können die Arbeit mit dem Vektor auch durch einen Doppelklick auf das Element beginnen.
Der Vektorbild-Editor wird geöffnet. Es sind 4 Werkzeuge verfügbar: Auswahlwerkzeug, Zeichenwerkzeug, Biegewerkzeug und Bearbeitungswerkzeug für Ankerpunkte.
Zeichnen Werkzeug

Mit dem Zeichenwerkzeug können Sie einen neuen Vektor erstellen, indem Sie Bezier-Kurven mit Ankerpunkten (bei Klick) und Einstellen der Kurvengriffe. Mit diesem Werkzeug können Sie gerade und gebogene Linien erstellen.


Wenn Sie die Umschalttaste gedrückt halten, wird der nächste Ankerpunkt horizontal, vertikal oder diagonal positioniert in einem 45-Grad-Winkel in Bezug auf den vorherigen Punkt positioniert.


Um den Pfad zu schließen, fügen Sie den letzten Punkt über den ersten Punkt. Um die Form offen zu halten, doppelklicken Sie auf den letzten Punkt oder drücken Sie die ESC-Taste.
Werkzeug auswählen
Mit dem Auswahlwerkzeug können Sie einzelne Formen, die Sie erstellt haben, auswählen, ziehen, skalieren und drehen sowie ihre Einstellungen - Füll- und Strichfarbe und -breite - konfigurieren.
Es gibt vier Skalierungsmodi:
  • Frei. Die Größe des Elements ist frei wählbar, und das Seitenverhältnis wird nicht beibehalten.
  • Proportional ( Umschalttaste gedrückt halten). Das Element wird in der Größe verändert, wobei das Seitenverhältnis beibehalten wird.
  • Größe vom Mittelpunkt aus ändern ( Alt-/Optionstaste gedrückt halten). Das Element behält seine Position relativ zum zentralen Punkt bei. Das Seitenverhältnis wird nicht beibehalten.
  • Proportionale Größenänderung vom Mittelpunkt aus (Umschalttaste + Alt-/Optionstaste gedrückt halten). Das Element behält seine Position relativ zum zentralen Punkt bei. Das Seitenverhältnis wird beibehalten.
Beispiele für die 4 Skalierungsmodi
Es gibt zwei Möglichkeiten der Drehung Elemente:
  • Frei. Das Element kann beliebig gedreht werden, indem der Cursor über die Ecke des Elements bewegt wird .
  • Drehung mit einem 15-Grad-Schritt (Umschalttaste Taste gedrückt halten).

An zurücksetzen Rotation zu ändern, klicken Sie mit der rechten Maustaste, um das Kontextmenü des Elements zu öffnen, und wählen Sie "Rotation zurücksetzen".
An spiegeln das Element vertikal oder horizontal zu spiegeln, verwenden Sie die Optionen des Kontextmenüs: Horizontal spiegeln, Vertikal spiegeln.
Biegewerkzeug
Mit dem Biegewerkzeug können Sie einzelne Kurvensegmente und den Winkel der Kurvengriffe für die Ankerpunkte nachdem Sie einen Vektor erstellt haben.
Werkzeug bearbeiten
Mit dem Werkzeug Bearbeiten können Sie Ankerpunkte bearbeiten (verschieben Sie können Ankerpunkte verschieben und Bezier-Kurven bearbeiten und Segmente zwischen zwei Ankerpunkten ändern. Um dieses Werkzeug zu aktivieren, doppelklicken Sie auf das Element, das Sie bearbeiten möchten.
Mehrere Formen in einem Vektorbild
Sie können mehrere Formen innerhalb eines Vektorbildes erstellen. Um sie über- oder untereinander (als Ebenen) zu platzieren, öffnen Sie das Kontextmenü mit einem Rechtsklick auf das Element und wählen Sie die Option "Nach vorne bringen" oder "Nach hinten schicken". Sie können auch die Option ] oder [ Shortcuts verwenden.

Um ein Element zu löschen, drücken Sie die Rücktaste oder verwenden Sie das Kontextmenü.
SVG-Dateien importieren

Verwenden Sie das Kontextmenü, das Menü der Symbolleiste oder Cmd/Strg+l Tastaturkürzel, um ein Bild zu importieren. Sie können importieren jedes SVG-Bild bis zu 20KB importieren.

Umwandlung eines Vektorelements in ein Bild und zurück
Um ein Vektorelement in ein Bild im SVG-Format umzuwandeln, wählen Sie das Element auf der Zeichenfläche aus und klicken Sie auf die Schaltfläche In Bild umwandeln im rechten Einstellungsfenster.
Nach der Konvertierung wird das Vektorelement in der Ebenenliste als Bild angezeigt, und der Dateititel und die Erweiterung werden in den Elementeinstellungen angezeigt.

Um die empfangene SVG-Datei zu bearbeiten, klicken Sie auf Bearbeiten - der Vektor-Editor wird geöffnet. Sobald Sie den Editor verlassen, wird das Element gespeichert und wieder in eine SVG-Datei umgewandelt.

Um die SVG-Datei wieder in ein Vektorelement umzuwandeln, wählen Sie das Element aus und klicken Sie auf "Zu Vektor".
Liste der Tastaturkürzel
Um die vollständige Liste der Tastenkombinationen anzuzeigen, klicken Sie im Editor auf drei Punkte → Tastenkombinationen.
Die Abkürzungen sind ebenfalls in der nachstehenden Tabelle aufgeführt.
Überblick über die wichtigsten Merkmale
Lesen Sie
Arbeiten mit Containern und Erstellen von responsiven Elementen
Lesen Sie
Eine vollständige Liste von Shortcuts zur Beschleunigung Ihres Entwurfsprozesses
Öffnen Sie
Elementfixierung, Parallaxe und Einblendungsanimation
Lesen Sie
Komplexe mehrstufige Animation: Grundprinzipien, Einstellungen und Beispiele
Lesen Sie

So richten Sie eine Elementanimation bei Klick oder Hover über einem anderen Element ein

Lesen Sie

Wie Sie ein Layout automatisch aus Figma in Zero Block

Lesen Sie
Hergestellt am
Tilda