App Presentation Mockups
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Zippypixels
An app presentation mockup, made for presenting several app screens. Drop in your artwork and the lighting and shadows stay as they are.
Good pick for product teams, UI/UX designers or anyone putting together a portfolio. 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. Pair it with a second device from the same angle to show a responsive layout.
Credit goes to Zippypixels. We link to their download page rather than re-uploading the file, so check their terms there before commercial use.
What’s inside the App Presentation Mockups PSD
The PSD is layered, so you can change:
- Screen design, placed through the smart object
- Shadow under the device
- Device colour, where the file includes it
How to edit this App Presentation Mockups in Photoshop
- Export your screen design as a PNG at the exact size of the screen smart object.
- Open the PSD in Photoshop and find the smart object layer, usually named “Your Design” or “Place Here”.
- 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.
Another tip: turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
Ways to use this App Presentation Mockups
- Make two or three colour versions of several app screens and let the client pick.
- Show a website flow on your online shop or product page.
- Show a case study header to a client before it goes to print or production.
Good to know
- Made by Zippypixels. The download size and format are listed on their page.
- Check the licence on the author’s page. Personal and commercial terms differ from file to file.
- 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.
More free app screen mockups are listed below, each linking to the original author.
Questions about this mockup
Is it free for commercial use?
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 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.
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 Zippypixels gets the visit and you get the file exactly as they published it.
