Surface Studio Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Pixelbuddha
A video thumbnail looks better on a surface studio mockup than on a white artboard, and this mockup is set up for exactly that.
Good pick for web designers, product marketers or anyone putting together a portfolio. Quick 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.
The file is made by Pixelbuddha. The download button takes you to their page, where you get the original file and the licence details.
Editable options in the Surface Studio Mockup PSD
The PSD is layered, so you can change:
- Screen design, placed through the smart object
- Screen glare and reflection layers
- Shadow under the device
How to use the Surface Studio Mockup
- Take a clean screenshot of the app or website you want to show.
- In the Layers panel, find the layer with the small smart object icon and double-click it.
- Paste your design, resize it to fill the area, then save (Ctrl/Cmd + S) and close that tab.
- Lower the glare layer if it hides small text.
- Export a full-size image for your portfolio and a smaller one for social media.
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 Surface Studio Mockup
- Show a video thumbnail on your online shop or product page.
- Share a desktop website on Instagram, Behance or Dribbble with a real-looking preview.
- Make two or three colour versions of a design system page and let the client pick.
Quick notes on this mockup
- Made by Pixelbuddha. The download size and format are listed on their page.
- Check the smart object size before you design, so your artwork fits without stretching.
- Built for Adobe Photoshop. A recent CC version handles the smart objects best.
- The preview shows the angle, background and lighting you’ll get.
Need a different angle? The imac mockups category has plenty more free PSD files.
Questions about this mockup
Can I use this iMac 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 put my artwork on the iMac?
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.
Do I need Photoshop?
Yes. This is a PSD mockup built with smart objects, so you edit it in Adobe Photoshop. Any recent CC version works.
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.
