This tutorial takes you from real app captures to a checked screenshot export. Plan a sequence, choose a layout, write captions and review the result for each store and supported device. The time needed depends on your starting assets and review needs.
Start with one campaign in the screenshot editor. Manual editing and export of Free templates require a free account. Pro collections need eligible access; AI generation and translation use the displayed token costs.
AppDrift is also previewing Ari, its AI assistant for app store work. The screenshot workflow starts with a template or AI campaign, then your actual app captures, before review in the editor. Chat is currently in admin preview; you can use the screenshot editor directly.
Step 1: Choose the store and device sizes
Check the requirements before arranging the artwork. Apple and Google define different dimensions, formats and device families. A phone screenshot does not automatically meet a tablet or watch requirement.
Use the current Apple screenshot specifications for accepted sizes and fallback rules. Its 6.9-inch family accepts several dimensions; an iPhone app needs 6.5-inch screenshots when 6.9-inch screenshots are not provided. iPad screenshots are required when the app runs on iPad.
Google's preview-asset rules cover phones, tablets and other form factors separately. Distinguish the files required to publish from recommendations for promotional placements.
The screenshot sizes reference helps you choose a canvas. Check the exported file too: dimensions alone will not reveal stretched artwork, clipped text or an outdated interface.
Step 2: Capture the app and plan the sequence
Use the current app on the intended device or simulator. Choose screens that show the main task and its result. Remove private customer information. Label fictional balances, projects or scores as sample data where they could be mistaken for real results.
Lay out the captures before designing. Each image should answer a different question. A shared-shopping app might show the finished list, adding an item, sharing with a household and checking items off. This is an illustrative sequence, not a tested conversion formula.
- Start with the main result. Show what the app helps someone do.
- Explain the important steps. Choose the screens needed to understand how it works.
- Show a useful difference. Demonstrate a relevant feature you have not already explained.
- Answer a remaining question. Add a screen only when it contributes something useful.
The AI screenshot generator can draft a sequence from your brief and screen notes. A successful 3–8-screen campaign costs five tokens. Review the order and captions, then edit the text, devices and shapes. Your app captures remain replaceable images.
For a later release, paid batch screenshot refresh can map new captures to image layers while preserving the layout. Review replacements and update separate Zoom detail layers yourself. Use private client reviews when someone else needs to check the campaign.
Step 3: Choose a layout that suits the task
A budgeting screen needs readable figures and an explanation of what they mean. A game needs actual gameplay. A notes app might show how a rough idea becomes an organized page. The task should guide the presentation.
Category examples can help you explore a direction, but there is no rule that every finance app needs blue or every wellness app needs soft gradients. Keep the app recognizable and its important details easy to see.
Try one capture, one short caption and enough space around both. Add a device frame when it helps explain the experience. Leave it out when the frame makes the useful part of the capture too small.
Match the orientation to the way people use the app. Inspect the store presentation, since orientation and preview videos can affect which images appear first. The screenshot design guide explains these choices.
Step 4: Make the message readable at phone size
Image Source: Adapty
Visual hierarchy gives the reader a clear order: the main message first, the matching app screen next and supporting details after that. You create it with size, contrast and spacing.
- Write one useful caption. “Share your grocery list” explains a task more clearly than “Powerful collaboration.”
- Keep the interface readable. A large headline should not force the product into a tiny corner.
- Use clear contrast. Put important text against a quiet area of the background and check the small version.
- Leave space. Captions, phones and decorative shapes should not crowd one another.
Start with a few type sizes. If the caption and every detail are equally large or bright, nothing leads the eye. The Nielsen Norman Group guide explains this principle.
Read the captions without the design. They should describe what the app can do today. Avoid unsupported speed claims and explain payment or setup requirements when they affect the promise. Then check the gallery at a realistic display size.
Step 5: Keep the campaign consistent
Use a small shared palette, compatible type and consistent spacing. The screenshots should feel related to the icon and the app itself. That does not require every screen to have the same layout.
Check that your font supports each target language. A caption becomes part of a flat exported image, so it will not resize with the viewer's system text setting. Make the export readable on its own.
Apple's branding guidance can inform the wider identity. Its marketing badge rules apply to external materials; do not assume a store badge belongs inside a screenshot.
Step 6: Review the promise and language
Ask someone unfamiliar with the app what they expect it to do after seeing the opening images. Their answer can reveal a confusing caption or a feature that the artwork overstates.
Show actual functionality. If you use a testimonial, rating or media mention, verify it, obtain the necessary rights and check whether the store permits it in that asset. You can explain the product well without adding social proof.
For each language, review the caption and interface together. Translated text around an English screen must not imply that another interface language is available. Check line breaks, currencies, dates and names.
A native store experiment can compare a meaningful alternative where traffic and eligibility allow it. Decide what you want to learn before uploading a variant. A rank change after a screenshot update does not isolate the artwork's effect.
Step 7: Inspect every export
Open the actual downloaded files. Check these details before uploading:
- Pixel dimensions, format and any applicable file-size limit.
- Text sharpness, capture quality and device-frame edges.
- Clipped captions, stretched screenshots or missing images.
- Every localized version, including independent detail crops.
- Filenames and screen order.
Keep margins that suit the composition and preview; no universal percentage makes every layout safe. Check each required device family rather than stretching one phone design onto a tablet.
Simulators and physical devices help you capture and review the app at different sizes. TestFlight can help review app builds, but it does not replace checking the store artwork.
Step 8: Upload and verify the public gallery
Remove leftover template text and artwork. Keep raw captures, the editable project and final exports in separate folders so you can find the source of each screen later.
Upload through the store console or an established automation workflow. The screenshot tool comparison distinguishes capture automation from campaign design and upload support.
If you automate Apple uploads, its asset workflow involves reserving an asset, transferring the file and committing the reservation. Check responses and the final asset state. This API upload walkthrough provides background; use current Apple documentation when implementing it.
After review, open the public listing in the intended country and language. Confirm the order, captures and captions. A saved project or successful upload does not mean the gallery is visible yet.
Keep the next update manageable
Save the approved design and the app version it represents. When a feature changes, replace the affected captures, review captions and check translations. You can keep a working visual style while updating the product story.
For the next pass, choose the clearest problem: an unreadable first screen, an outdated feature or a repeated message. Fix it and evaluate the result before redesigning the whole gallery.
Frequently asked questions
How do I start creating app store screenshots?
Capture the current app, identify the main task, choose the target store size and build a coherent gallery. Review claims, language, dimensions and actual exported files before submission.
Do Apple and Google use the same screenshot requirements?
No. Each store defines accepted dimensions, formats and requirements for supported device families. Check the current specifications instead of applying one phone rule to every device.
References
[1] - https://butterkit.app/docs/science-effective-app-store-screenshots/
[2] - https://developer.apple.com/design/human-interface-guidelines/app-icons
[3] - https://www.apptweak.com/en/aso-blog/how-to-optimize-your-app-screenshots
[4] - https://redboxmobile.com/blog/5-tips-for-designing-great-app-store-screenshots-with-examples-2020-09-22/
[5] - https://appradar.com/academy/app-store-listing-visuals
[6] - https://thisisglance.com/learning-center/how-do-i-create-consistent-visual-hierarchy-in-mobile-apps
[7] - https://splitmetrics.com/blog/app-store-screenshots-aso-guide/
[8] - https://www.mobileaction.co/guide/app-screenshot-sizes-and-guidelines-for-the-app-store/
[9] - https://www.linkedin.com/pulse/designing-app-store-screenshots-tell-story-drive-installs-denis-rutoh-8ubjf
[10] - https://www.designmonks.co/blog/app-screenshot-design-examples
[11] - https://thisisglance.com/learning-center/how-do-i-make-the-best-app-screenshots-for-the-store
[12] - https://asomobile.net/en/blog/screenshots-for-app-store-and-google-play-in-2025-a-complete-guide/
[13] - https://blog.appmysite.com/mobile-app-ui-the-art-of-balancing-graphics-and-text/
[14] - https://www.appsflyer.com/blog/tips-strategy/app-store-screenshots/
[15] - https://www.interaction-design.org/literature/topics/visual-hierarchy
[16] - https://www.nngroup.com/articles/visual-hierarchy-ux-definition/
[17] - https://reteno.com/blog/a-guide-to-mobile-app-branding-actionable-tips-strategies-and-examples
[18] - https://developer.apple.com/design/human-interface-guidelines/branding
[19] - https://developer.apple.com/app-store/marketing/guidelines/
[20] - https://www.apptweak.com/en/aso-blog/app-screenshot-icon-video-guidelines-ios-gp
[21] - https://smadex.com/best-practices-for-app-creative-by-apptweak/
[22] - https://radaso.com/blog/how-to-boost-mobile-app-rankings-using-app-rating-prompts
[23] - https://www.apptweak.com/en/aso-blog/app-store-reviews
[24] - https://www.teleprompter.com/blog/visual-social-proof
[25] - https://screenshotwhale.com/blog/app-store-images
[26] - https://appfillip.com/blog/app-store-screenshot-best-practices
[27] - https://thisisglance.com/learning-center/how-do-you-test-apps-on-different-devices-and-operating-systems
[28] - https://appscreens.com/
[29] - https://theapplaunchpad.com/
[30] - https://point.co/how-to-optimize-ios-apps-for-multiple-screen-sizes-and-resolutions/
[31] - https://passion.io/blog/15-point-app-store-submission-checklist-that-gets-passion-io-apps-approved-fast
[32] - https://screenshotwhale.com/blog/app-store-screenshot-requirements
[33] - https://alconost.medium.com/manage-app-screenshot-95741a51be6b
[34] - http://tisunov.github.io/2015/11/06/automating-app-store-screenshots-generation-with-fastlane-snapshot-and-sketch.html
[35] - https://www.runway.team/blog/how-to-upload-assets-using-the-app-store-connect-api
