Formen zeichnen und Vektorgrafiken als SVG exportieren
Kurze Antwort
Drücken Sie U für das Werkzeug Form, wählen Sie in der Optionsleiste eine Form und ziehen Sie auf der Arbeitsfläche auf; halten Sie Umschalt oder ⇧ gedrückt, um einen exakten Kreis oder ein Quadrat zu erhalten. Jede Form liegt auf einer eigenen Ebene und bleibt bearbeitbar: Größe, Ecken, Fläche und Kontur lassen sich jederzeit im Bedienfeld Eigenschaften ändern. Für eine Vektordatei wählen Sie
- Dauer
- 6 Minuten
- Niveau
- Einsteiger
- Sie brauchen
- Nichts: Sie beginnen mit einem neuen, leeren Dokument
- Funktioniert mit
- Export als SVG, PDF, PNG, WebP und in andere Bildformate; in Lil-Cactus-Projekten bleiben Formen voll bearbeitbar
Kostenlos, ohne Anmeldung. Ihre Arbeit bleibt auf Ihrem Computer.
Eine Formebene speichert eine Form als Beschreibung, etwa „ein Kreis mit 600 px Durchmesser bei 100, 100, grün gefüllt“, statt als Pixel. Sie können die Form skalieren, ihre Ecken abrunden oder ihre Farbe ändern, ohne an Schärfe zu verlieren, und ein SVG-Export behält sie als Vektor, der in jeder Größe scharf bleibt, vom Favicon bis zum Poster.
In diesem Tutorial bauen Sie ein einfaches Badge aus zwei Formen, einem grünen Kreis mit weißem Ring (seiner Kontur) und einem weißen Stern, und exportieren es als SVG.
Formen zeichnen und als SVG exportieren in sieben Schritten
Ein neues Dokument erstellen
Rufen Sie lilcactus.app auf und wählen Sie Geben Sie im Feld Breite 800 und im Feld Höhe 800 ein, klicken Sie unter Hintergrund auf das Schachbrett-Farbfeld für einen transparenten Hintergrund und klicken Sie auf Erstellen.
800 × 800 px mit transparentem Hintergrund. Einen Kreis zeichnen
Drücken Sie U für das Werkzeug Form. Wählen Sie in der Optionsleiste (der Leiste unter den Menüs) in der Liste Form die Option Ellipse; unter Modus sollte Form stehen. Halten Sie Umschalt oder ⇧ gedrückt und ziehen Sie über den größten Teil der Arbeitsfläche: Auf einer neuen Ebene namens Form erscheint ein schwarzer Kreis. Neue Formen werden mit der Vordergrundfarbe gefüllt.
Form: Ellipse. Genaue Größe, Position und Farbe festlegen
Solange der Kreis ausgewählt ist, zeigt das Bedienfeld Eigenschaften seine aktiven Einstellungen. Geben Sie in den Feldern X (px) und Y (px) 100 und in den Feldern Breite (px) und Höhe (px) 600 ein und drücken Sie nach jedem Wert Tab: Der Kreis ist jetzt mit 100 px Rand zentriert.
Klicken Sie weiter unten im Bereich Fläche auf das Farbfeld, geben Sie im Hex-Feld 2E7D5B ein und klicken Sie auf OK. Der Kreis wird grün.
Genaue Position und Größe. 
Die Flächenfarbe, #2E7D5B. Einen weißen Stern mit abgerundeten Spitzen zeichnen
Drücken Sie D und dann X, damit Weiß die Vordergrundfarbe ist. Wählen Sie in der Liste Form der Optionsleiste die Form Stern und stellen Sie Zacken auf 5, Innenradius auf 50 und Eckenradius auf 24. Halten Sie Umschalt oder ⇧ gedrückt und ziehen Sie von etwa einem Viertel bis drei Vierteln über den Kreis: Ein weißer Stern mit weichen Spitzen entsteht, auf einer eigenen Ebene. Um ihn genau zu platzieren, geben Sie in Eigenschaften in den Feldern X (px) und Y (px) 250 und in den Feldern Breite (px) und Höhe (px) 300 ein.
Zacken 5, Innenradius 50 %, Eckenradius 24 px. 
Der Stern auf dem Kreis. Den Stern später ändern
Formen bleiben aktiv. Geben Sie bei ausgewählter Sternebene im Bedienfeld Eigenschaften im Feld Zacken 6 ein und drücken Sie Tab: Der Stern wird mit sechs Zacken neu gezeichnet, in derselben Größe und mit denselben abgerundeten Ecken. Breite (px) und Radius (px) (der Eckenradius) funktionieren genauso.
Zacken: 6. Einen weißen Ring hinzufügen
Klicken Sie im Bedienfeld Ebenen auf die Ebene des Kreises (Form). Stellen Sie in Eigenschaften im Bereich Kontur die Option Fülltyp auf Farbe, klicken Sie auf das Farbfeld und wählen Sie Weiß (FFFFFF). Geben Sie im Bereich Konturgeometrie im Feld Breite (px) 16 ein und stellen Sie Position auf Innen, damit der Ring innerhalb des 600-px-Kreises bleibt.
Eine weiße 16-px-Kontur innerhalb des Rands. 
Das fertige Badge. Als SVG exportieren und das Projekt speichern
Blenden Sie zuerst die leere Ebene Hintergrund mit ihrem Augensymbol im Bedienfeld Ebenen aus: Sonst erhält die SVG-Datei dafür ein winziges transparentes Bild, das andere Programme als zusätzliches Objekt importieren. Wählen Sie dann und klicken Sie auf Exportieren. Die SVG-Datei behält jede Form als Vektorpfad, sodass sie auf einer Website oder in einem anderen Designprogramm in jeder Größe scharf bleibt, und der Hintergrund bleibt transparent.
Damit die Formen in Lil Cactus bearbeitbar bleiben, wählen Sie außerdem (Strg+Umschalt+S oder ⇧⌘S); danach aktualisiert diese Datei. behält sie als Vektorformebenen, doch beim erneuten Öffnen der PSD-Datei sind sie bearbeitbare Pfade ohne ihre aktiven Ecken- und Zackeneinstellungen.
Formen und Optionen
- Rechteck: Eckenradius in der Optionsleiste rundet die Ecken ab, für Buttons und Karten.
- Linie: Ziehen Sie von einem Ende zum anderen und legen Sie dann in Eigenschaften Konturfarbe, Breite und Linienenden (flach, rund oder quadratisch) fest. Eine neue Linie erhält eine Kontur in der Vordergrundfarbe; ist sie nicht zu sehen, entspricht diese Farbe dem Dokument: Wählen Sie dort eine andere Konturfarbe.
- Polygon und Stern: Seiten bzw. Zacken und beim Stern der Innenradius, der festlegt, wie tief die Zacken eingeschnitten sind.
Modus in der Optionsleiste entscheidet, was beim Ziehen entsteht: eine Formebene (Form), ein Pfad, den Sie in eine Auswahl oder eine Kontur umwandeln können (Pfad), oder Farbe auf der aktuellen Ebene (Pixel), die sich nicht mehr als Form bearbeiten lässt.
Formen kombinieren und umformen
Um eine Form aus einer anderen auszuschneiden, wählen Sie die Formebene aus und stellen Sie vor dem Zeichnen in der Optionsleiste Pfadoperation auf Subtrahieren: Die neue Form wird zu einem Loch in der ausgewählten, auf derselben Ebene. Vereinen fügt sie hinzu, Schnittmenge behält nur die Überschneidung und Ausschließen alles außer der Überschneidung. Für getrennte Formen stellen Sie Pfadoperation wieder auf Neue Ebene.
Um einzelne Punkte zu ziehen, klicken Sie in der Werkzeugleiste mit der rechten Maustaste auf die Zeichenstift-Schaltfläche, wählen Sie Direktauswahl und ziehen Sie einen Punkt der ausgewählten Form. Eine kombinierte oder umgeformte Form wird zu einem freien Pfad: In ihrer Liste Form in Eigenschaften steht Bearbeitbarer Pfad, und sie hat keine aktiven Ecken- oder Zackeneinstellungen mehr. Siehe Zeichenstift-Werkzeug verwenden.
Was ein SVG-Export behält
- Formebenen mit Farbfüllung, linearen, radialen und reflektierten Verlaufsfüllungen, Konturen und Strichelungen werden zu Vektorpfaden. Eine Form mit einem Winkel- oder Rautenverlauf wird zu einem Bild.
- Text wird zu Vektorbuchstabenumrissen, soweit die Schrift es zulässt.
- Fotos, Ebenenstile wie Schlagschatten und Masken werden nur für diese Ebene zu einem Bild.
- Eine sichtbare Ebene mit einer anderen Füllmethode als Normal, eine Schnittmaske oder eine Einstellungsebene macht die gesamte SVG-Datei zu einem einzigen Bild ohne Vektoren. Ebenso ein Lab- oder Graustufendokument oder eines mit einem anderen als dem Standardfarbprofil, das Text, Transparenz oder Verläufe enthält. Der Exportdialog weist vor dem Export darauf hin.
Für eine reine Vektordatei beschränken Sie das Design auf Formebenen und einfachen Text in der Füllmethode Normal und blenden leere Ebenen aus.
Häufige Probleme beheben
Die Form ist schwarz geworden
Die Vordergrundfarbe war Schwarz. Ändern Sie die Fläche in Eigenschaften oder stellen Sie die Vordergrundfarbe vor dem Zeichnen ein.
Meine neue Form hat ein Loch in die alte geschnitten
In der Optionsleiste steht Pfadoperation auf Subtrahieren. Machen Sie den Schritt mit (Strg+Z oder ⌘Z) rückgängig, stellen Sie die Option auf Neue Ebene und zeichnen Sie erneut.
Der Kreis ist oval
Geben Sie in Eigenschaften in den Feldern Breite (px) und Höhe (px) denselben Wert ein.
Umstieg von einem anderen Programm
- Photoshop
- Die Formwerkzeuge (U) und die aktiven Formeinstellungen im Bedienfeld „Eigenschaften“.
Formen und Vektorgrafiken: Fragen und Antworten
Was ist der Unterschied zwischen einer Formebene und einer Pixelebene?
Eine Formebene speichert die Form als Beschreibung, deshalb können Sie sie in Lil Cactus jederzeit skalieren, ihre Ecken abrunden oder umfärben, ohne an Schärfe zu verlieren. Eine Pixelebene speichert Farbpunkte, die beim Vergrößern unscharf werden.
Wie erstelle ich ein abgerundetes Rechteck?
Wählen Sie in Lil Cactus das Werkzeug „Form“ (U), wählen Sie in der Optionsleiste „Rechteck“, geben Sie einen Eckenradius wie 20 px ein und ziehen Sie auf. Den Radius können Sie später im Bedienfeld „Eigenschaften“ ändern.
Wie exportiere ich ein Logo mit transparentem Hintergrund?
Beginnen Sie in Lil Cactus mit „Datei › Neu…“ und dem transparenten Hintergrund-Farbfeld und blenden Sie die leere Ebene „Hintergrund“ aus (oder eine gefüllte), wählen Sie dann „Datei › Exportieren › SVG…“ für eine Vektordatei oder „PNG…“ für ein Bild.
Kann ich die SVG-Datei in anderen Programmen öffnen?
Ja. Die SVG-Datei aus Lil Cactus ist eine Standarddatei, die sich in Webbrowsern, Designprogrammen und im Code von Websites öffnen lässt, mit jeder Form als Pfad. Eine Kontur mit der Position „Innen“ oder „Außen“ sieht gleich aus, ist in einem Designprogramm aber eine doppelt so breite Kontur innerhalb eines Beschneidungspfads.
Wie zentriere ich eine Form auf der Arbeitsfläche?
Setzen Sie in Lil Cactus im Bedienfeld „Eigenschaften“ X und Y auf die halbe Arbeitsflächengröße minus die halbe Formgröße; für einen 600-px-Kreis auf einer 800-px-Arbeitsfläche sind das 100 und 100.
Wird meine Arbeit hochgeladen, wenn ich in Lil Cactus Formen zeichne?
Nein. Alles läuft in Ihrem Browser auf Ihrem eigenen Gerät. Bei aktivierter Statistik erfasst der Editor, welche Werkzeuge verwendet werden, aber nie das Bild, wie die Datenschutzerklärung erläutert.
Weiter geht’s
Wie stellt man ein Objekt mit dem Zeichenstift frei?Präzise, glatte Umrisse für Freisteller, Auswahlen und Formen.Fortgeschrittene · 8 Min.
Schlagschatten und Kontur mit Ebenenstilen hinzufügenSchatten, Konturen, Schein und Überlagerungen, die bearbeitbar bleiben.Einsteiger · 6 Min.
Wie arbeitet man mit Ebenen in der Bildbearbeitung?Die Teile eines Bildes stapeln, umordnen, abschwächen, ausblenden und gruppieren.Einsteiger · 6 Min.