Surface Pro Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Pixeden
A web app looks better on a surface Pro mockup than on a white artboard, and this mockup is set up for exactly that.
It’s a handy file for web designers and SaaS teams. Quick tip: for app store or portfolio images, crop tight around the device so the screen fills most of the frame.
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.
This is a free file from Pixeden. When you click download you’ll land on their page to grab it.
Surface Pro Mockup: editable parts
Main things you can change in Photoshop:
- Screen design, placed through the smart object
- Device colour, where the file includes it
- Screen glare and reflection layers
How to use the Surface Pro 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.
- Change the background colour to fit your brand.
- Export with File › Export › Export As: JPG for sharing, PNG for the web.
Worth remembering: make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.
Ways to use this Surface Pro Mockup
- Make two or three colour versions of a website and let the client pick.
- Use it as the cover image for a dashboard in your portfolio.
- Share a web app on Instagram, Behance or Dribbble with a real-looking preview.
Quick notes on this mockup
- Made by Pixeden. The download size and format are listed on their page.
- Built for Adobe Photoshop. A recent CC version handles the smart objects best.
- Check the smart object size before you design, so your artwork fits without stretching.
- The preview shows the angle, background and lighting you’ll get.
More free laptop mockups are listed below, each linking to the original author.
Questions about this mockup
Is it free for commercial use?
It's free to download, but the licence belongs to Pixeden. Check their page: it states whether commercial use is allowed and if attribution is needed.
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.
