Web Mockup Creator
What's inside
- Applications Photoshop
- File Types PSD
- License Free (see author's terms)
- Author Graphicgata
Need to show a website flow to a client? This web creator mockup does the job in a few minutes.
It’s a handy file for UI/UX designers and product teams. A small tip: turn the screen glare layer down if your UI has small type. Glare looks nice but hides detail.
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.
This is a free file from Graphicgata. When you click download you’ll land on their page to grab it.
What’s inside the Web Mockup Creator PSD
Main things you can change in Photoshop:
- Screen design, placed through the smart object
- Shadow under the device
- Device colour, where the file includes it
Editing the Web Mockup Creator, step by step
- Pick one strong screen. It reads better than a crowded one.
- Open the PSD in Photoshop and find the smart object layer, usually named “Your Design” or “Place Here”.
- Paste your design, resize it to fill the area, then save (Ctrl/Cmd + S) and close that tab.
- 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.
Ways to use this Web Mockup Creator
- Show several app screens on your online shop or product page.
- Present a website flow in a client proposal or brand guide.
- Make two or three colour versions of a case study header and let the client pick.
Before you download
- Made by Graphicgata. 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.
- Built for Adobe Photoshop. A recent CC version handles the smart objects best.
- The preview shows the angle, background and lighting you’ll get.
Scroll down for similar app screen mockups from other designers.
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.
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.
Can I remove the screen reflection?
Usually yes. Reflections and glare are normally a separate layer that you can hide or lower in opacity.
