Arbeiten mit Zeichen- und Textwerkzeugen

Mithilfe der Zeichenwerkzeuge in der Werkzeugleiste links – den Werkzeugen „Rechteck“, „Ellipse“, „Polygon“, „Linie“ und „Zeichenstift“ – können Sie in Adobe XD schnell einfache Symbole und Grafiken zeichnen. Und mit dem Auswahlwerkzeug können Sie spezifische Linien, Formen oder Objekte auswählen, um sie anschließend zu bearbeiten.

Diese Formen können Sie dann auf unterschiedlichste Weise kombinieren und dadurch zusammengesetzte Formen und Objekte erstellen oder Teile einer Form maskieren. Weitere Informationen zu Kombinations- und Maskierungstechniken finden Sie unter Bearbeiten von Objekten mithilfe boolescher Operationen und Maskierungstechniken.

Rechtecke und Quadrate zeichnen

Ellipsen und Kreise zeichnen

Polygone zeichnen

Mit dem Polygon-Werkzeug können Sie eine Reihe neuer Formen erstellen wie Dreiecke, Rhomben, Fünfecke, Sterne und Herzen.

Linien zeichnen

Mit dem Werkzeug „Zeichenstift“ zeichnen

Der einfachste Pfad, den Sie mit dem Werkzeug „Zeichenstift“ erstellen können, ist eine gerade Linie. Setzen Sie dazu durch Klicken mit dem Werkzeug zwei Ankerpunkte. Wenn Sie erneut auf die Maustaste klicken, erstellen Sie einen Pfad, der aus geraden, durch Eckpunkte miteinander verbundenen Liniensegmenten besteht.

Kurven zeichnen

Wenn Sie Kurven zeichnen möchten, müssen Sie an der Stelle, an der die Kurve ihre Richtung ändert, einen Ankerpunkt hinzufügen und dann die Richtungslinien ziehen, die die Kurve formen. Länge und Neigung der Grifflinien bestimmen die Form der Kurve.

Kurven lassen sich leichter bearbeiten, anzeigen und drucken, wenn Sie beim Zeichnen möglichst wenige Ankerpunkte verwenden. Zu viele Punkte können zu unerwünschten Unregelmäßigkeiten in einer Kurve führen. Zeichnen Sie stattdessen die Ankerpunkte in großem Abstand voneinander und formen Sie die Kurven durch Anpassen der Längen und Winkel der Grifflinien.

Gerade Linien und anschließende Kurven zeichnen

Kurven und anschließende gerade Linien zeichnen

Zwei durch eine Ecke verbundene, gekrümmte Segmente zeichnen

Zeichen- und Bearbeitungsmodus

Um schnell zwischen dem Zeichen- und Bearbeitungsmodus zu wechseln, drücken Sie Esc.

Sie können den Pfadbearbeitungsmodus auch aktivieren, indem Sie auf die Form oder den Pfad doppelklicken. In diesem Modus werden Ankerpunkte sichtbar, aber beim Ziehen der Maus wird nichts gezeichnet. Sie können vorhandene Anker-/Kontrollpunkte bearbeiten oder neue Ankerpunkte zu vorhandenen Segmenten des Pfads hinzufügen.

Wenn Sie mit dem Werkzeug „Zeichenstift“ zeichnen, können Sie alle oben beschriebenen Änderungen durchführen sowie neue Segmente zeichnen.

Vorhandene Pfade erweitern

Wenn Sie das Werkzeug „Zeichenstift“ auswählen, werden bei allen Pfaden unter der Mausposition am Ausgangs- und Endpunkt Griffe angezeigt. Um den Pfad von diesem Punkt aus weiterzuzeichnen, klicken Sie auf einen der Griffe.

Wenn Sie einen geschlossenen Pfad erweitern, wird der Pfad wieder geöffnet und für den Zeichenstift wird wieder der Zeichenmodus aktiviert.

Ankerpunkte auswählen

Doppelklicken Sie auf die Zeichnung, deren Ankerpunkte angezeigt werden sollen. Sie können dann auf einen Ankerpunkt klicken, um diesen auszuwählen. Um mehrere Ankerpunkte auszuwählen, halten Sie die Umschalttaste gedrückt und klicken auf die Ankerpunkte oder Sie aktivieren das Auswahlwerkzeug und wählen die Ankerpunkte aus, indem Sie sie mit dem Auswahlrechteck einrahmen.

Verschieben Sie die ausgewählten Ankerpunkte mithilfe der Tastatur, indem Sie sie mit der Maus ziehen oder deren Eigenschaften (x- und y-Koordinaten) im Eigenschafteninspektor ändern.

Einrasten der Ankerpunkte deaktivieren

Beim Platzieren eines neuen Ankerpunkts oder beim Ziehen eines vorhandenen Ankerpunkts werden Ausrichtungslinien eingeblendet, wenn sich ein Anker vertikal oder horizontal in der Nähe eines anderen Ankerpunkts befindet. Halten Sie die Cmd/Strg-Taste gedrückt, wenn die Ankerpunkte nicht einrasten sollen.

Ankerpunkte hinzufügen und bearbeiten

Doppelklicken Sie auf die Zeichnung, um sie auszuwählen und die vorhandenen Ankerpunkte anzuzeigen. Klicken Sie auf den Pfad, um an der Cursorposition neue Ankerpunkte hinzuzufügen.

Ankerpunkte löschen

Wählen Sie die Ankerpunkte aus und drücken Sie dann die Entf-Taste.

Tastaturbefehle beim Zeichnen

Abstände messen

Sie können die Abstände zwischen einem Objekt und der Zeichenfläche oder zwischen einem Objekt und anderen umgebenden Objekten messen, indem Sie die Wahltaste (Mac) bzw. die Alt-Taste (Windows) drücken. 

 Wenn das ausgewählte Objekt kein Quadrat oder Rechteck ist, legt XD einen Begrenzungsrahmen um das Objekt. In diesem Fall werden die Abstände zum Begrenzungsrahmen angezeigt.

Messen der Abstände eines Objekts von den Rändern der Zeichenfläche:

Klicken Sie einfach auf das Objekt und drücken Sie die Wahltaste (Mac) bzw. die Alt-Taste (Windows).

Adobe XD misst den Abstand und zeigt das Ergebnis an, solange Sie die Wahl- bzw. Alt-Taste gedrückt halten.

Messen der Abstände eines Objekts zu anderen Objekten auf der Zeichenfläche:

Klicken Sie auf das Objekt, drücken Sie die Wahltaste (Mac) bzw. die Alt-Taste (Windows) und führen Sie die Maus über die anderen Objekte.

Adobe XD misst den kürzesten Abstand zwischen den beiden Objekten (bzw. deren Begrenzungsrahmen) und zeigt das jeweilige Ergebnis an, solange Sie die Wahl- bzw. Alt-Taste gedrückt halten.

Textwerkzeuge

Text an einem bestimmten Punkt eingeben

Klicken Sie auf das Textwerkzeug und anschließend auf die Stelle, an der der Text beginnen soll. Geben Sie den Text ein und drücken Sie die Esc-Taste, um die Textänderungen abzuschließen, oder drücken Sie die Eingabetaste, um zur nächsten Zeile zu springen.

Wenn Sie Text nach der Punktmethode eingeben, wird eine horizontale Textzeile eingefügt, die beim Schreiben verlängert wird. Jede Textzeile ist unabhängig, d. h., die Länge einer Zeile wird bei der Bearbeitung an die Textlänge angepasst, aber der Text wird nicht in die nächste Zeile umbrochen. Für einen Zeilenumbruch müssen Sie die Eingabetaste drücken. Diese Art der Eingabe empfiehlt sich dann, wenn Sie zusätzlich zu den anderen Inhalten nur ein paar Wörter einfügen möchten.

Sie können Text auch über anderen Objekten eingeben und bei Bedarf mit Objekt > Anordnen den Text im Vordergrund anzeigen.

Text in eine Fläche eingeben

Klicken Sie auf das Textwerkzeug. Klicken Sie dann auf die Stelle auf der Arbeitsfläche, an der der Text angezeigt werden soll, und ziehen Sie ein Rechteck auf, um die Fläche für den Text zu definieren. Beginnen Sie dann mit der Eingabe des Texts.

Wenn Sie eine Textfläche definieren, richtet sich der Textfluss nach den Begrenzungen des Objekts. Wenn der Text an eine Begrenzung stößt, erfolgt automatisch ein Zeilenumbruch, sodass der Text innerhalb der definierten Fläche bleibt. Diese Art der Eingabe eignet sich zum Erstellen einzelner oder mehrerer Absätze (z. B. für eine Broschüre).

Rechtschreibung prüfen

Wählen Sie im Menü Bearbeiten die Option Rechtschreibprüfung aktivieren. Die Rechtschreibprüfung wirkt sich nur auf falsch geschriebenen Text im Textcontainer aus. Falsch geschriebene Wörter sind rot unterstrichen und automatisch korrigierte Wörter sind blau unterstrichen. Grammatikfehler werden mit einer grünen Unterstreichung hervorgehoben.

Klicken Sie mit der rechten Maustaste auf das falsch geschriebene Wort und wählen Sie im Kontextmenü aus der Liste der vorgeschlagenen Korrekturen das richtige Wort aus.

Um eine automatisch korrigierte Schreibweise auf das ursprünglich eingegebene Wort zurückzusetzen, drücken Sie Cmd + Z unter macOS bzw. Strg + Z unter Windows.

Text aus Textdateien importieren

Es ist ganz einfach, zuvor erstellten Text in eine Zeichenfläche einzubinden. Dafür haben Sie mehrere Möglichkeiten:

• Sie ziehen eine Textdatei auf die Zeichenfläche
  

Sie können zuvor erstellten Text in Ihr Design einbinden, indem Sie eine reine Textdatei auf die Zeichenfläche ziehen. Dadurch wird auf der Zeichenfläche ein Flächentext mit dem Inhalt der Datei erstellt.          

• Sie ziehen eine Textdatei auf ein Wiederholungsraster

Sie können eine Textdatei (mit Zeilenumbrüchen) auch auf eine Textkomponente in einem Wiederholungsraster ziehen. Dadurch werden alle Textelemente mit dem Text aus dieser Datei aufgefüllt.

Weitere Informationen finden Sie unter Textdatei mit Zeilenumbruchzeichen auf ein Textobjekt im Wiederholungsraster ziehen. 

• Sie fügen kopierten Text in die Zeichenfläche ein

Sie können Text auch kopieren und in die Zeichenfläche einfügen. Dadurch erstellen Sie eine Textfläche, die Sie anschließend verschieben und bearbeiten können.

Optionen zur Änderung der Textgröße

XD bietet drei Optionen zur Änderung der Textgröße. Damit können Sie die Breite eines Textfelds erweitern, um den Inhalt in eine einzelne Zeile einzupassen, die Höhe eines Textfelds dynamisch anpassen und die Breite und Höhe des Textbereichs steuern.

Wählen Sie je nach Design-Anforderung ein Textobjekt aus und wählen Sie im Eigenschafteninspektor Automatische Breite, Automatische Höhe oder Feste Größe. 

Automatische Breite

Wenn Sie Text in Rahmen, Bildern und Objekten einfügen, können Sie die Breite des Textfelds so weit wie möglich erweitern und den Text in eine einzelne Zeile einpassen.

Automatische Höhe

Beim Design einer Anwendung mit viel Text oder beim Erstellen von Responsive Designs in Kombination mit Stapeln können Sie die Höhe des Flächentexts dynamisch anpassen, ohne dessen Breite zu ändern.

Text mit automatischer Höhe ermöglicht die automatische Anpassung der Höhe von Flächentext an den Inhalt. Wenn Sie einen Flächentext zeichnen, ist diese Option standardmäßig aktiviert. 

Feste Größe

Wenn Sie Text in Ihre Designs einfügen, etwa in Broschüren oder Websites, sollten Sie einen oder mehrere Absätze hinzufügen und die Breite und Höhe Ihres Textbereichs überprüfen. Mit der Option „Feste Größe“ können Sie den Text umbrechen, um ihn in das Textfeld einzupassen, und ihn automatisch abschneiden, wenn er die Höhe überschreitet. 

Um Feste Größe zu aktivieren, klicken Sie im Eigenschafteninspektor das Symbol . Klicken Sie auf die Größenänderungsgriffe an den verschiedenen Seiten des Textbereichs und ziehen Sie, um die Größe eines Bereichs zu ändern. Wenn der Text nicht in den Textbereich passt, wird unten ein roter Größenänderungsgriff angezeigt.

Wenn Sie auf diesen Größenänderungsgriff doppelklicken, wird die Größe des Textbereichs an die Größe des Inhalts angepasst.

Text formatieren

Klicken Sie auf den Text und ändern Sie im Eigenschafteninspektor die Schriftart, den Schriftgrad und die Ausrichtung.

Sie können auch einzelne Wörter oder Zeichen in einem Textblock auswählen und diese Bereiche gesondert formatieren.

Zeichen-, Zeilen- und Absatzabstand ändern

Um den Zeichenabstand zu ändern, klicken Sie auf das Textobjekt und legen im Eigenschafteninspektor einen Wert für die Option Zeichenabstand fest.

Um den Zeichenabstand nur für einen Teil des Texts zu ändern, wählen Sie diesen Text aus und ändern im Eigenschafteninspektor den Zeichenabstand in Milli-Em.

Um den Zeilenabstand zu ändern, klicken Sie auf die Textfläche und legen im Eigenschafteninspektor einen Wert für die Option Zeilenabstand fest.

Um den Zeilenabstand auf die Standardeinstellung zurückzusetzen, geben Sie im Eigenschafteninspektor unter Zeilenabstand den Wert 0 ein.

Wie bei Photoshop und InDesign können Sie in Adobe XD den Abstand vor und nach Absätzen innerhalb eines Textelements ändern.

Um den Absatzabstand zu ändern, wählen Sie einen Absatz aus und klicken im Bedienfeld Formatierung auf das Absatzsymbol. Ändern Sie den Wert für den Abstand nach Bedarf.

Textauszeichnungen

Wenn Sie eine der Textauszeichnungen anwenden möchten, wählen Sie zu ändernden Text aus. Wählen Sie im Eigenschafteninspektor eine der folgenden Optionen aus:

• Symbol GROSSBUCHSTABEN (TT), um den Text in Großbuchstaben anzuzeigen.
• Symbol kleinbuchstaben (tt), um den Text in Kleinbuchstaben anzuzeigen.
• Symbol Erster Buchstabe Im Wort Groß (Tt), damit im Text jeweils der erste Buchstabe eines Worts großgeschrieben wird. 
• Symbol Hochgestellter Text, um den Text hochgestellt anzuzeigen.
• Symbol Tiefgestellter Text, um den Text tiefgestellt anzuzeigen.

Text unterstreichen

Um Text unterstrichen auszuzeichnen, klicken Sie auf den Textbereich und anschließend im Eigenschafteninspektor auf das Symbol Unterstrichen. XD zeichnet einen Unterstrich, der bei Buchstaben mit Unterlängen unterbrochen wird (sodass eine schönere Linie entsteht).

Text durchstreichen

Um Text durchgestrichen anzuzeigen, wählen Sie den gewünschten Textbereich aus und klicken anschließend im Eigenschafteninspektor auf das Symbol Durchgestrichen. Genau in der Mitte des Texts wird eine durchgängige Linie gezeichnet, sodass der Text durchgestrichen wirkt.    

Globale Formatänderungen

Sie können auch globale Formatänderungen vornehmen. Dazu wenden Sie Textauszeichnungen oder durchgestrichenen Text auf Zeichenformate an.

Wenn Sie eine Auszeichnung mehrmals in einem Dokument verwenden möchten, speichern Sie sie im Bedienfeld Elemente als Zeichenformat. Klicken Sie dann mit der rechten Maustaste auf das Zeichenformat und wählen Sie im Kontextmenü die Option Bearbeiten. Wählen Sie dann die Option GROSSBUCHSTABEN, kleinbuchstaben, Erster Buchstabe Im Wort Groß oder Durchgestrichen. Jede Textstelle im Dokument, auf die dieses Zeichenformat angewendet wurde, wird entsprechend geändert. 

Mit Berechnungen präzise Designs erstellen

Mit Berechnungen können Sie Designs mit höherer Genauigkeit erstellen oder Objekte auf eine andere Stelle verschieben oder die Breite und Höhe ändern.

Wählen Sie eines oder mehrere Objekte aus. In Feldern im Eigenschafteninspektor, in die Zahlen eingegeben werden können, können Sie auch einfache Berechnungen ausführen. Um Änderungen zu berechnen, unterstützt Adobe XD die Rechenoperationen +, –, / und *.

Wenn Sie etwa ein ausgewähltes Objekt um 3 Einheiten (gemäß der aktuellen Maßeinheit) nach rechts verschieben möchten, geben Sie nach dem aktuellen Wert „+3“ ein.

Führen Sie in einem Textfeld des Eigenschafteninspektors, in das Zahlen eingegeben werden können, einen der folgenden Schritte aus:

•   Soll der gesamte aktuelle Wert durch einen mathematischen Ausdruck ersetzt werden, wählen Sie den gesamten aktuellen Wert aus.
•   Soll der aktuelle Wert als Teil eines mathematischen Ausdrucks verwendet werden, klicken Sie auf eine Stelle vor oder hinter dem aktuellen Wert.

 Adobe XD kann jeweils nur eine Operation ausführen. Das heißt, es kann „4in + 2p“ verarbeiten, aber nicht „4in + 2p - 1p", da dies als zwei verschiedene Operationen interpretiert wird.

Video: Wie arbeite ich mit Texten mit automatischer Höhe?

„Im Container für Text mit automatischer Höhe wird die Höhe automatisch an die enthaltene Textmenge anpasst. Das funktioniert auch hervorragend mit inhaltsbasierten Layout-Funktionen wie Stapeln und Innenabstände“ – Dani Beaumont, Principal Product Manager, Adobe XD.

Das folgende Video zeigt, wie Sie in XD mit Text mit automatischer Höhe arbeiten.

Dauer: 3 Minuten