18 Juni 2026 · 9 min read

Device Mockup Generator: Free Frames for App Screenshots

A device mockup generator takes a flat screenshot and wraps it in a realistic phone, tablet, or laptop frame. It is one of the fastest ways to make app screenshots look professional, and it is the same step behind most of the polished images you see on App Store listings and startup landing pages.

This guide covers what a device mockup generator does, where to find free frames, which device frames matter for app marketing in 2026, and how to generate framed mockups without breaking store resolution requirements.

Why Framed Mockups Convert

A bare screenshot can read as abstract — a rectangle of UI with no sense of scale. A device frame gives the eye a familiar object, signals the platform instantly (this is an iPhone app, this is a Mac app), and makes the image feel like a product photo rather than an export. On marketing sites in particular, framed mockups consistently look more finished than raw screenshots.

The trade-off is screen area: a frame adds margins, so less of your actual UI is visible. That is why many App Store galleries use full-bleed screenshots while the marketing site uses framed mockups of the same shots.

Free vs Paid Frame Sources

• Apple Design Resources — official, high-fidelity device art for current iPhone, iPad, and Mac hardware, subject to Apple's marketing guidelines.
• Open mockup libraries — free PNG and SVG frames from community design sites; check each license before commercial use.
• Paid mockup packs — Photoshop PSD smart-object packs with angled and lifestyle shots; the most flexible, but slowest to update for new devices.
• Built-in generators — apps that ship the frames and handle the screen-cutout math for you, so a new screenshot becomes a framed mockup in one step.

Device Frames That Matter for App Marketing

iPhone 18 Pro and 18 Pro Max change less than their names suggest: their screens use the same resolutions as the 17 Pro and 17 Pro Max, so an existing layout drops straight into the new frames, which come in Black, Silver, Glacier, and Burgundy.

Mockups for a Foldable: iPhone Duo

iPhone Duo is Apple's first foldable, and it is the first iPhone where one mockup is not enough. The same phone gives you three distinct shots, each suited to a different message:

• Open, inner display — the 7.6-inch screen. Use it for layouts that make real use of the extra width: dashboards, editors, reading views, anything that looks cramped on a normal phone.
• Closed, cover screen — the 5.4-inch outer display. Use it for quick glances and one-handed flows, the things people do without unfolding.
• Open, seen from the back — the unfolded phone from the outside, with the cover screen showing. It is the shot that makes the hardware unmistakable, so it works best as a hero image.

Two details catch people out. First, do not drop an ordinary phone screenshot into the inner-display frame: stretched phone UI on a foldable reads the same way phone screenshots do inside an iPad frame. Capture the unfolded layout your app actually shows. Second, the cover screen is not a symmetric rounded rectangle. Its corners are almost square on the hinge edge and well rounded on the free edge, so a generic rounded mask either leaves gaps or clips your UI.

Apple's screenshot specifications already list Duo sizes, 1398 × 2034 for the outer display and 2007 × 2853 for the inner display, but App Store Connect will only accept Duo uploads later in 2026 (checked September 15, 2026). Until then, Duo mockups belong on your website, in launch posts, and in press kits. Screenshot Bro ships the three Duo frames in Night Sky and Star White, plus a Duo Showcase template that lays out all three views across one row. See the App Store screenshot sizes reference for the full list.

How to Generate a Framed Mockup

1. Start from a clean screenshot at the device's native resolution, with a tidy status bar and no personal data.
2. Pick the device model and color that matches your target audience and store listing.
3. Fit the screen to the cutout so the screenshot fills the device's screen area exactly, with no gap or overlap at the rounded corners.
4. Add background, shadow, and caption if the mockup is for a marketing site or a framed App Store screenshot.
5. Export at store resolution (2x or 3x for crisp edges), once per device size you support.

Resolution and Transparency Gotchas

Two issues break most framed mockups. First, resolution: if you frame a low-resolution screenshot, the device art stays sharp but the screen looks soft — always start from a full-resolution capture. Second, transparency: PNG frames usually have a transparent background, which is what you want for compositing, but App Store and Google Play screenshot slots expect a fully opaque image at an exact size, so flatten the final export onto a solid or gradient background before uploading.

App Store Mockups vs Marketing-Site Mockups

Keep the two contexts separate. App Store and Google Play screenshots must hit exact pixel dimensions and are best tested both framed and full-bleed. Marketing-site mockups can use angled, floating, or multi-device compositions that would never fit a store slot. Generating both from the same source screenshot keeps your visuals consistent across the store and your website.