Pfad
Möchten Sie Werkzeuge zum Erstellen von Formen verwenden, während Sie an einem Symbol oder einem Design-Element arbeiten? Dann sind Sie hier richtig!
Das Erstellen von Grafiken in XD ist dank der verschiedenartigen Zeichenwerkzeuge, die in der Werkzeugleiste verfügbar sind, ganz einfach. Mit den verfügbaren Werkzeugen zum Erstellen von Formen können Sie schnell einfache Symbole oder Grafiken erstellen und der Zeichenstift eignet sich sogar für komplexe Formen oder Objekte.
Im Folgenden erfahren Sie, wie viele Möglichkeiten sich Ihnen bieten, wenn Sie beim Erstellen von Design-Elementen Formwerkzeuge einsetzen!
Neu bei Adobe XD?
Jetzt testen
Beispieldatei abrufen
Vorbereitung
Machen Sie sich mit den folgenden Konzepten in XD vertraut:
- Arbeitsbereich – Grundlagen.
- Zeichenflächen einrichten in XD.
|
Eine Form besteht aus mehreren Liniensegmenten, die als Pfade bezeichnet werden. Ein einfacher Pfad besteht aus zwei Ankerpunkten, die wie Stifte funktionieren, die einen Draht an Ort und Stelle halten. |
---|---|
Ankerpunkte |
Start- und Endpunkt eines Liniensegments sind durch Ankerpunkte gekennzeichnet. Sie verwenden die Ankerpunkte, um Länge und Kurve eines Pfads zu steuern. Der Richtungsgriff an einem Ankerpunkt bestimmt die Richtung eines Pfads. |
Anzahl Ecken |
Bestimmt die Anzahl der Seiten in einem Polygon. |
Eckenradius |
Durch die Festlegung eines Eckenradius werden die Formen mit abgerundeten Ecken dargestellt. |
Begrenzungsrahmen |
Ein Begrenzungsrahmen ist ein rechteckiger Rahmen um ein Bild, eine Form oder Text, den Sie zum Verschieben, Transformieren, Drehen oder Skalieren ziehen können. |
Sie möchten eine Grundform erstellen?
Alle Zeichenwerkzeuge, einschließlich der Formwerkzeuge, sind imDesignmodus in der Werkzeugleiste verfügbar.Und die Optionen für jedes Werkzeug finden Sie rechts im Eigenschafteninspektor.
Werkzeugleiste in Adobe XD |
Mit dem Werkzeug Rechteck (R) zeichnen Sie ein Rechteck, ein abgerundetes Rechteck, ein Quadrat oder eine selbstdefinierte Form. |
|
---|---|---|
|
<Bild einfügen> Das Werkzeug Linie (L) zeichnet eine gerade Linie. |
Rechtecke oder Quadrate zeichnen
Mit dem Werkzeug „Rechteck“ in der Werkzeugleiste können Sie ein Rechteck oder ein Quadrat zeichnen. Abgesehen davon können Sie das Werkzeug auch verwenden, um selbstdefinierte Formen zu erstellen.
Wie versehe ich ein Rechteck mit abgerundeten Ecken?
Sie können ein Rechteck weiter verfeinern, indem Sie nur eine oder alle Ecken abrunden. Dazu legen Sie einen Eckenradius fest.
Um einen einzelnen Eckenradius zu ändern, klicken Sie bei gedrückter Wahl-/Alt-Taste auf den Radiusgriff der Ecke, die Sie anpassen möchten, und ziehen ihn zur Mitte der Form.
Sie können auch im Eigenschafteninspektor für die Option Unterschiedlicher Radius für jede Ecke einen Wert für diese Ecke in das Textfeld eingeben.
Sie können den Eckenradius nicht ändern, wenn Sie die Form in einen Pfad umwandeln.
Kreise oder Ellipsen zeichnen
Mit dem Werkzeug „Ellipse“ können Sie Kreise und Ellipsen zeichnen.
|
|
Kreis zeichnen Wählen Sie in der Werkzeugleiste das Werkzeug Ellipse () aus. Halten Sie beim Ziehen die Umschalttaste gedrückt, um die Form auf einen Kreis zu beschränken. |
Ziehen Sie die Maus nach rechts. Achten Sie im Eigenschafteninspektor auf die Informationen zur Objektplatzierung, die in den Feldern Breite und Höhe und den Feldern für die X- und Y-Achse angezeigt werden. |
Polygone zeichnen
Wählen Sie in der Werkzeugleiste das Werkzeug Polygon aus und zeichnen Sie das Standarddreieck.
- Halten Sie beim Zeichnen die Umschalttaste gedrückt, um ein gleichseitiges Dreieck zu zeichnen.
- Damit Sie im Eigenschafteninspektor weitere Einstellungen für die Form vornehmen können, achten Sie darauf, dass die Form ausgewählt bleibt.
Radius und Anzahl der Ecken ändern
Im Eigenschafteninspektor für das Polygon sehen Sie nun die Optionen Anzahl Ecken, Eckenradius und Stern: Inkreis-/Umkreisverhältnis.
Über das Textfeld Anzahl Ecken legen Sie fest, wie viele Seiten das Polygon hat. Beim Zeichnen können Sie mit den Tasten „Pfeil oben“ und „Pfeil unten“ die Anzahl der Polygonseiten erhöhen oder verringern.
Sterne und Herzformen erstellen
Sie möchten ein Bewertungserlebnis in Ihr Design integrieren? Dafür können Sie anpassbare Sterne und Herzformen hinzufügen ohne das Design von Grund auf neu erstellen zu müssen.
Stern |
Herzform |
|
|
Linien zeichnen
Mit dem Linienwerkzeug können Sie waagrechte, diagonale und senkrechte Linien zeichnen. Um eine diagonale oder senkrechte Linie zu zeichnen, halten Sie beim Zeichnen die Umschalttaste gedrückt.
Eine gerade Linie in eine Kurve umformen
Um eine Kurve zu erstellen, zeichnen Sie eine Linie aktivieren dann das Werkzeug Auswählen und doppelklicken auf die Linie, um sie in einen Pfad umzuwandeln. Anschließend doppelklicken Sie auf einen Ankerpunkt entlang der Linie, um seinen Richtungsgriff anzuzeigen. Jetzt ziehen Sie den Griff in eine beliebige Richtung, um die Linie in eine perfekte Kurve umzuformen. Sie bei Bedarf weitere Ankerpunkte zu dem Vektor hinzufügen.
Formen bearbeiten
In Adobe XD können Sie Formen schnell mit einem einzigen Werkzeug bearbeiten, dem Werkzeug Auswählen. In diesem Abschnitt erfahren Sie, wie Sie mit dem Werkzeug „Ellipse“ (oder einer beliebigen anderen Form) eine Sprechblase erstellen.
- Zeichnen Sie auf der Zeichenfläche eine Ellipse.
- Klicken Sie auf das Werkzeug Auswählen und doppelklicken Sie auf die Form, um sie in einen Pfad umzuwandeln. Jetzt können Sie die Ankerpunkte bearbeiten. Fahren Sie mit der Bearbeitung der vorhandenen Ankerpunkte fort oder klicken Sie einfach auf das Pfadsegment, um neue Ankerpunkte hinzuzufügen.
- Zeichnen Sie eine Fahne für die Sprechblase, indem Sie einen der Ankerpunkte in die gewünschte Richtung ziehen.
Drücken Sie Esc, um den Pfadbearbeitungsmodus zu beenden. Der Begrenzungsrahmen wird wieder angezeigt und die Ankerpunkte werden ausgeblendet.
Video: Wie erstelle ich Symbole aus Grundformen?
„Adobe XD“ bietet leistungsstarke Zeichenwerkzeuge zum Erstellen der Ikonografie, die Sie für Ihr Design-System benötigen.“ – Dani Beaumont, Principal Product Manager, XD.
Um mehr darüber zu erfahren, wie Sie Ihre eigene Ikonografie von Grund auf neu erstellen oder die vorhandenen Symbolbibliotheken verwenden, schauen Sie sich dieses 4-minütige Video an.
Ein weiteres Tutorial und herunterladbare Beispieldateien finden Sie unter Erstellen von Symbolen aus Grundformen.
Tipps und Tricks
Da Sie nun wissen, wie Sie in XD Ihre eigene Ikonografie erstellen, kommen hier einige praktische Tipps und Tricks:
- Sie können die Standardrechteckform verzerren, indem Sie sie in einen Pfad umwandeln. Wählen Sie die beiden Ankerpunkte oben aus, indem Sie Ihre Maus über die Punkte ziehen oder auch die Umschalttaste verwenden. Ziehen Sie einen der Ankerpunkte nach links oder rechts und halten Sie ihn in einer Linie mit der ursprüngliche Position der Ankerpunkte.
- Sie können beim Zeichnen von Formen die Wahltaste (macOS) bzw. Alt-Taste (Windows) gedrückt halten, um eine Form aus der Mitte zu zeichnen.
Um weitere Profi-Tipps zum Arbeiten mit Zeichenwerkzeugen zu erhalten, folgen Sie @Elainecchao, XD Product Manager auf Twitter.
Wie geht’s weiter?
Wir haben Ihnen die Grundlagen zum Erstellen von Symbolen mit den Formwerkzeugen in XD vermittelt. Wenn Sie die Möglichkeiten mit Formen weiter erkunden möchten, lesen Sie, wie Sie Grundformen kombinieren können, um einzigartige geometrische Muster zu erstellen.
Obwohl XD über alle Zeichenwerkzeuge zum Erstellen von Vektorgrafiken verfügt, können Sie auch die größere Auswahl an Zeichenwerkzeugen in Illustrator nutzen. Lesen Sie weiter, um zu erfahren, wie viele Möglichkeiten Sie haben, um Elemente aus Illustrator in Adobe XD einzubinden.
Noch Fragen oder Ideen?
Wenn Sie noch Fragen haben oder eigene Ideen weitergeben möchten, beteiligen Sie sich an unserer Adobe XD Community. Wir freuen uns schon auf Ihre Beiträge und Kreationen.