How to make a mockup: three ways (online, PSD, Figma)
To make a mockup, pick a scene that shows where your design will live, put your design into its placeholder and export the result. There are three ways: drop the design into an online mockup generator, edit a PSD template in Photoshop, or run a mockup plugin in Figma. Building a scene from scratch is a fourth, slower option.
Which way to make a mockup should you choose?
Choose by the tool you already work in and by how much control you need. An online generator is the fastest start, a PSD gives you every layer, and a Figma plugin keeps the mockup next to the design it shows.
- Online generator: nothing to install, works on any computer, done in a few minutes. Good for a quick presentation, a social post or a store listing.
- PSD template: needs Photoshop or a compatible editor. You get the smart objects, shadow layers and full-size render, and you can change anything by hand.
- Figma plugin: for UI and web designers. Select a frame, and the mockup lands on the canvas next to it.
- From scratch: a photo or a 3D model you prepare yourself. Worth it only when no existing scene fits the product.
The basics behind all four, such as what a placeholder is and why the light matters, are in what is a mockup.
How do you make a mockup online?
Open a mockup generator in your browser, choose a scene, drop your image onto it and export. There is no file to download first, so the whole job takes a few minutes and works the same on a Mac or a PC.
- Open the online mockup generator and find a scene. On ls.graphics you search the library, narrow it by category, or show only the free scenes.
- Drag your design onto the screen or the label, or paste it from the clipboard.
- Change the color of the object, the background or the light. Some print scenes switch between EU and US sizes in one click.
- Export a PNG for the web, a layered PSD if you want to keep working in Photoshop, or an MP4 or WebM if you put a video on the screen.
The first-mockup guide shows each step with screenshots.
How do you make a mockup from a PSD template?
Open the PSD, double-click the smart object marked for your design, paste the design inside, save and close it. Photoshop applies the scene's perspective, folds and shadows to whatever you place there, so a flat file comes out looking printed on the object.
Two things decide the quality. First, export your design at the pixel size of the smart object's canvas (Image > Image Size inside it), or larger; a smaller file gets stretched and looks soft. Second, leave the shadow and highlight layers above your design; they are what make it look real. The full walkthrough, with fixes for a design that does not show up, is in how to use a PSD mockup in Photoshop, and the layer type itself is explained in what is a smart object.
No Photoshop? Photopea and Affinity open the same files.
How do you make a mockup in Figma?
Install a mockup plugin from Figma Community, select the frame you want to show, open the plugin and click a scene. The rendered mockup is pasted next to your frame, so the design and its presentation stay in one file.
With the ls.graphics Mockup plugin for Figma it goes like this:
- Select a frame, for example an app screen at the device's resolution.
- Run the plugin and search for the device, such as "iPhone".
- Click a scene. The render appears next to the frame, and one click reopens it for edits when the design changes.
The plugin is free to install; the full library of static, 3D and animated scenes comes with Pro. Figma's own help explains how to run plugins in a file.
How do you make a mockup from scratch?
Start from a clean photo or a 3D render of the blank object, mark the area where the design goes, and make that area a smart object you can bend to the surface. Then rebuild the light on top of it. This is how template makers work, and it takes hours, not minutes.
- Get the base: shoot the object in even light, or model and render it in a 3D app such as Blender. Leave the design area plain.
- In Photoshop, draw a rectangle over that area and convert it to a smart object (Layer > Smart Objects > Convert to Smart Object).
- Fit it to the surface with Edit > Transform > Warp or Perspective.
- Add the shading: a copy of the base photo above the design, set to Multiply for shadows and Screen for highlights, clipped to the design area.
- Test it with a few different designs, light and dark, before you rely on it.
Our scenes start as 3D renders rather than photos, which is why the online generator can switch an object's color or its EU and US size in one click, with no new photo shoot.
How do you make a mockup look realistic?
Realism comes from three things: a sharp design file, the scene's own light falling on the design, and an object that matches the real product. Most fake-looking mockups fail on one of them.
- Resolution: give the scene at least the pixel size its placeholder expects. For screens, use the device's full resolution; the sizes per device are in App Store and Google Play screenshot sizes.
- Light: keep shadows, reflections and glare above the design. A logo that sits on top of the folds looks pasted on.
- Fit: match proportions and print size. A US Letter poster in an A-size frame leaves gaps or crops your artwork.
- Color: work in sRGB for screens and check that the object color matches the product you sell.
Mockup examples to start from
Six scenes from the ls.graphics library, each a different kind of surface:
- An iPhone floating above a dark rock, for app screens
- A tote bag on a sports court, for merch and event branding
- A long-sleeve shirt on a bar, where the print follows the folds
- A US billboard on a pole, for outdoor ads
- A lightbox sign on a post, for storefront logos
- A stack of business cards, free to download
More apparel scenes are in the T-shirt mockups category.
FAQ
How can I create a free mockup?
Use a free scene in an online generator or download a free PSD. ls.graphics has 300+ free mockups, free for personal and commercial projects; you sign in to download them or to edit them online.
What is the best tool for creating mockups?
The one that fits your workflow: an online generator if you want speed, Photoshop with a PSD template if you want control over every layer, and a Figma plugin if your designs already live in Figma. Several tools are compared in best mockup generators.
Can ChatGPT create mockups?
Image models can draw a picture of a product with a design on it, but they redraw your artwork, so text, logos and colors often change. For a mockup that shows your exact design, put the real file into a template. More on this in why AI mockups can't replace professional mockups.
Can Canva create mockups?
Yes, Canva has a mockups app that places an image onto product templates inside a Canva design. For 3D-rendered scenes, or a layered PSD you can keep editing in Photoshop, use a dedicated mockup generator.