Perspektivisches Design mit 3D-Transformationen

Durch 3D-Transformationen können Sie mit minimalem Aufwand Objekttiefe und Perspektive in Ihren Designs simulieren. Du kannst jedes Objekt entlang seiner horizontalen und vertikalen Achse drehen und entlang der Z-Achse Tiefe anwenden. Dadurch ist es dir möglich, visuelle Effekte nachzuahmen, darunter 3D-Animationen, perspektivische Modelle und das Aufdecken von Karten.

Vergewissern Sie sich, dass Sie mit den Workflows im Design- und Prototypmodus in XD und mit den folgenden Einschränkungen vertraut sind.

Objekttiefe und Perspektive simulieren

Sie können 3D-Transformationen auf komplexe Kompositionen wie Bildlaufgruppen, Wiederholungsraster, Stapel, Innenabstände anwenden. Bei aktivierten 3D-Transformationen können Sie die Ausrichtung von Objekten entlang der x- und y-Achse steuern und entlang der z-Achse Tiefe anwenden.

Um einen 3D-Effekt zu simulieren, müssen Sie zunächst im Eigenschafteninspektor 3D-Transformationen aktivieren, dann über das Gizmo-Symbol   die Ausrichtung optimieren und schließlich auf die Design-Objekte Tiefe anwenden.

3D-Transformationen aktivieren

Wenn du 3D-Transformationen aktivieren möchtest, wähle das gewünschte Objekt aus und klicke im Eigenschafteninspektor auf das Symbol „3D-Transformationen“ .

Im Bereich Transformieren werden neue Objektsteuerelemente angezeigt und in der Mitte des ausgewählten Objekts ist das Gizmo-Symbol  sichtbar. Das Symbol  können Sie nach links, rechts, oben oder unten verschieben. 
Und wenn Sie die Achsenwerte im Eigenschafteninspektor ändern oder das Gizmo-Symbol  drehen, wird das Objekt entlang der Achse gedreht.

Objekte entlang der x- oder y-Achse drehen

Nachdem Sie im Eigenschafteninspektor das Symbol „3D-Transformationen“  aktiviert haben, können Sie die Objektausrichtung entlang der x- und y-Achse folgendermaßen anpassen:

1. Wählen Sie das zu drehende Objekt aus. 
2. Geben Sie im Eigenschafteninspektor die Ausrichtungswerte ein oder klicken Sie auf das Gizmo-Symbol , das in der Mitte des Objekts angezeigt wird, und ziehen Sie.
3. Achten Sie beim Anpassen der Werte darauf, dass die Drehung der Objekte entlang der entsprechenden Achse beginnt. 

Tiefe entlang der z-Achse anwenden

Nachdem Sie nun gelernt haben, wie Sie 3D-Transformationen aktivieren und Objekte entlang der x- und y-Achse drehen können, erkunden Sie als Nächstes, wie Sie die dritte Dimension – die z-Achse – verwenden können. 

Beim perspektivischen Entwerfen eines Kartenstapels oder beim Erstellen von Interaktionen zum Aufdecken von Karten können Sie Objekte auf der z-Achse verschieben, um der Ebene Tiefe zu verleihen. In der nachfolgenden animierten Illustration sehen Sie, wie Sie Tiefe entlang der z-Achse anwenden können.

Worauf Sie achten sollten

• Das Symbol „3D-Transformationen“  blendet nur die Steuerelemente und das Gizmo-Symbol ein bzw. aus. Du kannst damit keine 3D-Umgebung erstellen oder bereits in deinem Design angewandte Transformationen deaktivieren.
  

• Wenn Sie die Größe von Objekten mit x- oder y-Drehung ändern, ändert sich auch der z-Tiefenwert automatisch, was zu einer Neuanordnung der Inhalte führen kann. Wenn Sie beispielsweise eine Gruppe von Karten perspektivisch designen, dreht sich jede Karte im gleichen Winkel, aber mit unterschiedlicher Tiefe. Wenn Sie von diesen Karten mehrere auswählen und ihre Größe ändern, wird die Größe nach Bedarf angepasst. Der z-Wert ändert sich jedoch für jede Karte und führt zu einer Neuanordnung der Inhalte.

• Wenn Sie den z-Tiefenwert für ein Objekt ändern, unterstützt XD keine Methoden zur Ebenenanordnung wie In den Vordergrund, In den Hintergrund bzw. zur Neuanordnung aus dem Ebenenbedienfeld.

Video: Wie arbeite ich mit 3D-Transformationen in XD?

„Mit 3D-Transformationen in Adobe XD können Sie Objekttiefe und Perspektive mit nur wenigen Klicks auf der Design-Arbeitsfläche simulieren“ – Dani Beaumont, Principal Product Manager, Adobe XD.

Das folgende Video zeigt, wie Sie in XD mit 3D-Transformationen arbeiten.

Dauer: 3 Minuten

Tipps und Tricks

Da Sie nun wissen, wie Sie mit 3D-Transformationen in XD arbeiten können, hier einige praktische Tipps und Tricks:

• Sie können das Objekt jederzeit schnell wieder auf seinen 2D-Zustand zurücksetzen. Klicken Sie mit der rechten Maustaste auf das ausgewählte Objekt und wählen Sie die Option 3D-Transformationen zurücksetzen. Sie können auch ⌥ ⌘ T auf macOS und Alt + Strg + T auf Windows verwenden, um 3D-Transformationen zurückzusetzen.
  
• Sie können die Steuerelemente für 3D-Transformationen ein- oder ausblenden. Verwenden Sie ⌘ T auf macOS und Strg+T auf Windows, um 3D-Transformationen ein- oder auszublenden.

Wie geht’s weiter?

Jetzt haben Sie die Grundlagen der Aktivierung und Verwendung von 3D-Transformationen in Ihren Designs kennengelernt. Lernen Sie als Nächstes, wie Sie sie animieren und für Designer oder Stakeholder freigeben, um Feedback einzuholen.

Noch Fragen oder Ideen?