Erstelle mit Adobe Stock und Adobe XD ein interaktives Foto für deinen Website-Prototyp.

Ein hochauflösendes Panoramafoto finden.

Suche in Adobe Stock nach einer großen Panoramaaufnahme einer Stadt. Das Bild sollte eine ausreichend hohe Auflösung haben, um vergrößert werden zu können. Speichere das Bild in deiner Creative Cloud-Bibliothek, sodass du von XD aus darauf zugreifen kannst.

Hochauflösende Panoramaaufnahmen in Adobe Stock von Städten am Wasser.

Das Foto auf einer XD-Zeichenfläche platzieren.

Importiere das Panoramafoto in XD. Lege es auf der Home-Zeichenfläche ab. Passe Größe und Position so an, dass der größtmögliche Ausschnitt sichtbar ist.

Hochauflösende Panoramaaufnahme einer Stadt am Wasser wird in XD importiert.

Das Layout in XD duplizieren und die Größe ändern.

Dupliziere die Zeichenfläche in XD. Blende weitere Ebenen ein, z. B. Text, Beschriftungen und Statusänderungen der Navigations-Buttons. Definiere dann Größe und Position der Stadtansicht so, dass sie jeweils eine Detailansicht des gewählten Bereichs zeigt.

XD-Zeichenfläche wird dupliziert und skaliert, um zusätzlichen Text und die Navigation anzuzeigen. Vergrößerte Manhattan-Ansicht.

Einen animierten Übergang erstellen.

Wechsle in XD in den Prototyp-Modus. Wähle auf der Home-Zeichenfläche den Button „Battery Park“. Füge eine Verknüpfung vom gewählten Button zur zweiten Zeichenfläche hinzu. Setze die Übergangsaktion auf „Auto-Animate“. Lege die Dauer auf 2,5 Sekunden fest. Klicke dann außerhalb des Bedienfelds, um die Änderungen anzuwenden.

Klicke auf den Vorschau-Button rechts oben im XD-Fenster, um die Interaktivität zu prüfen.

Im Prototyp-Modus von XD werden Buttons der Website „Tour & Co“ animiert, die die Ansicht von Manhattan zeigt.

Das Ergebnis.

Der Prototyp kann jetzt in einer Vorschau angezeigt und an Team-Mitglieder weitergegeben werden, unabhängig von der verwendeten Plattform.

Der Prototyp der Website „Tour & Co“ mit der Stadtansicht von Manhattan und Buttons für verschiedene Touren.

Für dein nächstes Projekt könnte es sich lohnen, auch in dieser kuratierten Sammlung von Adobe Stock nach geeigneten Elementen zu suchen.

 Adobe

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX 2024

Adobe MAX
Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online

Adobe MAX

Die Konferenz für Kreative

14. bis 16. Oktober in Miami Beach und online