Skip to content

iPhone X Perspective Mockup

iPhone··PSD

iPhone X Perspective Mockup

What's inside

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

Here’s an iPhone x perspective mockup that works well for a website on mobile, a landing page and similar projects.

App designers and startup teams tend to get the most out of files like this. 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.

Credit goes to Free Mockup Zone. We link to their download page rather than re-uploading the file, so check their terms there before commercial use.

What you can edit in this iPhone X Perspective Mockup

Open it in Photoshop and you can change:

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

Add your design to the iPhone X Perspective Mockup

  1. Export your screen design as a PNG at the exact size of the screen smart object.
  2. Open the PSD in Photoshop and find the smart object layer, usually named “Your Design” or “Place Here”.
  3. Place your design, hide the sample artwork, save, and go back to the main file.
  4. Lower the glare layer if it hides small text.
  5. Export with File › Export › Export As: JPG for sharing, PNG for the web.

Worth remembering: for app store or portfolio images, crop tight around the device so the screen fills most of the frame.

Best uses for this iPhone X Perspective Mockup

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

Good to know

  • Made by Free Mockup Zone. The download size and format are listed on their page.
  • Check the smart object size before you design, so your artwork fits without stretching.
  • Check the licence on the author’s page. Personal and commercial terms differ from file to file.
  • Built for Adobe Photoshop. A recent CC version handles the smart objects best.

Scroll down for similar iphone mockups from other designers.

Questions about this mockup

Can I use this iPhone mockup for client work?

It's free to download, but the licence belongs to Free Mockup Zone. 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.

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.

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.

Why does the download open another website?

We list free files from designers around the web and link to the original page, so Free Mockup Zone gets the visit and you get the file exactly as they published it.

Advertisement