Quickly create an interactive photo within your website prototype with Adobe Stock and XD.

Find a hi-res city panoramic photo

Search Adobe Stock for a large, panoramic photo of a city with enough resolution to support magnification. Save the image to your Creative Cloud Library so you can access it from within XD.

interactive-images-step1_900x506

Place the hi-res photo into an XD artboard

Import the panoramic photo into the home artboard in XD. Size and position the photo to show the widest angle possible within the layout.

interactive-images-step2_900x506

Duplicate and resize the layout in XD

Duplicate the artboard in XD and show additional layers, including text, labels, and changes to the navigation buttons. Then, resize and reposition the city photo to show a magnified area that relates to the area of interest.

interactive-images-step3_900x506

Create an animated transition in XD

Switch to the Prototype workspace in XD, and select the Battery Park button on the home artboard. Add a link from the selected button to the second artboard and set the transition action to Auto-Animate. Set the duration to 2.5 seconds in the link properties panel, then click outside the panel to apply the changes.

Click the Preview link button in the top-right of the XD window to interact with your design.

interactive-images-step4_900x506

The final result

Your prototype is now ready to preview and share with team members across platforms.

interactive-images-step5_900x506

Check out this curated collection from Adobe Stock with more images that you can use in your next project.

09/16/2019
Was this page helpful?