Erstellen Sie mit Adobe Stock und Adobe XD ein interaktives Foto für Ihren Website-Prototyp.
Hochauflösendes Panoramafoto finden.
Durchsuchen Sie Adobe Stock nach einem großen Panoramafoto einer Stadt mit hoher Auflösung, das sich vergrößern lässt. Speichern Sie das Bild in einer Creative Cloud-Bibliothek, sodass Sie von XD aus darauf zugreifen können.
Hochauflösendes Foto in XD auf einer Zeichenfläche platzieren.
Importieren Sie das Panoramafoto in XD. Legen Sie es auf Ihrer Home-Zeichenfläche ab. Passen Sie Größe und Position so an, dass der größtmögliche Ausschnitt sichtbar ist.
Layout in XD duplizieren und Größe ändern.
Duplizieren Sie die Zeichenfläche in XD, und blenden Sie weitere Ebenen ein, z. B. Text, Beschriftungen und Statusänderungen der Navigations-Buttons. Definieren Sie dann Größe und Position der Stadtansicht so, dass sie jeweils eine Detailansicht des gewählten Bereichs zeigt.
Animierten Übergang erstellen.
Wechseln Sie in XD in den Prototyp-Modus, und wählen Sie auf der Home-Zeichenfläche den Button „Battery Park“. Fügen Sie eine Verknüpfung vom gewählten Button zur zweiten Zeichenfläche hinzu, und setzen Sie die Übergangsaktion auf „Auto-Animate“. Legen Sie die Dauer auf 2,5 Sekunden fest. Klicken Sie dann außerhalb des Bedienfelds, um die Änderungen anzuwenden.
Klicken Sie 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 Ihr nächstes Projekt könnte es sich lohnen, auch in dieser kuratierten Sammlung von Adobe Stock nach geeigneten Elementen zu suchen.
