Table of contents
- Quick nav
How to Make Device-Frame App Screenshots (Online Mockup)
If you searched for device-frame screenshots (phone bezel / mockup), you usually want a fast path: UI capture → real device frame → transparent PNG. That is what Device Mockup does locally in the browser—your image is not uploaded to our servers for the composite.
Still deciding whether listing screenshots should show a bezel at all? Read when to use device frames and store rules for device frames. This page is only the hands-on workflow.
Where framed shots fit
| Destination | Prefer | Start here |
|---|---|---|
| Website, docs, social, pitch decks | Framed mockups read clearly as a phone app | /en/tools/device-mockup |
| App Store / Google Play listing slots | Often full-bleed UI + caption; confirm platform rules before frames | /en/preview → /en/tools/screenshot-check |
| “What will the store page look like?” | Page layout mock, not a single bezel | /en/tools/store-preview |
Play is stricter about device imagery in some placements; the App Store is more flexible but still rejects misleading chrome. When unsure: framed for marketing, full-bleed for store slots.
Steps (about two minutes)
- Open /en/tools/device-mockup.
- Upload a portrait UI screenshot (simulator or device; crop desktop wallpaper).
- Pick a bezel (iPhone / iPad / common Android—see the live list in the tool).
- Nudge fit so the UI fills the screen area without letterboxing or clipping primary controls.
- Export a transparent PNG for light or dark landing backgrounds.
- For store caption layouts, rebuild on /en/preview at the official canvas size—do not stretch a framed PNG into Connect dimensions.
Pre-export checklist
| Check | Why |
|---|---|
| Demo status-bar time / battery | Real clutter looks unfinished |
| No debug panels or unreleased UI | Common leak in public assets |
| Bezel matches the device you claim | Wrong notch is an instant tell |
| Alpha preserved when you need it | Easier to drop on brand backgrounds |
Need many store pixel sizes plus forced opaque PNG/JPG in a ZIP? Use /en/tools/batch-processor—that is listing packaging, not framing.
FAQ
Can I upload framed shots to App Store Connect?
Technically yes, but many teams still ship full-bleed compositions. Check frame rules first; Play needs extra care.
How is this different from “app screenshots”?
“App screenshots” is the broad store/marketing UI set. Device-frame screenshots specifically add hardware chrome. For the end-to-end store canvas flow, see App screenshot maker guide.
Is there a paid “Pro” tier?
The mockup tool runs free in your browser. We do not gate this flow behind a “Pro” plan.
After one export, drop icon + shots into /en/tools/store-preview to spot scale issues faster than staring at a single PNG.