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.

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
Arbeiten mit Containern und Erstellen von responsiven Elementen
Eine vollständige Liste von Shortcuts zur Beschleunigung Ihres Entwurfsprozesses
Elementfixierung, Parallaxe und Einblendungsanimation
Komplexe mehrstufige Animation: Grundprinzipien, Einstellungen und Beispiele

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

Wie Sie ein Layout automatisch aus Figma in Zero Block

Hergestellt am
Tilda