So erstellen Sie Grafiken mit Adobe XD: Ein Leitfaden für Anfänger

Adobe XD ist ein leistungsstarkes Tool, mit dem Sie UI/UX-Designs für Software, Apps, Websites und mehr erstellen können. Dazu gehört auch das Erstellen von Modellen, Prototypen und benutzerdefinierten UI-Komponenten für eine Schnittstelle. Mit Adobe XD können Sie sowohl einfache als auch komplexe Designs erstellen.

Hier beschreiben wir, wie Sie einfache Grafiken, einschließlich Formen, Bilder und Text, zu einem neuen Adobe XD-Projekt hinzufügen. Darauf folgt eine Anleitung zum Konvertieren einer Gruppe von Formen in Komponenten und zum Wiederverwenden dieser Komponenten auf der Seite. Schließlich behandelt der Artikel auch, wie Sie Ihre Grafiken exportieren. Lassen Sie uns gleich einsteigen.

Erstellen eines Adobe XD-Projekts

Wenn Sie ein neues Adobe XD-Projekt erstellen, sollten Sie eine Layoutgröße für Ihr Projekt auswählen. Es bietet einige Vorlagen, aus denen Sie basierend auf einigen gängigen Geräten auswählen können.

Einige Beispiele hierfür sind das iPhone X/XS/11 Pro (375 x 812 Pixel), das iPad (768 x 1024 Pixel) oder das Web 1920 (1920 x 1080 Pixel). Alternativ haben Sie auch die Möglichkeit, eine benutzerdefinierte Breite und Höhe für Ihr Projekt auszuwählen.

Sobald Sie ein neues Projekt erstellt haben, öffnet Adobe XD eine leere Seite. Hier können Sie mit dem Hinzufügen von Bildern, Formen, Text oder anderen Designelementen beginnen. Je nachdem, welche Adobe XD-Version Sie haben, können Sie dies möglicherweise tun Entdecken Sie einige der neuen Funktionen die Adobe XD anbietet.

Das Designelement der obersten Ebene ist die Canvas-Seite selbst. Wenn Sie es markieren, können Sie im rechten Bereich einige seiner Eigenschaften direkt ändern, z. B. die Breite oder Höhe der Leinwand.

So fügen Sie Bilder hinzu

Es gibt mehrere Möglichkeiten, Bilder zu Ihrem Adobe XD-Projekt hinzuzufügen.

• Die erste Option ist, auf das zu klicken Hamburger Menüsymbol oben in der linken Spalte. Klicke auf Importieren, und öffnen Sie die Datei, die Sie hinzufügen möchten.
• Eine andere Möglichkeit besteht darin, im Datei-Explorer zu Ihrem Bild zu navigieren und die Datei direkt in Adobe XD zu ziehen.
• Eine dritte Möglichkeit besteht darin, Ihr Bild zu kopieren und einzufügen, wenn Sie es in einer anderen Software wie Microsoft Word geöffnet haben.

So ändern Sie die Größe und Position eines Bildes

Sie können neu positionieren und Größe eines Bildes ändern entweder direkt auf der Leinwand oder durch Ändern ihrer Eigenschaften.

1. Markieren Sie das Bild. Wenn Sie ein Designelement auf der Leinwand markieren, können Sie seine Eigenschaften im rechten Bereich sehen.
2. Ändern Sie die Breite und Höhe des Bildes. Diese werden vertreten durch die W und H Felder.
3. Sie können die auch ändern X und Y Koordinaten, wo oben links im Bild beginnt.
4. Um das Bild zu verschieben, klicken Sie auf das Bild und ziehen Sie es auf der Leinwand herum.
5. Um die Größe zu ändern, ziehen Sie die Punkte an den Rändern des Bildes.

So passen Sie die Kanten eines Bildes an

Sie können die Ecken des Bildes anpassen, um seine Form zu ändern.

1. Markieren Sie das Bild.
2. Sie werden einige Punkte sehen, die sich um das Bild herum befinden. Zusätzlich befinden sich einige Punkte innerhalb der Ecken des Bildes.
3. Klicken und ziehen Sie an einem Punkt innerhalb des Bildes. Dadurch wird das Bild langsam in eine andere Form gebracht.

So fügen Sie dem Bild andere Effekte hinzu

Sie können das Bild weiter manipulieren, indem Sie Effekte hinzufügen. Dazu gehören Deckkraft, Ränder, Unschärfeeffekte und mehr.

1. Markieren Sie das Bild und ändern Sie die ÖGeschwindigkeit im rechten Bereich.
2. Ändern Sie, während Sie sich noch im rechten Bereich befinden, die Farbe von BBefehl. Hier können Sie auch die ändern Dicke, Dash-Stil, und Eckstil der Grenze.
3. Fügen Sie dem Bild einen Unschärfeeffekt hinzu und ändern Sie die Objektunschärfemenge zum Erhöhen oder Verringern der Unschärfeintensität.

So fügen Sie Formen hinzu

Sie können Formen in Adobe XD über den linken Bereich hinzufügen.

1. Im linken Bereich können Sie mehrere Grundformen erstellen, darunter ein Rechteck, einen Kreis, ein Dreieck und eine Linie. Wählen Sie die Form aus, die Sie zeichnen möchten.
2. Klicken Sie auf einen beliebigen Punkt auf der Leinwand und ziehen Sie den Cursor, um mit dem Erstellen der Form zu beginnen.

So fügen Sie benutzerdefinierte Formen hinzu

Sie können das benutzerdefinierte Formwerkzeug verwenden, um Ihre eigene Form zu erstellen.

1. Wählen Sie im linken Bereich die aus Stift Symbol.
2. Klicken Sie irgendwo auf die Leinwand, um Ihren ersten Punkt oder "Ecke" für die Form hinzuzufügen. Klicken Sie für jeden Punkt der Form auf der Leinwand auf den Bereich, in dem Sie ihn haben möchten.
3. Wenn Sie mit dem Erstellen der Form fertig sind, drücken Sie die Esc Taste auf Ihrer Tastatur.

So ändern Sie die Farbe einer Form

Sie können die Farbe der Form im rechten Bereich ändern.

1. Markieren Sie die Form.
2. Ändern Sie im rechten Bereich die Fkrank.
3. Darüber hinaus können Sie auf die gleiche Weise wie bei Bildern Ränder und Unschärfeeffekte hinzufügen und die Deckkraft der Form ändern.

So fügen Sie Text hinzu

Du kannst auch Text hinzufügen und bearbeiten auf die gleiche Weise, wie Sie Formen hinzufügen.

1. Klick auf das Text Symbol im linken Bereich.
2. Klicken Sie auf eine beliebige Stelle auf der Leinwand, um ein neues Textfeld hinzuzufügen. Geben Sie Ihren gewünschten Text in das Textfeld ein.
3. Verwenden Sie den rechten Bereich, um die zu bearbeiten Größe, Schriftfamilie, und Ausrichtung Felder.

So erstellen Sie Komponenten

Eine Komponente ist eine Gruppe von Designelementen, die wiederverwendet werden können. Um eine Komponente zu erstellen und zu verwenden, benötigen Sie zunächst eine Gruppe von Formen oder anderen Designobjekten.

1. Markieren Sie die Gruppe von Formen auf der Leinwand. Klicken Sie mit der rechten Maustaste auf die Gruppe und wählen Sie sie aus Komponente machen.
2. Klicken Sie unten im linken Bereich auf Vermögenswerte. Ein neues Menü wird geöffnet, in dem alle Assets aufgeführt sind, die Sie haben, einschließlich der Komponente, die Sie gerade hinzugefügt haben.
3. Klicken Sie auf die Komponente und ziehen Sie sie aus der Liste der Komponenten auf die Leinwand. Dadurch wird genau dieselbe Gruppe von Elementen erstellt.

So exportieren Sie Artikel

Sie können sowohl einzelne Elemente als auch die gesamte Seite exportieren.

1. Wenn Sie ein einzelnes Element exportieren möchten, markieren Sie das zu exportierende Element.
2. Klick auf das Hamburger Menüsymbol oben in der linken Spalte.
3. Auswählen Export, dann klicken Sie auf Ausgewählt.
4. Wenn Sie die gesamte Seite (oder alle Seiten) exportieren möchten, wählen Sie Alle Zeichenflächen stattdessen.
5. Sie können das Dateiformat (PNG, JPG, SVG oder PDF), den Zweck des exportierten Elements (z. B. Web oder iOS) und den Speicherort Ihrer Datei angeben.

Machen Sie sich mit Adobe XD vertraut

Dies sind nur die Grundlagen. Einige andere Funktionen umfassen die Möglichkeit, Hyperlinks, Symbole, App-Integrationen und UI-Kits hinzuzufügen. Adobe XD bringt auch hin und wieder neue Funktionen heraus, um die Erstellung Ihrer Mockups und benutzerdefinierten UI-Designs zu verbessern und zu rationalisieren.

Es sind mehrere Online-Kurse verfügbar, mit denen Sie Ihre neuen Designfähigkeiten auf die nächste Stufe bringen können.

Diese Adobe-Kurse machen Sie zu einem Creative Cloud-Meister

Lesen Sie weiter

Über den Autor