MacBook Air Showcase Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Dribbble
This MacBook Air showcase mockup is one of the simpler ways to present a website homepage or a portfolio case study convincingly.
Useful for agencies as much as for developers. A small tip: screenshots with a white background can blend into the bezel; a thin shadow or darker UI reads better.
Stakeholders who don’t read wireframes still understand a screen on a device straight away. For a fuller case study, combine it with a laptop or tablet mockup showing the desktop version.
A designer on Dribbble created this one and hosts the download on their own site, so you always get the latest version straight from the source.
MacBook Air Showcase Mockup: editable parts
Everything below is on its own layer:
- Screen design, placed through the smart object
- Device colour, where the file includes it
- Background colour
- Shadow under the device
Add your design to the MacBook Air Showcase Mockup
- Take a clean screenshot of the app or website you want to show.
- Open the file in Photoshop and double-click the smart object thumbnail in the Layers panel.
- Paste your design, resize it to fill the area, then save (Ctrl/Cmd + S) and close that tab.
- Save a JPG for clients and social media, and keep the PSD for later changes.
For app store or portfolio images, crop tight around the device so the screen fills most of the frame.
Ways to use this MacBook Air Showcase Mockup
- Present a portfolio case study in a client proposal or brand guide.
- Make two or three colour versions of a web app and let the client pick.
- Show a SaaS dashboard on your online shop or product page.
Before you download
- Made by a designer on Dribbble. 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.
- 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
What licence does it come with?
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.
