Top View Surface Laptop Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Anthony Boyd Graphics
Presenting a website? Put it on this top view surface laptop mockup and the client sees the real thing, not a flat file.
It’s a handy file for web designers and SaaS teams. Tip: make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.
Stakeholders who don’t read wireframes still understand a screen on a device straight away. Pair it with a second device from the same angle to show a responsive layout.
Good for
- A website
- A dashboard
- An online course screen
This is a free file from Anthony Boyd Graphics. When you click download you’ll land on their page to grab it.
What’s inside the Top View Surface Laptop Mockup PSD
The PSD is layered, so you can change:
- Screen design, placed through the smart object
- Background colour
- Device colour, where the file includes it
Add your design to the Top View Surface Laptop Mockup
- Export your screen design as a PNG at the exact size of the screen smart object.
- Open the file in Photoshop and double-click the smart object thumbnail in the Layers panel.
- Place your design, hide the sample artwork, save, and go back to the main file.
- Hide the reflection layer for a flatter look.
- Export with File › Export › Export As: JPG for sharing, PNG for the web.
One more thing: turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
Ways to use this Top View Surface Laptop Mockup
- Show a website on your online shop or product page.
- Present a dashboard in a client proposal or brand guide.
- Make two or three colour versions of an online course screen and let the client pick.
Before you download
- Made by Anthony Boyd Graphics. The download size and format are listed on their page.
- Check the smart object size before you design, so your artwork fits without stretching.
- Check the licence on the author’s page. Personal and commercial terms differ from file to file.
- The preview shows the angle, background and lighting you’ll get.
Need a different angle? The laptop mockups category has plenty more free PSD files.
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 put my artwork on the laptop?
Find the smart object layer (it has a small icon on its thumbnail), double-click it, place your design, then save and close that tab.
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.
