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.

interactive-images-step1_900x506

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.

interactive-images-step2_900x506

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.

interactive-images-step3_900x506

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.

interactive-images-step4_900x506

Das Ergebnis.

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

interactive-images-step5_900x506

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

05/10/2019
War diese Seite hilfreich?