Add a device frame to a screenshot on iPhone — three paths and their limits

Last updated: 22 July 2026

A raw screenshot looks like a floating rectangle. Drop it into a real iPhone bezel and the same image suddenly reads like a product shot — the eye knows it's a phone screen, the whitespace around the phone gives the content room to breathe, and colors pop against the device's metal or ceramic frame. The problem: iOS does not have a built-in way to do this. Apple owns the source-of-truth frames, but they ship them as Sketch, Figma and Photoshop files for designers on a Mac — not as a Photos-app button. This guide walks the three real paths for wrapping a screenshot in a device frame on iPhone.

Scrollie's Device Mockup applied to a long screenshot, with the iPhone 17 frame in an official Apple color.

The honest baseline: iOS has no built-in mockup feature

It's worth stating plainly because it's easy to assume it exists somewhere. In the Photos app you can crop, adjust, mark up, and now (on iOS 18 with the right hardware) run Clean Up. What you cannot do is tap a button and wrap the screenshot in an iPhone bezel. There is no Photos filter for it, no Markup tool, no Shortcuts action from Apple that adds a frame. Every route to a mockup involves stepping outside iOS's default toolset — either up to a Mac with a design tool, out to a web browser, or over to a dedicated iOS app.

Path 1 · Apple's official Design Resources (Mac + design tool)

Apple publishes a page called Design Resources that includes Sketch, Figma and Photoshop libraries with the exact bezels, colors, and materials of each recent iPhone and iPad. These are the source-of-truth frames — everyone else's mockup ultimately traces back to something Apple published. If you're a designer with Sketch or Figma open anyway, this is the cleanest path.

1. Go to Apple's Design Resources page on a Mac. Search for "iPhone" (or "iPad") and download the file for the tool you use — Sketch, Figma or Photoshop.
2. Open the file. You'll see artboards for each model and color. Pick the one you want.
3. Drag your screenshot into the placeholder area inside the frame. Most Apple templates use a mask or clipping layer so the screenshot sizes itself automatically.
4. Export the artboard as PNG or JPEG at whatever resolution you need — 2x for retina, 3x for App Store listings, etc.

Honest limits: this is a designer's workflow. You need a Mac, a design tool, and roughly ten minutes the first time. For a marketing hero image or a portfolio piece it's worth it. For "I want a quick mockup on my phone right now," it's overkill.

Path 2 · A web mockup generator (browser, no install)

A handful of free web tools — mockuphone.com is the most familiar — accept a screenshot upload, wrap it in a device frame, and give you a PNG back. Works on any device with a browser, including iPhone.

1. Open a mockup generator in Safari (mockuphone.com or a comparable service).
2. Pick the device you want the mockup for — iPhone, iPad, Android, or another form factor.
3. Tap Upload and choose your screenshot from Photos.
4. Wait for the server to render the mockup — usually a few seconds — then tap Download to save it back to Photos.

Honest limits: your screenshot has to be uploaded to a third-party server for processing. For a marketing shot that's already destined for a public landing page, that's fine. For a private chat, a bank app screen, an internal work app, or anything you'd rather keep off other people's servers, this is the wrong path. Web tools also tend to lag behind on the very latest devices, and their frames aren't always the exact bezels Apple ships.

Path 3 · A dedicated iOS app (on-device, one-tap, current devices)

The middle ground for most people: install a small iOS app that includes a mockup tool. Scrollie ships a Device Mockup feature that wraps a screenshot in a real iPhone or iPad bezel with one tap, on-device, with iPhone 17 models and official Apple colors already in the library.

Wrap an ordinary screenshot

1. Open Scrollie and pick the screenshot from your library, or share it in from Photos.
2. Tap the Device Mockup tool. The frame library appears — recent iPhone and iPad models, each in their real Apple colors.
3. Pick a model and color. The screenshot is placed inside the bezel automatically. If your screenshot has rounded corners or a different aspect ratio, Scrollie fits it to the display area.
4. Add a background, a caption, or arrange multiple mockups in a collage if you're making a marketing set. Export as JPEG, PNG, HEIC, or PDF.

Wrap a long screenshot (per-slice mockup)

Long screenshots are usually too tall to fit in a single device frame. Scrollie's mockup understands this: if you export the long screenshot as sliced pieces, each slice can be wrapped in its own frame, so you get a set of realistic-looking device shots instead of one impossibly tall phone.

1. Import your long screenshot (or stitch one from multiple screenshots) in Scrollie's editor.
2. Open the export panel and choose Slices — the tall image is split into equally-tall segments.
3. Turn on the per-slice Device Mockup option. Each slice is now framed as its own screen.
4. Export the set. You end up with three, four or five mockup images that tell the whole story instead of one impossible thousand-pixel phone.

Quick comparison

Frequently asked questions

Related pages