How to create a MacBook mockup.

Protato includes the MacBook Pro 14-inch in Space Black. Open the Devices panel, remove the default iPhone, and add the MacBook Pro 14-inch. This is currently the only laptop model, and it matches Apple's latest design language.

The MacBook Pro has a 14-inch display with a notch and thinner bezels. When you import content, it fills the screen area correctly, accounting for the notch and rounded corners.

Laptops are wider than phones, so your canvas needs more horizontal space. Set the aspect ratio to 16:9 — this is the natural fit for a MacBook mockup and matches the laptop's display ratio.

If you're creating a MacBook mockup for a landing page hero, 16:9 at 1920 × 1080 px output is ideal. For social media, 16:9 works well for Twitter/X cards and LinkedIn posts.

Open the Media tab and import your screenshot. Because the MacBook screen is larger and wider than a phone, screenshots with more horizontal content (websites, dashboards, desktop apps) look best.

The screenshot appears on the MacBook display automatically. If the aspect ratio doesn't match perfectly, use the Transform tab to adjust the scale. For websites, take a full-width browser screenshot at 1440px or wider for the best results on the 14-inch display.

MacBook mockups look best from a slight top-down angle that shows both the screen and keyboard deck. This angle gives the laptop depth and makes it recognizable as a laptop rather than a floating screen.

In Orbit mode, rotate to a position where you can see about 70% screen and 30% keyboard deck. The MacBook's aluminum body reflects light beautifully at this angle.

Zoom in so the laptop fills about 70-80% of the canvas. Leave room around the edges for background treatment. In Pan mode, center the laptop in the frame.

The MacBook's larger glass surface reflects more light than an iPhone. The Dramatic lighting preset creates beautiful reflections on the MacBook's screen and aluminum body, giving it a premium, marketing-quality look.

In the Material settings, adjust the Glow (Emissive) slider to make the screen appear brightly lit — this helps the screen content stand out against the keyboard deck. Set Clearcoat to a medium value for a realistic glass reflection on the display.

If the keyboard deck looks too dark, increase the Fill light in the Lighting settings. This is a common issue with MacBook mockups because the aluminum surface is angled away from the key light.

Tap the Export button and choose your settings. For MacBook mockups used on landing pages, export at 2x resolution (3840 × 2160 px for a 1920 × 1080 px canvas) for retina display clarity.

JPEG at 90% quality is usually the best choice for MacBook mockups — the larger file size of PNG isn't necessary since you'll rarely need transparency for a laptop shot. If you do need transparency (for compositing onto a page), use PNG with the background set to None.

Your finished MacBook mockup is ideal for: landing page hero sections, SaaS website feature displays, pitch decks, social media graphics for desktop apps, and "works on Mac" marketing materials.