App Store screenshot backgrounds that sell the app

An app store screenshot background is the colour behind the caption and the phone: the same calm ground on every frame, so the row reads as one product. Keep the caption off the interface, and export a flat image at a size the store accepts.

What the background is for

People meet a listing as a short strip. You can upload up to 10 screenshots per device size, and up to three can appear in search, depending on orientation. Repeat one colour, one caption position and one margin so the strip is a sequence. The interface is the proof. The ground stays outside it.

Where the caption goes

Put one short line in the top band, in the same place on every frame, and leave the app's own labels alone. Three to six words is enough: the line names the outcome, and the screen below proves it. A caption sitting on buttons makes the line and the screen harder to read. Text on a gradient is the remedy: find a calm area, then let the type follow how light or dark that area is.

Cropping the tall frame down to 4:5 cuts the phone or the line, so lock the caption to the top, keep the side margins even, and check the short frame. In visual hierarchy terms, the line is the first read and the screen is the second.

Sizes each store accepts

Upload the required iPhone size exactly: 1206 × 2622 or 1179 × 2556 pixels in portrait. Landscape swaps the sides. Use .jpeg, .jpg or .png with no transparency, 1 to 10 per device size. If the interface is the same across phones, App Store Connect scales the highest required resolution down. An iPad app also needs a 13 inch screenshot. Use an accepted size exactly.

A 1206 × 2622 iPhone file is too tall for Play, because twice 1206 is 2412. Place the capture, unstretched, on a 1080 × 1920 ground, and on the taller Apple canvas add ground instead of stretching the screen. Play's rules are on the preview assets page.

Build the set once

In Gradiently that ground is a Mark. Auto ink sets the caption light or dark from it, with no box behind the words. You can design on any unclaimed Mark, but exporting needs it to be yours. Claiming is a one-time payment, the first year of keeping is included, and after that keeping is free with Pro, or a yearly fee without it. Only you and the people you assign can then design or export with it. Try on your brand previews a Mark as an App Store listing.

1. 1

   Lay out the first frame

   Start at 1080 × 1920: the line in the top band, the real screen centred below, even margins, nothing stretched. On a dark app, leave a rim of ground so the phone stays visible. Dark mode design is that edge.

2. 2

   Add a page for each screenshot

   Keep the ground, the type position and the phone size. Change only the line and the screen. Pages hold the series in order, frame one first.

3. 3

   Copy the layout to the other sizes

   Add 1080 × 1350 and the Apple size you will upload. Custom sizes run from 200 to 8,000 pixels a side. Copy to sizes lays each size out again. The whole set at once is part of Pro. One new size is free. Check the caption and the phone afterwards.

4. 4

   Fill the captions from a sheet

   Bulk create connects a CSV or TSV to the text. The first row is headings, the file can be up to 1 MB, you review every version, and one undo removes the batch. The sheet stays in the browser.

5. 5

   Export a flat image

   Export PNG or JPEG with no alpha channel. Pro goes up to 4K with no watermark, which covers these sizes. A free export is PNG or JPG at 720p with a small watermark, short of the App Store sizes above.

caption,file
Start a focus block,timer.png
See the whole week,week.png
Hand it to the team,people.png

For Nock, a fictional focus app, frame one is the timer, frame two the week, frame three the shared list. Add another frame only when it shows something new. Use the same ground on app launch graphics and on the icon, which still has to read small (app icon gradient).

Captions that hold up small

Write the line for a thumbnail: one idea per frame, in the app's own words, with no awards and no line that only says to download. More than half the frames show the app in use. Read the first three beside the icon. If a stranger cannot say what the app does, the caption is too small or the screen is buried.