What is a mockup?
A mockup is a realistic picture of a design placed on the thing it is made for: a mug, a phone screen, a poster at a bus stop. It lets you see, show and judge a design before anything is printed, built or shipped.
This guide covers how mockups differ from wireframes and prototypes, the main types, what they are used for, and how to put your own artwork into a PSD mockup in a few minutes.
Flat artworkMockup
A design, shown in the real world
Designers work on flat surfaces: an artboard in Illustrator, a canvas in Photoshop, a frame in Figma. A flat file hides a lot. It cannot tell you how a label bends around a bottle, whether the small print on a business card is readable at 3.5 × 2 in, or how a logo feels on a wall three meters wide.
A mockup closes that gap. It starts from a photograph or 3D render of a real object and leaves one area open for artwork. You place your design in that area, and the scene adds its own perspective, lighting and shadows on top.
The idea is older than the software. Before computers, a mockup was a physical model: print the design, cut it out, fold and glue it. Today the word usually means a digital template, most often a layered PSD file with a smart object, although mockups for apps and websites are also built in tools like Figma.
Mockup, wireframe and prototype
The three words get mixed up because they often appear in the same project. They answer different questions, and each one belongs at a different moment.
| Wireframe | Mockup | Prototype | |
|---|---|---|---|
| Question | Where does everything go? | What will it look like? | How will it work? |
| Detail | Low. Boxes, labels and placeholder text. | High. Final colors, type and imagery. | Varies, from clickable sketches to near-final screens. |
| Interactive | No | No | Yes |
| When | Early, while structure and flow are still open. | Mid to late, for approval and presentation. | Mid, for testing with real users. |
| Output | Sketch or grayscale layout | Static image such as PNG, JPG or PDF | Clickable demo |
Screen designers also say mockup for a polished, static picture of an interface. The product mockups on Mockupful come one step later. You already have a finished design and want to show it on a device, a package or a poster.
Types of mockups
Mockups are grouped by the kind of object they show. Pick the family that matches where your design will really live.
Branding and print
Identity and editorial work, from a single card to a full stationery set.
Outdoor and urban
Billboards, banners, posters, signs and street scenes for campaigns and signage.
Good places to start
- Glossy Ceramic Mug MockupMug · 3 PSD files
- iPhone Duo MockupDevice · 5 PSD files
- Hand Holding Hardcover Book MockupBook · 4 PSD files
- Instagram Post MockupSocial media · 2 PSD files
- Soccer Jersey MockupT-shirt · 1 PSD file
- Roadside Billboard MockupUrban · Billboard
What mockups are used for
Portfolios and case studies
A flat logo on white tells people a project exists. The same logo on packaging, stationery and a shop sign shows what the work did. Case studies built on mockups look finished, and you can produce them the day a project closes.
Client presentations
Clients react to what they can picture. Seeing their name on a believable bag gets sharper feedback than a PDF with a rough layout, and it cuts the follow-up request to see it on something real.
Checking your own work
Zoomed out, small details disappear. A mockup shows whether the tagline stays readable, whether the margins feel tight and whether the contrast holds in realistic light. Put an early draft into the smart object and refresh it every time you save.
Product pages and shops
Before a product exists, a clean mockup can act as the listing image. It keeps a shop or a print-on-demand page looking complete until real photos are ready.
Ads and social posts
Launch teasers, announcements and campaign visuals all need a picture of the product. A mockup gives you one at the speed of the design itself.
How a PSD mockup works
Most downloadable mockups are Photoshop (PSD) files built around a smart object. A smart object is a layer that stores your artwork separately from the scene, so the scene can reshape it without damaging the original.
- Highlights and reflectionsGroup
- ShadowsGroup
- Your design hereSmart object
- MugLayer
- Background colorLayer
Download and open
Download a PSD from the library and open it in Photoshop. The Layers panel shows the scene split into groups.
Find the smart object
Look for the layer with a small page icon on its thumbnail. Its name usually says something like “Your design here”, but names differ from file to file.
Place your artwork
Double-click the thumbnail. A new tab opens with a blank canvas shaped like the surface. Paste or place your design, scale it to cover the whole canvas, then save with Ctrl+S or Cmd+S.
Check and export
Switch back to the main file. Your design now sits in the scene with the right perspective and shadows. Export a PNG or JPG sized for where it will be used.
Before step three, check the canvas size and ratio. Artwork with the same proportions as the canvas will not stretch or crop.
What makes a mockup worth using
Proportions you can match
When the smart object is 2550 × 1050 px, artwork with the same ratio fills it exactly. Any other ratio crops or stretches at the edges.
Generous resolution
A large render can be cropped for a social post, a portfolio cover or a printed page without going soft.
Believable light
Contact shadows, soft reflections and one consistent light direction make a design look printed, not pasted.
Tidy, named layers
Grouped lighting layers and a clearly named smart object save time on every project.
Color controls
A background or product color layer lets you match a brand without repainting the scene.
Clear licensing
Mockupful files can be used in private and commercial work. The license page has the full terms.
Common mistakes
- Stretching the artwork
- Forcing a wide design into a square canvas distorts type and logos. Start from the canvas size shown inside the smart object.
- Using small files
- Artwork smaller than the canvas gets scaled up and turns blurry. Export from your design tool at full size.
- Picking a scene that fights the design
- A busy background or strong color cast pulls attention away from the work. Choose a scene that supports it.
- Promising what cannot be made
- Foil, embossing and special papers look great in a render. Show them only if the project will actually include them.
- Reusing one mockup everywhere
- The same mug in every portfolio piece makes projects blur together. Vary the scene to fit each brand.
Questions people ask
What is a mockup in simple terms?
A realistic image of your design on a real-looking object or screen, made before the real thing exists.
Is a mockup the same as a prototype?
No. A mockup is a static picture that shows how something will look. A prototype is interactive and shows how it will work. A wireframe comes before both and shows structure only.
Do I need Photoshop to use a PSD mockup?
Photoshop gives the most reliable results because it fully supports smart objects. Some other editors open PSD files, but smart object editing can be limited or missing, so test with a free mockup before a client project.
Can I use free mockups in client work?
Mockupful mockups can be used in private and commercial work. Read the license page for the complete terms before you publish.
What resolution should my artwork be?
Match the pixel size of the smart object when you can. For print-ready artwork, 300 DPI is the usual target. An image exported for a website can use a lower resolution so the page loads quickly.
Why does my design look stretched or blurry?
Stretching means the ratio of your artwork differs from the smart object canvas. Blur usually means the artwork is smaller than the canvas and was scaled up. Start from the canvas size you see when you open the smart object.
Put your next design on something real.
Browse free PSD mockups for devices, branding, packaging and outdoor scenes, ready for your artwork.