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.
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.
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.
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.
Das Ergebnis.
Der Prototyp kann jetzt in einer Vorschau angezeigt und an Team-Mitglieder weitergegeben werden, unabhängig von der verwendeten Plattform.
Für dein nächstes Projekt könnte es sich lohnen, auch in dieser kuratierten Sammlung von Adobe Stock nach geeigneten Elementen zu suchen.
