App screenshot guide
How to Create App Store Screenshots: Step-by-Step
A repeatable eight-step workflow for turning clean app captures into a coherent App Store and Google Play screenshot set.
Capture current app UI, outline one message for each screenshot, design a consistent set around the first three assets, adapt it to exact Apple and valid Google dimensions, then validate format, alpha data, order, and claims before upload. Do not stretch one store’s finished image into the other store’s ratio.
What to prepare before designing
- Three to eight clean app captures showing the core workflow.
- A one-sentence audience and product promise.
- The top three benefits in priority order.
- Approved product claims and safe demonstration data.
- App icon, brand colors, and a readable display font.
- The device families and stores included in this release.
Start from the user story, not from decoration. A beautiful composition cannot repair a screenshot order that hides the main value until frame five.
The eight-step workflow
Capture clean source screens
Use current production-like UI, safe test data, and a consistent device/orientation. Remove debug overlays and private information.
Plan the first three messages
Lead with the primary outcome, prove it with real UI, then show the strongest differentiator. Keep one message per screenshot.
Choose a visual system
Set a repeatable type scale, background, device treatment, spacing, and caption position before laying out every screen.
Compose the master set
Place the source screenshot, add a benefit-led caption, check crop and contrast, then repeat the same visual grammar across the story.
Adapt Apple and Google outputs
Use exact Apple display-slot dimensions. Reflow the Google set into a valid 9:16 or 16:9 canvas instead of stretching the Apple asset.
Review at thumbnail size
Make the first-frame promise and key UI legible at the small size used in search and recommendation surfaces.
Validate files
Check dimensions, format, alpha data, orientation, claims, and the number and order of screenshots.
Export and upload
Use predictable filenames, keep the exported sets separate, then upload to App Store Connect and Play Console.
Plan the first three screenshots first
Write a three-line storyboard before opening the editor. A useful default is outcome → UI proof → differentiator.
State the clearest user benefit in language that can be read quickly.
Show the key interface or workflow that delivers the promise.
Surface the strongest reason to choose this app over the familiar alternative.
Use later frames for secondary jobs, features, trust details, integrations, or a closing action. The sequence should still make sense if someone sees only the first three.
Write benefit-led captions
Describe what changes for the user, then let the interface prove it. “Plan your week in minutes” is easier to understand than “Advanced calendar module.” Keep each caption short enough to remain readable in a small store thumbnail.
| Weak caption | Stronger direction | Why |
|---|---|---|
| Smart dashboard | See every project at a glance | Names a useful outcome |
| Powerful analytics | Know what changed this week | Specific job, less empty superlative |
| Easy sharing | Send a review link in one tap | Connects action and result |
Adapt the design for App Store and Google Play
Apple maps screenshots to exact display slots. Google accepts a dimension range, but the common recommended phone canvas is 1080 × 1920 portrait or 1920 × 1080 landscape. Their aspect ratios differ from a 1320 × 2868 iPhone screenshot.
Keep the message, hierarchy, color system, and UI focal point connected; let the canvas, crop, scale, and spacing vary by store. This is a reflow—not a stretch. Review both outputs independently.
Example: five raw screens to two store-ready sets
- Home/dashboard: lead with the primary outcome.
- Core action: show how the user completes the main job.
- Distinctive feature: demonstrate what makes the workflow different.
- Supporting view: show progress, reporting, collaboration, or control.
- Closing proof: use a trustworthy secondary benefit or a clear final state.
Build the five-screen narrative once, then review the Apple and Google versions side by side. If a frame is too dense after the ratio changes, reduce decoration or shorten the caption; do not hide important UI behind a device frame.
Use a predictable export structure
release-1.4/
├── app-store/
│ ├── 01-primary-outcome.png
│ ├── 02-core-workflow.png
│ └── 03-key-difference.png
└── google-play/
├── 01-primary-outcome.png
├── 02-core-workflow.png
└── 03-key-difference.pngKeep the same semantic order across stores. Version the enclosing folder so that a later release does not overwrite the previously approved assets.
Pre-publish checklist
- The first screenshot communicates the main user outcome.
- Every screenshot shows relevant, current product UI.
- Captions use one message each and remain readable at thumbnail size.
- Claims are accurate for the current release.
- Apple exports match exact accepted dimensions.
- Google exports pass dimension and ratio rules.
- PNG files contain no alpha channel or transparency.
- Filenames preserve the intended order.
- No private, production, or debug data appears in the UI.
Official sources
Specifications can change. We review these pages monthly and update the visible verification date only after checking the source material.