Putting a screenshot inside an iPhone mockup

A raw screen capture is a rectangle of interface. A mockup gives that rectangle a body, a shadow and a place to sit, which is what makes it read as a product rather than a document. The mechanics are simple; the parts people get wrong are the aspect ratio, the corner radius and the amount of empty space around the device.

Start from a capture at the device's native ratio

Take the screenshot on a device or simulator that matches the frame you plan to use, so the aspect ratio is already correct. If you scale a 16:9 capture into a 19.5:9 frame, everything stretches subtly and the result looks wrong in a way viewers feel but cannot name. When you only have a mismatched capture, crop it rather than stretching — losing a strip of a list is invisible, distorted type is not.

Let the frame own the corners and the notch

Do not round the corners of your screenshot in an image editor before dropping it into a mockup. The frame masks the screen for you, and pre-rounded corners produce a double edge or a halo. The same goes for the status bar and the dynamic island: if the mockup draws them, hide them in the capture, otherwise you get two clocks. A good mockup tool exposes these as toggles rather than making you fix the source image.

Give it room, then decide the background

A device pressed against the edge of the canvas feels cramped and crops badly in every placement. Leave generous margin, then choose a background that does one job: a soft gradient for store screenshots, a flat brand colour for social, transparency for a website hero where the page background shows through. Reach for a photographic background only when the app is about the physical world — otherwise it competes with the interface for attention.