Benutzerhandbuch Abbrechen

Perspektivisches Design mit 3D-Transformationen

Suchen Sie nach Informationen zur Simulation von 3D-Effekten bei der Erstellung ansprechender und interaktiver Erlebnisse in Adobe XD? Dann sind Sie hier genau richtig.

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.

Arbeiten mit 3D-Transformationen
Mit 3D-Transformationen erstellte Spiegelungs-Interaktion

Vorbereitung

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 BildlaufgruppenWiederholungsrasterStapelInnenabstä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“ .

3D-Transformationen aktivieren

Gizmo-Symbol verschieben

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. 

Objekt um die x-Achse drehen

Objekt um die x-Achse drehen

Positioniert das ausgewählte Objekt entlang der horizontalen y-Achse.

Objekt um die y-Achse drehen

Objekt um die y-Achse drehen

Positioniert das ausgewählte Objekt entlang der vertikalen Y-Achse.

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.

Objekt entlang der z-Achse verschieben

  1. Wählen Sie das erforderliche Objekt aus.
  2. Führen Sie den Mauszeiger über den Mittelpunkt des Gizmo-Symbols .
  3. Ein Ankersymbol  wird eingeblendet und Sie können das ausgewählte Objekt nach oben oder unten verschieben.

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?

Fragen Sie die Community

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.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?