How to Make a Browser Mockup of a Website Screenshot

When to use a browser frame instead of a MacBook

Use the Browser frame when the product is the site. The window is a cue (“this is software in a tab”), not a computer you are selling. Use the MacBook when you want aluminium and a desk.

A macOS window frame also exists in the dock if you want the desktop-app look without a laptop body. The chooser’s Browser card is the web version of that idea: a window, a studio, a camera.

What you'll need

• A website screenshot at a desktop aspect (wide). Crop out your real browser UI first.
• A desktop browser with WebGL
• About five minutes for a still, longer if you add a camera move

Step 1 — Pick Browser

Open Studio and pick Browser on a new project. The card uses the Desktop look: square-ish to the camera, a window you can still orbit. It is a stage, not a locked front-on stamp.

If you are already in a project, the Mockup picker has Browser and a macOS window as separate devices. The chooser is just the fast path.

Step 2 — Drop a clean screenshot

Capture the site without the real Chrome or Safari chrome, or crop it off in Source. Two title bars is the tell that this is a screenshot in a screenshot.

Wide shots read. A mobile capture letterboxed in a desktop window looks like a mistake. If the product is a phone site, use the iPhone card instead of forcing it into a browser frame.

Step 3 — Orbit just enough

A browser mockup can stay almost straight on. A few degrees of yaw is enough to make the window sit in space. Too much orbit and the copy on the site shears. Push in is useful if you want to land on a feature in the page. Scan across is for a wide marketing site you want to reveal.

Depth of field is optional here. If the page is the product, keep Blur off or very light. Radial blur behind a window can look like a poster. Save the heavy lens for phones and laptops.

Step 4 — Background and light

Soft or Flat. Dramatic light on a window often crushes the page. The room behind the window should be quieter than the UI. If the studio HDR is busier than the screenshot, pin a simpler plate or drop IBL.

Effects (bloom, grain, fringe) are easy to overdo on a browser mockup because they sit on the page itself. A little vignette is usually enough.

Step 5 — Export

Capture for a 2× PNG of the viewport. Export for PNG, WebP, JPG, or a clip. Free files are 720p with a screenlive.app watermark. $1 unlocks clean 4K. Match the Frame size to the slot: a homepage hero is rarely 9:16.

Browser window versus macOS window versus MacBook

Three frames, three jobs. The Browser card is a web window on a studio stage — the usual SaaS hero. A macOS window in the Mockup picker is the desktop-app version of the same idea: traffic lights, a title, no laptop body. The MacBook card adds aluminium, a hinge, and a keyboard deck.

If the tweet is “we shipped a site,” use Browser. If the tweet is “we shipped a Mac app,” use the macOS window. If the tweet is “it runs on your laptop,” use MacBook. Mixing them — a browser chrome photographed on a MacBook that already has a browser in the screenshot — is how the picture starts arguing with itself.

Frame size for a website screenshot mockup

A browser mockup is usually a wide still. 16:9 and 2:1 are the common homepage ratios. 4:5 and 1:1 are for a feed. Set Frame size before you orbit; a window composed in 16:9 looks cramped when you later stamp it into a 4:5 slot.

Named social sizes live in that same dock section. They change the canvas, not the device. The window stays a window. You are picking the photograph’s crop, the way you would pick a print size.

Common mistakes

• Leaving the real Safari or Chrome UI in the screenshot so the mockup has two title bars.
• A portrait phone capture letterboxed in a desktop window.
• Heavy depth of field that blurs the product copy on the page.
• Dramatic lighting that crushes a light-mode website into mud.
• Orbiting so far that the window reads as a diamond instead of a site.

Soft next step

If the window should sit on a desk with a keyboard in frame, switch to the MacBook how-to. If the site is actually an iPhone app, use the iPhone mockup instead of a browser chrome.

Related how-tos

• How to Make a MacBook Mockup from a Website Screenshot
• How to Make an iPhone Mockup in the Browser (No Photoshop)
• A Mockup Generator That Does Not Upload Your Screenshots