App Screen Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author GraphicBurger
Several app screens looks better on an app screen mockup than on a white artboard, and this mockup is set up for exactly that.
UI/UX designers and product teams tend to get the most out of files like this. Quick tip: put your strongest screen in the most visible position. People judge the whole set by the first screen they see.
It’s also a quick way to make case study images look consistent: same device, same angle, different screens. Pair it with a second device from the same angle to show a responsive layout.
Use it for
- Several app screens
- A website flow
- A case study header
This is a free file from GraphicBurger. When you click download you’ll land on their page to grab it.
What’s inside the 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
- Screen glare and reflection layers
How to use the App Screen Mockup
- Export your screen design as a PNG at the exact size of the screen smart object.
- In the Layers panel, find the layer with the small smart object icon and double-click it.
- 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: screenshots with a white background can blend into the bezel; a thin shadow or darker UI reads better.
Ways to use this App Screen Mockup
- Show several app screens on your online shop or product page.
- Show a website flow to a client before it goes to print or production.
- Make two or three colour versions of a UI kit preview and let the client pick.
Before you download
- Made by GraphicBurger. The download size and format are listed on their page.
- Built for Adobe Photoshop. A recent CC version handles the smart objects best.
- Check the smart object size before you design, so your artwork fits without stretching.
- Some free mockups ask for credit when you post them. A short line in your caption is enough.
Need a different angle? The app screen mockups category has plenty more free PSD files.
Questions about this mockup
Is it free for commercial use?
It's free to download, but the licence belongs to GraphicBurger. Check their page: it states whether commercial use is allowed and if attribution is needed.
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.
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 GraphicBurger gets the visit and you get the file exactly as they published it.
