Laptop Screen Mockups
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Graphic Google
Presenting an online course screen? Put it on this laptop screen mockup and the client sees the real thing, not a flat file.
It’s a handy file for web designers and SaaS teams. A small 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. Pair it with a second device from the same angle to show a responsive layout.
The file is made by Graphic Google. The download button takes you to their page, where you get the original file and the licence details.
Editable options in the Laptop Screen Mockups PSD
Open it in Photoshop and you can change:
- Screen design, placed through the smart object
- Shadow under the device
- Screen glare and reflection layers
- Device colour, where the file includes it
Add your design to the Laptop Screen Mockups
- 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.
Worth remembering: for app store or portfolio images, crop tight around the device so the screen fills most of the frame.
Best uses for this Laptop Screen Mockups
- Make two or three colour versions of a website and let the client pick.
- Present a web app in a client proposal or brand guide.
- Share a dashboard on Instagram, Behance or Dribbble with a real-looking preview.
Before you download
- Made by Graphic Google. The download size and format are listed on their page.
- The preview shows the angle, background and lighting you’ll get.
- 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.
More free laptop mockups are listed below, each linking to the original author.
Questions about this mockup
Is it free for commercial use?
Graphic Google sets the licence, and it can differ from file to file. Many free files allow personal and commercial use, but some are personal-only or ask for credit. Read the terms on the download page before a paid project.
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.
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.
Why does the download open another website?
We list free files from designers around the web and link to the original page, so Graphic Google gets the visit and you get the file exactly as they published it.
