How to Make an iPhone Duo Folding Mockup With Two Screens

The Duo mockup has two image slots: one wide image across the open display and one portrait image on the outer cover. Replace the second image from Media → 2 screens → Replace outer cover. You do not need to add a second device to the canvas. Open the White Folding Tour template. This guide uses Screenhance’s standard yellow tablet and pink phone demo artwork, so you can tell which screen you are editing before adding your own images.

Find both screen controls

The Media panel groups the images under 2 screens. Each has its own thumbnail, Replace button and Crop button. You can also use Edit 2 screens on the canvas to return to these controls.

The included template already contains both demo images. Replace both if you want the full animation to show your product. When a design has only one source image, the cover can reuse it, but a purpose-made portrait capture gives you control over what appears there.

Replace the open display

Choose Replace open display and upload the wide screenshot. Keep the two halves in one source image: the renderer divides that image across the hinged display. Two unrelated portrait screenshots are not a substitute for one expanded interface.

Use a clear product state with fictional data. If the image’s shape differs from the display, the crop dialog opens so you can choose what remains visible. Otherwise, use Crop beneath Open display whenever you want to adjust it.

Replace the second screenshot

Choose Replace outer cover in the same panel. Upload the portrait version of the product, then inspect the separate cover thumbnail. Changing the cover keeps the open display’s source and crop intact.

A useful pair shows the same task at two sizes: a compact overview outside and the expanded workspace inside. The mockup supplies the folding hardware motion; it does not invent responsive versions of your interface. Capture those states from your product first.

Crop each screen independently

Click Crop outer cover to adjust the portrait screen, or Crop open display for the wide screen. Drag the crop area or its handles to keep the important part of the image, then choose Apply Crop. The crop shape is locked to the selected screen, which keeps the result from stretching.

Check a headline, navigation label and important button after cropping. If they cannot all fit, simplify the source screen rather than squeezing the whole interface into the frame. Preparing a better screenshot usually helps more than adding decoration.

The inner and outer crops remain separate throughout the folding tour. Applying a crop is not the same as changing the dimensions of the entire exported composition.

Preview the complete fold

Keep Folding tour switched on. The device animation offers 4, 6, 8 or 12 seconds; the template starts at 8 seconds. Watch the full cycle, including the cover, hinge, open display and back. A crop can look good in a still and become too small when the camera turns.

The lightweight gallery preview above is five seconds long. The editor’s authored duration controls your final export. See the motion help guide for device motion and composition motion settings.

Export the animation and a useful still

Choose Export → Video for a website or a destination that accepts video. Use GIF when the destination specifically needs an animated image. Animated exports require Pro. Compare the actual files in our GIF versus MP4 test before choosing a format for a large page or campaign.

Keep a separate still that already shows the product clearly. The open-display still template is a useful starting point; replace its demo image with the same source and review the crop. A still version makes the message available before playback and when someone prefers reduced motion.

For an App Store submission, use Apple’s accepted screenshot dimensions for the selected display. A 1200 × 900 marketing animation is not an App Store screenshot set. The current App Store dimensions guide lists the Duo’s separate inner and outer sizes.

Before you publish

Watch the exported file once from beginning to end. Confirm that both demo images have been replaced, the cover is upright, the inner interface spans the open display as intended, and the smallest important text still reads at the intended display size.

Browse the animated mockup generator for related iPhone, laptop and tablet moves, or return to the Duo folding template.