How to Make an iPhone Mockup in the Browser (No Photoshop)

Why the flat Figma frame falls short

A Figma device frame is a crop mask with rounded corners. Fine for a quick Slack preview. Weak for a homepage hero, a Product Hunt gallery, or a launch tweet where the phone is the product.

What's missing isn't "more polish." It's depth: a real device body, a camera angle, light that falls off the edges, a background that goes soft so the screen stays sharp. Those are photography controls, not stroke settings.

A photoreal iPhone mockup answers a different question than a store-listing grid. Store listings want ten flat frames with captions. A cinematic mockup wants one phone that looks held, or sitting on a table, with a screen you can actually read. If you came here for the grid, this is the wrong tool. If you want the photograph, keep going.

What you'll need

• A product screenshot (PNG or JPG is fine; a short clip also works)
• A desktop browser with WebGL
• About five to ten minutes

Step 1 — Open the studio and pick iPhone

Open ScreenLive Studio. A new project asks which frame you want: Screenshot, Browser, iPhone, iPad, MacBook, iMac, Display, or Watch. Pick iPhone.

That card is not a blank scene. It lands on the Hero look — a three-quarter iPhone 17 Pro with a little roll, a wrapping key, and a soft background — and it writes Orbit ease across the first shot so an export already moves. You can kill the move later. The point of the card is that the first frame already looks like a product photo.

If you already have a project open, the dock’s Mockup section still owns the full Apple pack. The chooser is the shortlist: one iPhone, not every finish.

Step 2 — Drop in your screenshot

Drop the file onto the stage, or paste it. The pixels bind to the display, not to a floating PNG. Nothing is uploaded. The compositor is WebGL in this tab.

If the screenshot is a different aspect than the phone, the source panel lets you crop. Do that before you spend time on the camera. A crop that clips the status bar or the tab bar is the difference between a product shot and a screenshot sitting in a phone.

Step 3 — Pick the finish that matches the story

Apple ships each finish as its own measured model. In the dock, the iPhone shows as one tile with a row of finish chips. Sky Blue over Midnight swaps the body and changes nothing else — camera, light, and your screenshot stay put.

Match the phone you actually ship, or the one in the campaign. A black UI on Natural Titanium reads differently than the same UI on a light finish. That is the whole reason the chips exist: so the mockup is a photograph of a specific device, not a generic rectangle.

Step 4 — Aim the camera (and use depth of field on purpose)

Drag to orbit, Option-drag to pan, Command-drag to roll, scroll to zoom. The Hero look is a starting pose, not a lock. Move until the phone feels held or tabletop.

Blur in the dock is Off, Centre, Line, or a Point you click onto the mockup. Centre (radial) is the usual product-photo move: the UI stays sharp, the room falls off. A Point is for when you want one button or one word to carry the shot. Do not leave Blur on if the UI is the whole story and you need every pixel crisp for a zoomed hero.

Looks are poses: Hero, Straight on, Low angle, Dutch, and the rest. Starters add a lighting rig and, sometimes, a camera move. Orbit phone is the iPhone Starter: Hero plus Soft studio and Orbit ease. Applying one keeps your own media by default, so you can try a pose without losing the screenshot you just dropped.

Step 5 — Light it like a still, not a UI kit

Three rigs write Key, Ambient, and the key’s aim: Soft, Dramatic, and Flat. Soft is the wrapping product shot. Dramatic is a harder key and a darker fill. Flat is for when you want the phone to read as a diagram, not a photograph.

Shadow is Off, Soft, Sharp, or Auto, with its own strength and a contact edge. A room can stay pinned behind the device. If the background is fighting the UI, pin a quieter room or drop the IBL rather than adding more effects. Grain, bloom, vignette, and colour fringe are extras. They help a still feel shot. They also hide type. Use them last.

Step 6 — Export a still (Capture vs Export)

Two ways out, on purpose. Shift-Command-C is Capture: a 2× PNG of the viewport at the frame’s ratio, no dialog, no watermark. Use it when you want the shot you are looking at, right now.

Export is the file you send. PNG, WebP, or JPG. Free Export is 720p with a screenlive.app mark so you can always leave with something. A one-time $1 unlock removes the mark and raises the cap to 4K. Editing and preview stay free either way.

If the still is for a homepage hero, export at the ratio you will actually use. The Frame size section at the bottom of the dock has named social sizes and custom pixels. Centre guides draw a crosshair that never reaches an export — they are only for aiming.

Looks, Starters, and the dock

Looks are poses. For a phone you will actually use Hero (three-quarter, a little roll), Straight on (square to the camera), Low angle (the device sits above you), and Dutch (rolled). Each Look writes camera, shadow, and a light depth-of-field — not a new lighting rig. Apply one after the screenshot so you are choosing a photograph, not rebuilding the scene.

Starters add a lighting rig and, sometimes, a move. Orbit phone is Hero plus Soft studio plus Orbit ease. Applying a Starter keeps your own media by default. The dock is one column: Source, Scene, Mockup, Camera, Blur, Effects, Text or Logo, Frame size. You do not need every section. Source and Mockup get the screenshot onto the right body. Camera and Blur make it a picture. Export last.

The Apple pack is thirty-three measured models. The iPhone tile is one product with finish chips, not a folder of separate phones. Sky Blue, Midnight, Natural Titanium — the body swaps, the shot stays. If the campaign names a finish, pick that chip before you spend time on the orbit.

Common mistakes on an iPhone mockup

• Leaving Orbit ease at full strength on a still you meant to be a photograph — kill the move, or export a Capture of a paused frame.
• A landscape screenshot on a portrait phone without cropping in Source first.
• Dramatic light plus heavy grain when the UI type has to stay readable at 200%.
• Exporting 9:16 when the homepage hero is 16:9. Set Frame size before you chase the camera.
• Using a Figma-style straight-on crop and wondering why the photoreal body looks like a sticker. Orbit a few degrees, or pick Low angle.

When a flat frame is still the right tool

Use a Figma or Shots.so frame when you need ten App Store stills by Friday, or a glass social card with a zoom. Use ScreenLive when the phone is the product in the picture: a hero, a launch tweet, a gallery image that has to survive a large crop.

Those jobs can sit next to each other. A lot of people will keep a flat generator for store sets and open this studio for the one cinematic still. That is a reasonable split, not a conversion speech.

Soft next step

Open ScreenLive Studio when you want the photoreal phone instead of a flat frame. If the still should move, the same project can take a named camera move and export an MP4 — that walkthrough is the device-mockup video how-to.

Related how-tos

• How to Make an Animated Device Mockup Video (MP4)
• How to Make a MacBook Mockup from a Website Screenshot
• A Mockup Generator That Does Not Upload Your Screenshots