App Store Screenshots, Mockups & Social Graphics

The assets a launch actually needs

Shipping an app or a brand page means producing a fixed list of images at exact sizes, and the list is longer than it looks. An icon is not one file but a ladder of them. A store listing wants screenshots per device class. A link that gets shared wants an Open Graph image or it gets a blank card. None of this is design work in any interesting sense. It is dimension work, and it is the part that stalls a release on a Friday afternoon.

• Icons. The app icon generator takes one square image of at least 1024 × 1024 and writes every raster at once: 1024px for the App Store, 512px for Play, the Android mipmap ladder, PWA manifest icons and favicons. Transparency is flattened, because Apple rejects an icon with an alpha channel.
• Store screenshots. App Store and Play Store screenshots at each required resolution, with the headline and device frame composited in rather than bolted on afterwards.
• The Play listing header. A feature graphic is 1024 × 500, no alpha channel, and it is cropped differently in different placements, so keep the important part away from the edges.
• Shared links. The Open Graph and social card generator produces the 1200 × 630 image that networks show when a URL is posted, plus the other common sizes from the same form.
• Context shots. The device mockup generator puts a capture inside a phone, tablet, laptop or browser frame at that hardware's real aspect ratio, and the screenshot beautifier does the lighter version: padding, a background and a corner radius so a raw capture does not look like a bug report.
• Documents. The signature generator draws a signature to a transparent PNG so it sits on a page without a white box behind it.

Two things worth getting right

Stores reject on mechanics before anyone looks at the design: wrong dimensions, an unexpected alpha channel, the wrong aspect ratio. Every export here is sized and flattened for the target it names, which removes that class of rejection. Beyond that, remember where the image is first seen. A store screenshot is browsed at a fraction of its real size, so a caption that reads comfortably at full resolution can be illegible in the listing. Use few words, large, and put the one that matters in the first screenshot, because most people never swipe.

Each generator draws to a canvas at full export resolution in your browser, so what downloads is the final asset rather than a preview that has to be recreated at scale somewhere else. Unreleased artwork is never uploaded.