iPhone 8 Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Behance
Presenting an app screen? Put it on this iPhone 8 mockup and the client sees the real thing, not a flat file.
Startup teams and UI freelancers tend to get the most out of files like this. Tip: for recent iPhones, keep important UI clear of the notch or Dynamic Island area.
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.
Good for
- An app screen
- An Instagram story design
- A landing page
A designer on Behance 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 8 Mockup PSD
Everything below is on its own layer:
- Screen design, placed through the smart object
- Device colour, where the file includes it
- Screen glare and reflection layers
- Background colour
Add your design to the iPhone 8 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”.
- Place your design, hide the sample artwork, save, and go back to the main file.
- Hide the reflection layer for a flatter look.
- Export a full-size image for your portfolio and a smaller one for social media.
One more thing: for app store or portfolio images, crop tight around the device so the screen fills most of the frame.
Where the iPhone 8 Mockup works best
- Make two or three colour versions of an app screen and let the client pick.
- Show a landing page on your online shop or product page.
- Use it as the cover image for an Instagram story design in your portfolio.
Before you download
- Made by a designer on Behance. 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.
- Check the smart object size before you design, so your artwork fits without stretching.
More free iphone mockups are listed below, each linking to the original author.
Questions about this mockup
Can I use this iPhone mockup for client work?
It's free to download, but the licence belongs to a designer on Behance. Check their page: it states whether commercial use is allowed and if attribution is needed.
How do I add my design?
Open the file in Photoshop, double-click the smart object thumbnail, paste or place your artwork in the new tab, save it (Ctrl/Cmd + S) and close. The main file updates on its own.
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.
