Skip to content

Screen MacBook Pro Mockup

Macbook··PSD

Screen MacBook Pro Mockup

What's inside

  • Applications Photoshop
  • File Types PSD
  • License Free (see author's terms)
  • Author Pixeden

Here’s a screen MacBook Pro mockup that works well for a web app, a portfolio case study and similar projects.

Good pick for agencies, web designers or anyone putting together a portfolio. Quick tip: make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.

A screen inside a real device frame explains a product faster than a raw screenshot, which is why it shows up on so many landing pages and app store listings.

Works well for

  • A web app
  • A portfolio case study
  • A SaaS dashboard

This is a free file from Pixeden. When you click download you’ll land on their page to grab it.

What you can edit in this Screen MacBook Pro Mockup

Everything below is on its own layer:

  • Screen design, placed through the smart object
  • Device colour, where the file includes it
  • Screen glare and reflection layers

Editing the Screen MacBook Pro Mockup, step by step

  1. Take a clean screenshot of the app or website you want to show.
  2. In the Layers panel, find the layer with the small smart object icon and double-click it.
  3. Place your design, hide the sample artwork, save, and go back to the main file.
  4. Export a full-size image for your portfolio and a smaller one for social media.

Worth remembering: for app store or portfolio images, crop tight around the device so the screen fills most of the frame.

Where the Screen MacBook Pro Mockup works best

  • Show a web app to a client before it goes to print or production.
  • Present a portfolio case study in a client proposal or brand guide.
  • Make two or three colour versions of a SaaS dashboard and let the client pick.

Before you download

  • Made by Pixeden. The download size and format are listed on their page.
  • Check the licence on the author’s page. Personal and commercial terms differ from file to file.
  • Some free mockups ask for credit when you post them. A short line in your caption is enough.
  • Built for Adobe Photoshop. A recent CC version handles the smart objects best.

Scroll down for similar macbook mockups from other designers.

Questions about this mockup

Can I use this MacBook mockup for client work?

That depends on the author's terms. The download page lists what is allowed; when in doubt, ask the author directly.

How do I add my design?

Open the file in Photoshop, double-click the smart object thumbnail, paste or place your artwork in the new tab, save it (Ctrl/Cmd + S) and close. The main file updates on its own.

Which Photoshop version do I need?

A recent Photoshop CC version is best. Older versions can open the file but sometimes have trouble with smart objects and effects.

What size should my screenshot be?

Open the screen smart object and check its canvas size in Image › Canvas Size. Paste your screenshot at that size so it stays sharp.

Advertisement