Home / How to use mockups
Open the PSD. Drop in your design. Export.
Every Mockupful file follows the same pattern: one layer holds your artwork, and everything around it makes the result look photographed. Learn the pattern once and you can use any mockup on the site.
- Time
- About 5 minutes
- You need
- Photoshop
- Cost
- Free
- LayersNormal
- Your design here
- Mockup
- Product color
- Background
What you need
Two things: an image editor that can open PSD files, and your design saved as a file. PNG, JPG, PDF and Illustrator files all work.
An editor
Adobe Photoshop is the safest choice. PSD is its native format, so perspective, blending and smart objects behave exactly as the mockup was built. Recent mockups may rely on newer Photoshop features, so if you see a warning when you open a file, update Photoshop first.
Your design
Finish the artwork in its own file first, then bring it into the mockup. Work at a generous size: a design that is too small will look soft once it is stretched across a product. For logos, a PNG with a transparent background or a vector file is the cleanest starting point.
Unzipping. You do not need extra software. Windows and macOS both open ZIP files on their own.
Download and unzip
Open any mockup page and click the download button. You will get a ZIP file. PSD files are large, so give it a moment on slower connections.
- Windows: right-click the ZIP and choose Extract All.
- Mac: double-click the ZIP.
Always extract the files before opening them. Opening a PSD from inside the ZIP can fail or lose your changes.
Inside the folder you will find one or more PSD files. Many Mockupful mockups include several, one for each view or angle of the scene. The listing on each mockup page shows how many files you get. Pick the view that suits your design, or use several to build a full presentation.
How the file is built
Open the PSD and look at the Layers panel. Most mockups are organized in the same four levels, from top to bottom. Select a layer below to see what it does.
- LayersSelect one
Smart objects
Top of the panel
This is where your artwork goes. There is one smart object for each design area: a front, a back, a label, a screen.
Look for the small icon on the thumbnail, then double-click it to open and replace the contents.
The exact names and the number of layers vary from file to file. The logic does not: your artwork goes into a smart object, and every other layer is there to make it look real.
What is a smart object? It is a layer that keeps its own file inside the PSD. Swap what is inside, save it, and Photoshop re-applies the mockup’s perspective, shadows and lighting to your new artwork automatically.
Add your design
Find the smart object at the top of the Layers panel. Its thumbnail has a small icon in the corner, and its name usually says what belongs there, such as a front, a back or a label.
- Double-click the smart object’s thumbnail. It opens in its own tab or window.
- Paste your design, or drag the file in. Move and scale it until it covers the whole area.
- Press Ctrl + S (Cmd + S on Mac), then close that window.
Back in the main mockup, your design now sits on the product with every shadow and highlight applied. If the mockup has more than one smart object, repeat the steps for each one.
Keep the canvas size. The mockup is built around the exact size of the smart object canvas. Scale your artwork to fit it instead of resizing the canvas.
Cover the edges. Let your background run slightly past the canvas edge so no thin gap shows where the design bends or turns.
Adjust colors and lighting
This step is optional, but a few small changes can make your artwork look much more at home in the scene.
Change a color
Color layers sit below the effects. Double-click a color layer’s thumbnail to open the Color Picker and choose a new color. Many of these layers use a Multiply blend, which darkens whatever is beneath them, so the result looks a little deeper than the color you chose. Try it:
The fix is simple: choose a slightly lighter color than the one you want.
Soften or remove the lighting
- Highlights: lower the opacity of the highlights layers for softer reflections and stronger colors in your artwork.
- Contrast: if the scene looks too dark or harsh for your design, hide a contrast layer with its eye icon.
- Blend modes: some effect layers use Multiply or Linear Burn. Switch between them and compare. Different artwork prefers different modes.
Experiment freely. Use Ctrl + Z to undo, or choose Save As before you start so the original PSD stays untouched. The unzipped file in your folder is always a clean copy to return to.
Export your image
When it looks right, go to File › Export › Export As and save a JPG or PNG. In older versions of Photoshop, use File › Save for Web.
| Format | Choose it for | Trade-off |
|---|---|---|
| JPG | Portfolios, social posts, client previews, email | Small files, no transparency |
| PNG | Transparent backgrounds, crisp edges and text | Larger files |
For portfolios and social media, an image around 2000 px on its long side is usually plenty. When exporting for the web, keep the Convert to sRGB option on so colors look the same in every browser.
Keep the PSD. Next time you only need to replace the smart object, and the finished mockup is ready in a minute.
Finished images can be used in private and commercial work. For the exact terms, read the license page.
No Photoshop? Use Photopea
Photopea is a free image editor that runs in your browser and opens PSD files. The workflow is nearly identical.
- Go to photopea.com and choose File › Open, then select your mockup PSD.
- Double-click the smart object layer. Its contents open in a new tab.
- Paste your design, scale it to fit, and press Ctrl + S. Close the tab to return to the mockup.
- Choose File › Export as, pick PNG or JPG, and save.
Very heavy mockups can load slowly in a browser, and some complex effects may look slightly different than they do in Photoshop. If a result looks off, try the same file in Photoshop.
What to make with mockups
A mockup shows a flat design in a believable setting, which makes it easier to judge, present and sell. These are the places designers use them most. Each link opens a category of free files.
- LogosSigns, walls and stationery
- Business cardsIdentity presentations
- T-shirtsApparel and merch
- PostersWalls and frames
- BooksCovers and spreads
- DevicesApps and websites
- PackagingBoxes, bags, bottles
- MugsGifts and print on demand
- Social mediaPosts and profiles
- BillboardsOutdoor advertising
- Urban scenesStreet and city settings
- All mockupsBrowse everything
Troubleshooting
Most problems have a quick fix. Open the one that matches what you see.
Photoshop shows a warning, or the mockup looks wrong
Your version of Photoshop is probably older than the one used to build the file. Update Photoshop, or try the same file in Photopea.
My design does not appear in the mockup
Check that you saved the smart object window before closing it, using Ctrl + S or Cmd + S. Also make sure your artwork sits inside the canvas and its layer is visible.
My design looks blurry
The source image is probably too small for the area it fills. Start from a larger file, or use a vector file such as PDF or Illustrator and scale it up inside the smart object.
The colors look different from my original
Effect layers such as shadows and highlights shift color slightly, which is part of what makes the scene look real. Lower the opacity of the highlights layers or switch an effect layer’s blend mode. When exporting, keep Convert to sRGB turned on.
The file will not open, or Photoshop reports an error
Download the ZIP again and extract all files before opening the PSD. If the file is still unreadable, a failed or interrupted download is the most likely cause.
Photoshop is slow while I edit
Mockups are large, high-resolution files. Close other heavy apps, give Photoshop a moment after each change, and turn off layers you are not editing until you are ready to export.
Still stuck? Contact us and include the link to the mockup, your Photoshop version and a short description of what happens. That is the fastest way to get a useful answer.
Frequently asked questions
Are Mockupful mockups really free?
Yes. Every mockup on Mockupful is free to download and can be used in private and commercial work.
Do I need Photoshop?
Photoshop gives the most reliable results. If you do not have it, Photopea is a free browser-based editor that can open many PSD mockups and edit their smart objects.
What is a smart object?
A smart object is a layer that holds its own separate file inside the PSD. When you replace its contents and save, Photoshop applies the mockup’s perspective, shadows and lighting to your design automatically.
Why does one mockup come with several PSD files?
Many mockups include one PSD for each view or angle of the scene. Open the one that suits your design best, or use several to build a full presentation.
Can I use the finished image for client work?
Yes. Images you create with Mockupful files can be used in portfolios, client presentations and commercial projects. Read the license page for the full terms.
Which file format should I export?
Export JPG for most uses because the files are small. Choose PNG when you need a transparent background or the sharpest possible edges.