How to Make a MacBook Mockup from a Website Screenshot

Laptop mockup versus browser-window mockup

Two honest jobs. A MacBook mockup is a product photo of a laptop: aluminium, hinge, keyboard deck, a site sitting in the display. A browser-window mockup is a chrome around the same site — useful when you want the URL bar, not the computer.

Pick the MacBook when the hardware is part of the story (a desktop app, a “works on your Mac” launch, a desk shot). Pick the Browser frame when the story is the site itself and a laptop body would be noise. ScreenLive has both cards in the chooser. This page is the laptop.

What you'll need

• A website screenshot or a short screen recording (PNG, JPG, or a clip)
• A desktop browser with WebGL
• Five to fifteen minutes, depending on whether you animate the lid

Step 1 — Pick MacBook in the frame chooser

Open Studio. On a new project, pick MacBook. The card lands on the Laptop look: a MacBook Pro 14-inch in Space Black, camera high enough to see the deck, not just the screen.

The Desk Mac Starter is the composed version of that shot: Laptop look, Flat lighting, and Pull back so the first export already opens the frame onto the keyboard. Applying a Starter keeps your own media by default. Use it when you want the desk shot in one click, then nudge.

Step 2 — Drop the website onto the display

Drop or paste the screenshot. Crop in Source so the site fills the display without letterboxing a mobile screenshot onto a laptop. A phone screenshot on a MacBook is the fastest way to make the mockup look fake.

If you captured the site in a browser already, crop out the real Chrome UI unless you want a browser-in-a-laptop. Two chromes in one picture is a mess. Either the MacBook is the frame, or the Browser frame is the frame.

Step 3 — Show the deck, then decide on the lid

A laptop reads as a laptop once you can see the hinge. Pull back (the named camera move) opens the frame. Orbit ease still works, but a 64° yaw on a laptop can hide the keyboard at the edges of the move. Pull back and Out and back are the calmer pair for a site that has to stay readable.

Fold up is the lid close: 105° down to 0°. It only exists on hinged devices. Use it for a reveal (start closed, reverse the idea in the timeline) or for a sign-off. Do not fold the lid if the screenshot is the whole point of the still — you will hide the product.

Finish chips swap Space Black and the other measured MacBook bodies the same way the iPhone chips work: the camera and the screenshot stay, the aluminium changes.

Step 4 — Light a desk, not a poster

Flat is the honest desk-product rig: even key, less drama, the site stays the brightest thing in the frame. Soft still works if you want the aluminium to wrap. Dramatic on a laptop often makes the keyboard a hole. Start Flat, then raise the key if the lid looks dead.

Contact shadow is how the laptop sits on the desk. Auto is fine. Turn it off only if you are compositing the PNG onto a background you already have.

Step 5 — Export the still or a short pull-back

Capture (⇧⌘C) for a 2× PNG of what you see. Export for the file you will publish. Free Export is 720p with a screenlive.app watermark. $1 once unlocks clean 4K. A laptop hero on a marketing page is usually a still. A launch clip is Pull back or Out and back over six to ten seconds — see the video how-to for the timeline.

Capture the site at a laptop aspect

The display on a MacBook Pro 14-inch is a wide 16:10-ish rectangle. A mobile capture letterboxed in that rectangle is the fastest fake. Capture the marketing site at desktop width. If you only have a phone screenshot of the same product, use the iPhone card instead of forcing it onto a laptop.

Full-page scrolling captures are usually too tall. Crop in Source to the hero, the pricing table, or the one screen the launch is about. The mockup is a photograph of a moment, not a PDF of the whole site.

Frame size at the bottom of the dock sets the export ratio: 16:9 for a homepage, 1.91:1 for a LinkedIn card, custom pixels when the CMS is picky. Centre guides never reach the file. Set the ratio before you pull the camera back, or you will compose a shot you then crop off.

Common mistakes

• Dropping a portrait phone screenshot onto the MacBook display.
• Leaving Orbit ease at full strength so the deck disappears mid-move.
• Keeping a second browser chrome inside the screenshot.
• Using Dramatic light when the copy on the site has to stay readable.
• Folding the lid closed on a still whose whole job is the website.
• Exporting a 9:16 frame of a laptop that was composed for 16:9.

Soft next step

If you wanted the URL bar instead of the aluminium, use the browser-window how-to. If the laptop should move, export MP4 from the same project.

Related how-tos

• How to Make a Browser Mockup of a Website Screenshot
• How to Make an iPhone Mockup in the Browser (No Photoshop)
• How to Make an Animated Device Mockup Video (MP4)