Front Screen iPhone X Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Free Mockup Zone
This front screen iPhone x mockup is one of the simpler ways to present an app screen or an Instagram story design convincingly.
Good pick for startup teams, UI freelancers or anyone putting together a portfolio. Turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
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.
Good for
- An app screen
- An Instagram story design
- A website on mobile
This is a free file from Free Mockup Zone. When you click download you’ll land on their page to grab it.
Front Screen iPhone X Mockup: editable parts
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
How to edit this Front Screen iPhone X Mockup in Photoshop
- Take a clean screenshot of the app or website you want to show.
- 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.
- Change the background colour to fit your brand.
- Export with File › Export › Export As: JPG for sharing, PNG for the web.
Make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.
Where the Front Screen iPhone X Mockup works best
- Show a landing page to a client before it goes to print or production.
- Make two or three colour versions of an app screen and let the client pick.
- Present a website on mobile in a client proposal or brand guide.
Quick notes on this mockup
- Made by Free Mockup Zone. 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 licence on the author’s page. Personal and commercial terms differ from file to file.
Need a different angle? The iphone mockups category has plenty more free PSD files.
Questions about this mockup
Can I use this iPhone mockup for client work?
It's free to download, but the licence belongs to Free Mockup Zone. Check their page: it states whether commercial use is allowed and if attribution is needed.
How do I put my artwork on the iPhone?
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.
Which iPhone model is this?
The model is in the title. Screen sizes differ between generations, so always check the smart object size before exporting your screen.
