iPhone XR Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Pixeden
An iPhone xr mockup, made for presenting an Instagram story design. Drop in your artwork and the lighting and shadows stay as they are.
Good pick for app designers, UI freelancers or anyone putting together a portfolio. Screenshots with a white background can blend into the bezel; a thin shadow or darker UI reads better.
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.
Pixeden created this one and hosts the download on their own site, so you always get the latest version straight from the source.
iPhone XR Mockup: editable parts
The PSD is layered, so you can change:
- Screen design, placed through the smart object
- Screen glare and reflection layers
- Shadow under the device
- Background colour
How to use the iPhone XR 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.
- Lower the glare layer if it hides small text.
- Export with File › Export › Export As: JPG for sharing, PNG for the web.
One more thing: make your screen design at the exact pixel size of the smart object, otherwise text on the screen turns blurry.
Where the iPhone XR Mockup works best
- Make two or three colour versions of a website on mobile and let the client pick.
- Show an Instagram story design on your online shop or product page.
- Present an app screen in a client proposal or brand guide.
Good to know
- Made by Pixeden. The download size and format are listed on their page.
- The preview shows the angle, background and lighting you’ll get.
- Built for Adobe Photoshop. A recent CC version handles the smart objects best.
- Some free mockups ask for credit when you post them. A short line in your caption is enough.
More free iphone mockups are listed below, each linking to the original author.
Questions about this mockup
Is it free for commercial use?
Pixeden 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 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.
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 Pixeden gets the visit and you get the file exactly as they published it.
