Quick answer
Capture a clean screenshot, drop it into a device frame, put it on a plain background, and add one short caption. A browser tool does all four steps. A free desktop editor or presentation software does the same job more slowly.
The short answer
> Quick answer: A store mockup is four things. A clean screenshot, a device frame, a plain background and one short caption. None of them need Photoshop.
People assume the barrier is the tool. It isn't. The barrier is knowing what the finished image has to contain. Once you know that, the tool becomes a detail. I ran the same screenshot through three free routes to write this, and the output was close enough that nobody would pick the expensive one out of a lineup.
People assume the barrier is the tool. It isn't. The barrier is knowing what the finished image has to contain. Once you know that, the tool becomes a detail. I ran the same screenshot through three free routes to write this, and the output was close enough that nobody would pick the expensive one out of a lineup.
What a mockup actually has to do
Your screenshot has one job on a store listing. It has to make somebody scroll to the second one.
That's it. No feature tour. No architecture diagram.
So the finished image needs a readable promise at the top, a real screen underneath it, and enough contrast to survive a small thumbnail. Everything else is decoration. Most of the design tools people reach for are built for the decoration, not for the promise. Judge every draft against that one question. Does it earn the next swipe.
That's it. No feature tour. No architecture diagram.
So the finished image needs a readable promise at the top, a real screen underneath it, and enough contrast to survive a small thumbnail. Everything else is decoration. Most of the design tools people reach for are built for the decoration, not for the promise. Judge every draft against that one question. Does it earn the next swipe.
Step one: capture a clean screen
Start with the screenshot, not the layout. A weak screen inside a beautiful frame is still a weak screen.
Use real content. Not "Lorem ipsum". Not "Test User 1".
Fill the app with the data a happy user would have. A to do list with three finished items reads better than an empty state. Our guide on capturing clean screenshots covers the setup, including how to get the emulator to behave.
Use real content. Not "Lorem ipsum". Not "Test User 1".
Fill the app with the data a happy user would have. A to do list with three finished items reads better than an empty state. Our guide on capturing clean screenshots covers the setup, including how to get the emulator to behave.
Turn off the clutter first
The status bar gives you away. A half empty battery, 3 percent signal and eleven notification icons all say this is somebody's actual phone.
Set the time to something neutral. Clear the notification shade. Get the battery high.
Android has a demo mode for exactly this. On iPhone the simulator gives you a clean bar by default. Either way, look at the top 40 pixels before you export, because that strip is what makes a screenshot look amateur. A single stray notification icon can undo an otherwise careful set of five images.
Set the time to something neutral. Clear the notification shade. Get the battery high.
Android has a demo mode for exactly this. On iPhone the simulator gives you a clean bar by default. Either way, look at the top 40 pixels before you export, because that strip is what makes a screenshot look amateur. A single stray notification icon can undo an otherwise careful set of five images.
Step two: put it in a frame
A raw screenshot floating on white reads as unfinished. A device frame tells the eye what it's looking at instantly.
Match the frame to the device. A tall modern phone body around a short old screenshot looks stretched, and people notice without knowing why.
Our post on device frames goes through the matching. The frame library here covers the common phone and tablet shapes without a download.
Match the frame to the device. A tall modern phone body around a short old screenshot looks stretched, and people notice without knowing why.
Our post on device frames goes through the matching. The frame library here covers the common phone and tablet shapes without a download.
Step three: the background
Backgrounds go wrong in one direction. Too busy.
One flat color works. A two color gradient works. A photograph behind a phone almost never works, because the screenshot then competes with a second image.
Pick a color from your app, then lighten or darken it until the frame separates cleanly. I compared a dozen listings and the ones that read fastest at thumbnail size all used a single flat background across every screenshot in the set.
One flat color works. A two color gradient works. A photograph behind a phone almost never works, because the screenshot then competes with a second image.
Pick a color from your app, then lighten or darken it until the frame separates cleanly. I compared a dozen listings and the ones that read fastest at thumbnail size all used a single flat background across every screenshot in the set.
Step four: the caption
One line. Six words or fewer. A benefit, not a feature name.
"Track every expense in seconds" beats "Expense tracking module".
Put it above the phone, not below it. The eye lands at the top of a thumbnail first. And keep it in the same position on every image in the set, because a caption that jumps around forces the reader to hunt for it each time they swipe. Write the caption before you build the image. It stops the layout dictating the words.
"Track every expense in seconds" beats "Expense tracking module".
Put it above the phone, not below it. The eye lands at the top of a thumbnail first. And keep it in the same position on every image in the set, because a caption that jumps around forces the reader to hunt for it each time they swipe. Write the caption before you build the image. It stops the layout dictating the words.
Caption text size is where people fail
This is the single most common mistake I see in store listings. The caption looks fine on a monitor and turns into a gray line on a phone.
The listing thumbnail is roughly a third the width of the real image.
So test at that size. Shrink your export to 33 percent and read it from arm's length. Our post on readable caption sizes has the numbers if you want a starting point rather than a guess.
The listing thumbnail is roughly a third the width of the real image.
So test at that size. Shrink your export to 33 percent and read it from arm's length. Our post on readable caption sizes has the numbers if you want a starting point rather than a guess.
Route one: do it in the browser
The fastest route needs no install at all. Upload the screenshot, choose a frame, set a background, type the caption, export.
That's what this site does, and the whole loop takes about a minute per image.
The advantage isn't only speed. A browser tool keeps the output sizes correct for you, so you can't accidentally export a 900 pixel wide image and discover the store rejects it an hour later.
That's what this site does, and the whole loop takes about a minute per image.
The advantage isn't only speed. A browser tool keeps the output sizes correct for you, so you can't accidentally export a 900 pixel wide image and discover the store rejects it an hour later.
Route two: a free desktop editor
GIMP is free, runs on Windows, macOS and Linux, and does everything Photoshop does for this job.
Set up one file at your target size. Put the frame on its own layer. The screenshot goes underneath it. Your caption sits on top.
Then swap only the screenshot layer for each new image. That template approach is what makes the desktop route bearable. Building each image from scratch is where the hours disappear. Save the template file somewhere you will find it again in six months, because you will need it for the next release.
Set up one file at your target size. Put the frame on its own layer. The screenshot goes underneath it. Your caption sits on top.
Then swap only the screenshot layer for each new image. That template approach is what makes the desktop route bearable. Building each image from scratch is where the hours disappear. Save the template file somewhere you will find it again in six months, because you will need it for the next release.
Route three: presentation software
This one surprises people. Slides and Keynote both let you set a custom canvas size, and both export PNG.
Set the slide size to your screenshot dimensions. One slide per store image.
You get alignment guides, text handling and duplication for free, which is most of what you need. The export quality is fine for a store listing. I opened an old deck and rebuilt a five image set this way in about fifteen minutes.
Set the slide size to your screenshot dimensions. One slide per store image.
You get alignment guides, text handling and duplication for free, which is most of what you need. The export quality is fine for a store listing. I opened an old deck and rebuilt a five image set this way in about fifteen minutes.
What the stores need out the other end
Play takes JPEG or 24 bit PNG with no alpha channel. Each side has to be at least 320 pixels and no more than 3840 pixels. You need at least two images.
Apple takes .jpg, .jpeg or .png, also with no alpha or transparency, and allows one to ten screenshots per localization.
Alpha channels are the quiet failure here. Export flat, always. Check the exported file in a viewer rather than trusting the editor preview, since some tools keep transparency invisibly.
Apple takes .jpg, .jpeg or .png, also with no alpha or transparency, and allows one to ten screenshots per localization.
Alpha channels are the quiet failure here. Export flat, always. Check the exported file in a viewer rather than trusting the editor preview, since some tools keep transparency invisibly.
Batch, don't repeat
The mistake that costs real time is treating each image as a separate design job.
Build the first one properly. Then change only the screenshot and the caption for the rest.
Same background. Same frame position. Identical caption placement and size. A set that shares a layout reads as one story when somebody swipes through it. A set where every image is designed fresh reads as five unrelated ads.
Build the first one properly. Then change only the screenshot and the caption for the rest.
Same background. Same frame position. Identical caption placement and size. A set that shares a layout reads as one story when somebody swipes through it. A set where every image is designed fresh reads as five unrelated ads.
Localization changes the math
If you ship in five languages, five images become twenty five. That's when a template stops being a nice idea and becomes the only workable approach.
Keep the caption layer separate and swap only the text.
German runs long, so leave slack in the caption box from the start. Building the English set tight against the edges guarantees a rebuild later, and rebuilds always land in the week you can least afford them.
Keep the caption layer separate and swap only the text.
German runs long, so leave slack in the caption box from the start. Building the English set tight against the edges guarantees a rebuild later, and rebuilds always land in the week you can least afford them.
Where Photoshop still earns its money
Being fair about it. If you need heavy compositing, retouching a photograph, or a hand built illustration behind the phone, a full editor is the right tool.
Store screenshots almost never need any of that.
The listings that convert well are simple by design. A frame, a background, six words. Reaching for a professional editor to place three rectangles is the expensive way to get an ordinary result.
Store screenshots almost never need any of that.
The listings that convert well are simple by design. A frame, a background, six words. Reaching for a professional editor to place three rectangles is the expensive way to get an ordinary result.
The check before you upload
Screenshot is real content, not placeholder text. Status bar is clean. Frame matches the device.
Background is one color across the whole set. Caption is under seven words and sits in the same place every time.
Export is JPEG or PNG with no alpha, inside each store's pixel limits. Then look at all of them together at thumbnail size, because that is the only view your future user actually gets.
Background is one color across the whole set. Caption is under seven words and sits in the same place every time.
Export is JPEG or PNG with no alpha, inside each store's pixel limits. Then look at all of them together at thumbnail size, because that is the only view your future user actually gets.
Frequently asked questions
Do I need a paid tool to make app store screenshots?
No. A browser mockup tool, a free desktop editor such as GIMP, or presentation software all produce store ready images. The tool matters far less than getting a clean screenshot, one flat background and a readable caption. Spend the saved money on getting the app screens themselves worth showing, because no frame rescues a dull screenshot.
What size should app store screenshots be?
Google Play accepts JPEG or 24 bit PNG with no alpha, between 320 and 3840 pixels on each side, and needs at least two images. Apple accepts .jpg, .jpeg or .png with no transparency and allows up to ten per localization.
Should I use a device frame or a plain screenshot?
A frame in most cases. It signals immediately that the image is a phone screen rather than a diagram. Match the frame to the device your screenshot came from, and read our [frame matching guide](/blog/app-store-vs-play-store-screenshots) before you commit to a layout.
How many screenshots should I make?
Enough to tell one story, which is usually four to six. The first one carries most of the weight because it appears in search results. Adding a tenth image rarely helps, and it doubles the work every time you localize. Build four strong images before you consider a fifth, and drop any that repeat a point an earlier one already made.
Can I reuse the same images on both stores?
The artwork can be the same but the files cannot. The two stores use different pixel dimensions and different limits on how many you upload. Export once per store from the same template rather than scaling one set to fit the other.
Build the mockup in your browser.
Drop a screenshot into a real device frame and export at the exact store size — free, no signup.