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.

High resolution panoramas of cityscapes along bodies of water displayed in Adobe Stock

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.

High resolution panorama of cityscape along a body of water is imported into XD.

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.

The XD artboard is duplicated and resized to display additional text and navigation. The Manhattan cityscape is magnified.

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.

The XD Prototype workspace is used to animate buttons on the Tour & Co website displaying the Manhattan cityscape.

The final result

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

The Tour & Co website prototype displays the Manhattan cityscape with navigation buttons for tour options.

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

Adobe logo

Sign in to your account