How Do You Make a MacBook Mockup from a Screenshot?

Drop your screenshot into a MacBook frame, size the canvas for where it will be published, then export at up to 4× or copy it straight to your clipboard. On Device Shots this runs entirely in the browser with no sign-up, and you can start either from a MacBook template or from a blank canvas up to 6000 px. The steps below follow that order: pick the canvas, add the MacBook frame, place the screenshot, style it, export.

Step 1: Pick a canvas size that matches where the image will live

The canvas decides the aspect ratio, and the aspect ratio decides whether your MacBook mockup gets cropped later. Start from a template when one matches your destination, or set a custom canvas if you need something else.

A MacBook screen is wide, so a wide canvas (16:10 or 16:9) leaves less empty space around the device than a square or portrait one. If your target is a portrait format like a Pinterest pin, expect to scale the MacBook down and use the extra room for a headline.

Step 2: Add the MacBook frame

Choose a device frame, then drop, paste, or upload your screenshot into it. The site lists 76 phones, tablets, laptops, and watches, so pick the laptop frame that matches the machine you want to show. If you would rather show a web page than a laptop body, the browser window option gives you 9 vector window styles in light or dark, each with an address bar you can type into — useful when the point is the site itself rather than the hardware.

Two practical notes:

• A MacBook frame implies a desktop layout. A screenshot taken on a phone will look stretched inside it, so use a desktop-width capture when possible.
• Browser frames stay sharp at any size because they are vector, which matters if you export large.

Step 3: Place the screenshot inside the screen

Drop, paste, or upload the image, then adjust position and scale until it sits inside the screen area without clipping the edges of your UI or distorting the aspect ratio.

• Match the aspect ratio first. If your screenshot is 16:9 and the laptop screen area is 16:10, you will either crop a little or leave a thin band — decide which edge can lose a few pixels.
• Keep the top of the screenshot aligned with the top of the screen. Cropping from the bottom usually reads as intentional; cropping the header does not.
• Avoid non-uniform scaling. Stretching to fill is the most common reason a mockup looks fake.

Step 4: Style the background, shadow, and text

Background, text, shadows, and icons are all adjustable. For a portfolio or Dribbble shot, a dark studio background with a soft shadow reads as a product shot. For a landing page hero, a light background with a headline above or beside the laptop usually fits the surrounding page better. Add a headline only if the image will be seen without supporting copy — a social post or a thumbnail — and keep it short enough to read at the size it will actually appear.

Step 5: Export at the right resolution

Export at up to 4×, or copy straight to the clipboard. The 4× option matters when the mockup will be displayed larger than its canvas size, such as a retina hero image or a presentation on a big screen. Copying to the clipboard is the faster path when you are pasting into a design tool or a chat.

Check two things before you finish:

• Export size versus canvas size. A 1600 × 1200 canvas at 4× gives you 6400 × 4800, which is more than most destinations need. Match the export multiplier to the final display size rather than always using the maximum.
• Background transparency. If the background is transparent and the destination expects a solid color, the mockup may render on white or black unexpectedly. Set a background color when in doubt.

Common problems and what causes them

The screenshot looks blurry. Usually the source capture is lower resolution than the space it fills. Re-capture at a higher resolution, or reduce how much of the canvas the laptop occupies.

The image is stretched or squashed. The screenshot's aspect ratio does not match the screen area and it was scaled to fill. Scale uniformly and crop instead.

The export is the wrong size. The canvas was set for one platform but exported for another. Re-check the template size against the destination's requirements before exporting.

The background came out transparent or the wrong color. No background was set. Add one if the destination does not handle transparency.

The laptop looks too small or too large in the frame. This is a canvas choice, not a device choice. A wide canvas with a laptop that fills most of the width reads better than a square canvas with a small laptop floating in the middle.

When this approach fits

This workflow suits anyone who needs a MacBook mockup from an existing screenshot for a portfolio, landing page, or social post, and who wants to stay in the browser without installing anything or creating an account. It is less suited to work that needs custom 3D perspective, reflections, or a specific physical MacBook model rendered from an angle — the frames here are flat, front-facing device and browser shells.