Skip to content

iPhone Mockups

iPhone··PSD

iPhone Mockups

What's inside

  • Applications Photoshop
  • File Types PSD
  • License Free (see author's terms)
  • Author Dribbble

A landing page looks better on an iPhone mockup than on a white artboard, and this mockup is set up for exactly that.

It’s a handy file for startup teams and UI freelancers. Tip: 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.

Good for

  • A landing page
  • An Instagram story design
  • A website on mobile

The file is made by a designer on Dribbble. The download button takes you to their page, where you get the original file and the licence details.

What’s inside the iPhone Mockups PSD

Main things you can change in Photoshop:

  • Screen design, placed through the smart object
  • Screen glare and reflection layers
  • Background colour

How to edit this iPhone Mockups in Photoshop

  1. Pick one strong screen. It reads better than a crowded one.
  2. In the Layers panel, find the layer with the small smart object icon and double-click it.
  3. Place your design, hide the sample artwork, save, and go back to the main file.
  4. Hide the reflection layer for a flatter look.
  5. Save a JPG for clients and social media, and keep the PSD for later changes.

Worth remembering: turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.

Where the iPhone Mockups works best

  • Present a landing page in a client proposal or brand guide.
  • Show a website on mobile to a client before it goes to print or production.
  • Make two or three colour versions of an app screen and let the client pick.

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 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.

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.

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 a designer on Dribbble gets the visit and you get the file exactly as they published it.

Advertisement