Skip to content

Perspective App Screens Mockup

Website & App Screen··PSD

Perspective App Screens Mockup

What's inside

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

This perspective app screens mockup is one of the simpler ways to present several app screens or a UI kit preview convincingly.

It’s a handy file for UI/UX designers and product teams. Quick tip: put your strongest screen in the most visible position. People judge the whole set by the first screen they see.

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.

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

Perspective App Screens Mockup: editable parts

Main things you can change in Photoshop:

  • Screen design, placed through the smart object
  • Device colour, where the file includes it
  • Screen glare and reflection layers

How to use the Perspective App Screens 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. Save a JPG for clients and social media, and keep the PSD for later changes.

Screenshots with a white background can blend into the bezel; a thin shadow or darker UI reads better.

Where the Perspective App Screens Mockup works best

  • Make two or three colour versions of several app screens and let the client pick.
  • Share a UI kit preview on Instagram, Behance or Dribbble with a real-looking preview.
  • Show a case study header on your online shop or product page.

Good to know

  • Made by GraphicsFuel. 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.

Browse more free app screen mockups on Artistic Orbit, with new files added every day.

Questions about this mockup

Is it free for commercial use?

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

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

Advertisement