iPad and iPhone Mockup
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Dribbble
An app screen looks better on an iPad iPhone mockup than on a white artboard, and this mockup is set up for exactly that.
Startup teams and app designers tend to get the most out of files like this. One thing worth knowing: for recent iPhones, keep important UI clear of the notch or Dynamic Island area.
It’s also a quick way to make case study images look consistent: same device, same angle, different screens. For a fuller case study, combine it with a laptop or tablet mockup showing the desktop version.
Use it for
- An app screen
- A landing page
- A website on mobile
This is a free file from a designer on Dribbble. When you click download you’ll land on their page to grab it.
What’s inside the iPad and iPhone Mockup PSD
Main things you can change in Photoshop:
- Screen design, placed through the smart object
- Shadow under the device
- Background colour
- Device colour, where the file includes it
Editing the iPad and iPhone Mockup, step by step
- 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.
- Drop your artwork in, fit it to the canvas, save and close. The mockup updates by itself.
- Save a JPG for clients and social media, and keep the PSD for later changes.
Another tip: turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
Where the iPad and iPhone 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 Instagram story design and let the client pick.
- Show a website on mobile on your online shop or product page.
Quick notes on this mockup
- 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 smart object size before you design, so your artwork fits without stretching.
Need a different angle? The iphone mockups category has plenty more free PSD files.
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 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.
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.
