iPhone X Mock-up
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Dribbble
If you’re presenting an Instagram story design, this iPhone x mockup makes the idea feel real before anything is produced.
It’s a handy file for UI freelancers and startup teams. Quick 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. For a fuller case study, combine it with a laptop or tablet mockup showing the desktop version.
Good for
- An Instagram story design
- A website on mobile
- An app screen
Credit goes to a designer on Dribbble. We link to their download page rather than re-uploading the file, so check their terms there before commercial use.
iPhone X Mock-up: editable parts
Main things you can change in Photoshop:
- Screen design, placed through the smart object
- Device colour, where the file includes it
- Screen glare and reflection layers
- Background colour
Editing the iPhone X Mock-up, step by step
- 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.
- Export a full-size image for your portfolio and a smaller one for social media.
Turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
Best uses for this iPhone X Mock-up
- Show a website on mobile to a client before it goes to print or production.
- Make two or three colour versions of an Instagram story design and let the client pick.
- Use it as the cover image for an app screen in your portfolio.
Before you download
- Made by a designer on Dribbble. The download size and format are listed on their page.
- The preview shows the angle, background and lighting you’ll get.
- Some free mockups ask for credit when you post them. A short line in your caption is enough.
Need a different angle? The iphone mockups category has plenty more free PSD files.
Questions about this mockup
What licence does it come with?
A designer on Dribbble sets the licence, and it can differ from file to file. Many free files allow personal and commercial use, but some are personal-only or ask for credit. Read the terms on the download page before a paid project.
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.
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.
