3D Perspective App Screen Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Dribbble
Presenting several app screens? Put it on this 3D perspective app screen mockup and the client sees the real thing, not a flat file.
It’s a handy file for UI/UX designers and Dribbble posters. Tip: put your strongest screen in the most visible position. People judge the whole set by the first screen they see.
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.
Good for
- Several app screens
- A case study header
- A UI kit preview
The file is made by a designer on Dribbble. The download button takes you to their page, where you get the original file and the licence details.
What’s inside the 3D Perspective App Screen Mockup PSD
Open it in Photoshop and you can change:
- Screen design, placed through the smart object
- Device colour, where the file includes it
- Shadow under the device
Add your design to the 3D Perspective App Screen Mockup
- Pick one strong screen. It reads better than a crowded one.
- 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.
- Save a JPG for clients and social media, and keep the PSD for later changes.
One more thing: for app store or portfolio images, crop tight around the device so the screen fills most of the frame.
Ways to use this 3D Perspective App Screen Mockup
- Show a UI kit preview on your online shop or product page.
- Make two or three colour versions of several app screens and let the client pick.
- Use it as the cover image for a website flow in your portfolio.
Good to know
- Made by a designer on Dribbble. The download size and format are listed on their page.
- Built for Adobe Photoshop. A recent CC version handles the smart objects best.
- Some free mockups ask for credit when you post them. A short line in your caption is enough.
- Check the licence on the author’s page. Personal and commercial terms differ from file to file.
Scroll down for similar app screen mockups from other designers.
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 add my design?
Open the file in Photoshop, double-click the smart object thumbnail, paste or place your artwork in the new tab, save it (Ctrl/Cmd + S) and close. The main file updates on its own.
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.
