How to Create a Cross-Screen Panorama Across App Store Screenshots

TL;DR

A project is one wide band of pages. Place a background, shape or device across page boundaries and AppShots slices every page at export so seams line up perfectly. Keep headline text inside a single page so a seam never cuts a word.

The problem

Most App Store listings are five separate images in a row, and so are your competitors’. The ones that stand out use one continuous design that flows from screen to screen as users swipe: a line, a glow or a device that crosses the gap. Building it by hand means designing a very wide canvas, cutting it into exact slices and hoping every seam lines up to the pixel. A one-pixel error shows as a seam, and looks like a mistake.

How AppShots makes it easy

Every project is a band of pages laid out left to right. Anything you place can sit on one page or cross the boundary into the next. The background can be one gradient that runs across the whole band. When you export, each page is rendered as its own image at its exact size, so the seams match by construction.

Steps

  1. Create a project and set the number of pages (1 to 10) for the device you’re targeting.
  2. Set a background gradient that spans the band, or choose a panorama template (classic, tilted panorama, bottom-bleed, or blank).
  3. Place device frames on separate pages, then add a shape, glow or arrow that crosses a seam.
  4. Add headlines, each wholly inside one page.
  5. Export and look at the images side by side.

Rules of thumb

  • No words across a seam. Users see one screenshot at a time at first, and a split word looks broken.
  • Let decoration cross, not content. Backgrounds, lines and glows are ideal. A device can cross only if you want it cut in half in the first view.
  • Plan the number of pages first. The store shows the first few without scrolling, so make the first two or three strong on their own.
  • Check on a phone-sized preview. Zoom out in the editor to see the band at thumbnail scale.

Memory

With 8 to 10 large pages, export renders at full resolution and can briefly use a lot of memory. Close other heavy apps if it stutters.

FAQ

How many pages can a panorama have? From 1 to 10.

How do I keep the slices aligned? You don’t have to. You design on one continuous band and AppShots slices it at export.

Is there a panorama template? Yes. There are panorama templates, including a tilted one, in the template picker.

The app AppShots →