How Do You Create an iPhone Mockup from a Screenshot or Screen Recording?

Upload your screenshot or screen recording to a device mockup generator, pick an iPhone frame, choose a layout and background, then export. On Mock Magic, image mockups are free and unlimited, while video mockups require a paid plan. The workflow below covers both, plus the format and troubleshooting details that decide whether your export looks sharp or slightly off.

Image vs. video mockup: which one do you need?

If your content is static, a still mockup is faster and easier to place in layouts. If you need to show motion — a scroll, an animation, a tap flow — you need the video path, and that means a paid subscription.

Step-by-step: build the mockup

1. Prepare your source file. For a screenshot, export it at the native resolution of the phone you're framing (or close to it) rather than a downscaled copy. For a recording, export MP4 or WebM.
2. Upload it. Drop the screenshot or screen recording into the editor. The tool places your content inside the device screen area.
3. Pick the iPhone frame. Mock Magic offers 54+ device variants across iPhone, Android, iPad, MacBook, desktop monitors, and smartwatches, and the library is updated with new devices. Choose the iPhone model that matches your screenshot's aspect ratio.
4. Choose a layout template. Templates cover different orientations, single-device layouts, and multi-device compositions. Some templates are free; premium templates with advanced layouts are Pro-only.
5. Set the background (optional). Use a solid color from the color picker, a gradient, or upload your own background image. Custom backgrounds are saved to your account so you can reuse them in later mockups.
6. Export. Download in high resolution. Image exports are free; video export requires Pro.

The whole sequence is upload → frame → layout → background → export, and the site describes it as taking seconds.

Backgrounds: when they help and when they hurt

Backgrounds are optional. A solid color or gradient keeps the focus on the screen content and works well for App Store screenshots where consistency across a set matters. A custom background image can place the phone in a context — a desk, a brand-colored scene — but a busy image competes with the UI you're trying to show.

Practical rule: if the screenshot is dense (a dashboard, a feed), use a flat or subtle gradient. If the screenshot is sparse (a splash screen, a single button), a richer background adds visual weight.

Common problems and what to check

Screenshot proportions don't match the frame. A screenshot from one phone model stretched into a different model's frame will look distorted. Match the frame to the source aspect ratio, or crop the screenshot to the frame's ratio before uploading.

Export looks blurry. This usually traces back to the input, not the export. Upload the highest-resolution screenshot you have; a low-res source stays low-res no matter how it's framed.

Video won't upload. Confirm the file is MP4 or WebM. Other containers aren't listed as supported. Also confirm your plan includes video — video mockups are a Pro feature, so a free account will not export them even if the upload succeeds.

Custom background isn't available later. Custom backgrounds are saved to your account, so make sure you're signed in when you set them, otherwise they won't carry over to your next mockup.

Quick decision guide

• Free, still images only, unlimited → use Mock Magic's free plan for screenshots.
• Need motion → budget for Pro, and record in MP4 or WebM.
• Need multiple devices in one image → check whether the multi-device template you want is free or premium before committing to a layout.
• Need a consistent set for a store listing → build one background, save it, and reuse it across every screenshot.