Multiple Web Screen Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Graphberry
This multiple web screen mockup is one of the simpler ways to present several app screens or a UI kit preview convincingly.
Useful for UI/UX designers as much as for product teams. A small tip: turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
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.
Works well for
- Several app screens
- A UI kit preview
- A website flow
Credit goes to Graphberry. We link to their download page rather than re-uploading the file, so check their terms there before commercial use.
Multiple Web Screen Mockup: editable parts
Everything below is on its own layer:
- Screen design, placed through the smart object
- Shadow under the device
- Background colour
How to edit this Multiple Web Screen Mockup in Photoshop
- 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.
- Save a JPG for clients and social media, and keep the PSD for later changes.
Make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.
Best uses for this Multiple Web Screen Mockup
- Show a UI kit preview on your online shop or product page.
- Show several app screens to a client before it goes to print or production.
- Share a case study header on Instagram, Behance or Dribbble with a real-looking preview.
Quick notes on this mockup
- Made by Graphberry. The download size and format are listed on their page.
- Built for Adobe Photoshop. A recent CC version handles the smart objects best.
- The preview shows the angle, background and lighting you’ll get.
- Some free mockups ask for credit when you post them. A short line in your caption is enough.
More free app screen mockups are listed below, each linking to the original author.
Questions about this mockup
Can I use this screen presentation mockup for client work?
Graphberry 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 screen presentation?
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.
Can I remove the screen reflection?
Usually yes. Reflections and glare are normally a separate layer that you can hide or lower in opacity.
