Perspective Website Mockups
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Zippypixels
A case study header looks better on a perspective website mockup than on a white artboard, and this mockup is set up for exactly that.
Dribbble posters and product teams tend to get the most out of files like this. Quick tip: put your strongest screen in the most visible position. People judge the whole set by the first screen they see.
Stakeholders who don’t read wireframes still understand a screen on a device straight away. For a fuller case study, combine it with a laptop or tablet mockup showing the desktop version.
Use it for
- A case study header
- A UI kit preview
- Several app screens
Zippypixels created this one and hosts the download on their own site, so you always get the latest version straight from the source.
Editable options in the Perspective Website Mockups PSD
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
- Shadow under the device
How to edit this Perspective Website Mockups in Photoshop
- Export your screen design as a PNG at the exact size of the screen smart object.
- Open the file in Photoshop and double-click the smart object thumbnail in the Layers panel.
- Place your design, hide the sample artwork, save, and go back to the main file.
- Hide the reflection layer for a flatter look.
- Export a full-size image for your portfolio and a smaller one for social media.
Worth remembering: turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
Best uses for this Perspective Website Mockups
- Present a website flow in a client proposal or brand guide.
- Show a UI kit preview to a client before it goes to print or production.
- Use it as the cover image for a case study header in your portfolio.
Before you download
- Made by Zippypixels. The download size and format are listed on their page.
- Check the licence on the author’s page. Personal and commercial terms differ from file to file.
- The preview shows the angle, background and lighting you’ll get.
Need a different angle? The app screen 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 Zippypixels gets the visit and you get the file exactly as they published it.
