iPhone X Mockup Template
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Dribbble
This iPhone x mockup is one of the simpler ways to present an app screen or a landing page convincingly.
Useful for startup teams as much as for UI freelancers. Tip: for recent iPhones, keep important UI clear of the notch or Dynamic Island area.
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.
A designer on Dribbble created this one and hosts the download on their own site, so you always get the latest version straight from the source.
What’s inside the iPhone X Mockup PSD
Everything below is on its own layer:
- Screen design, placed through the smart object
- Screen glare and reflection layers
- Shadow under the device
- Device colour, where the file includes it
How to use the iPhone X Mockup
- 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.
- Hide the reflection layer for a flatter look.
- Export with File › Export › Export As: JPG for sharing, PNG for the web.
Another tip: make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.
Where the iPhone X Mockup works best
- Present a landing page in a client proposal or brand guide.
- Show an app screen on your online shop or product page.
- Use it as the cover image for a website on mobile in your portfolio.
Before you download
- 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.
- Check the licence on the author’s page. Personal and commercial terms differ from file to file.
- The preview shows the angle, background and lighting you’ll get.
Scroll down for similar iphone mockups from other designers.
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 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.
Can I remove the screen reflection?
Usually yes. Reflections and glare are normally a separate layer that you can hide or lower in opacity.
Why does the download open another website?
We list free files from designers around the web and link to the original page, so a designer on Dribbble gets the visit and you get the file exactly as they published it.
