How to Make a Mockup: Complete Beginner's Guide

Making a mockup is easier than you think. You don't need design skills or expensive software.

Here's everything you need to know.

What You'll Need

To create a mockup, you need:

1. A screenshot - The image you want to showcase

2. A mockup tool - Software to add frames and backgrounds

3. 5 minutes - That's really all it takes

That's it. No Photoshop subscription. No design degree.

How to Make a Mockup Step by Step

Step 1: Take a Clean Screenshot

Before making your mockup, get a good source image:

• Hide distractions - Close unnecessary tabs, hide bookmarks bar
• Use realistic data - Avoid "Lorem ipsum" and placeholder text
• Capture the right area - Focus on what matters, not your entire screen
• Use high resolution - Bigger is better (you can always scale down)

Pro tip: Use your browser's device toolbar (F12 → toggle device) to capture at specific dimensions.

Step 2: Choose Your Mockup Tool

You have several options:

Dedicated mockup generators (fastest):

• Upload screenshot
• Pick device frame
• Choose background
• Export

Figma (more control):

• Find a mockup template
• Place your screenshot
• Adjust as needed
• Export

Photoshop (maximum flexibility):

• Open a mockup PSD
• Replace smart object
• Customize everything
• Export

For most people, a dedicated mockup generator is the fastest path to professional results.

Step 3: Select a Device Frame

Match the frame to your content:

For startups, a startup screenshot tool provides device frames and templates tailored for marketing and fundraising.

Use current-generation devices. An iPhone 15 frame looks modern; an iPhone X frame looks dated.

Step 4: Pick a Background

Your background options:

• Gradients - Most popular, adds visual interest
• Solid colors - Clean and simple
• Custom images - Your own branded backgrounds
• Transparent - For placing on existing designs

What works best: Subtle gradients that complement your screenshot without competing for attention.

Step 5: Adjust Settings

Fine-tune your mockup:

• Padding - Space around the device (more = cleaner look)
• Shadow - Adds depth (subtle is better)
• Rotation - Slight angles can look dynamic
• Scale - Make sure important details are visible

Step 6: Export Your Mockup

Export settings matter:

• Format: PNG for screenshots with text, JPEG for photos
• Resolution: 2x minimum for retina displays
• Size: Match your intended use (social media, website, etc.)

How to Make Different Types of Mockups

How to Make an iPhone Mockup

1. Screenshot your iOS app or mobile website

2. Upload to a mockup tool

3. Select iPhone 15 Pro or similar frame

4. Choose a background color/gradient

5. Export at 2x resolution

How to Make a MacBook Mockup

1. Screenshot your web app or website

2. Upload to a mockup tool

3. Select MacBook Pro or Air frame

4. Add a gradient background

5. Export for your intended platform

How to Make a Browser Mockup

1. Screenshot your website (hide browser chrome)

2. Upload to a screenshot mockup generator

3. Select Chrome, Safari, or generic browser frame

4. Choose light or dark mode frame

5. Export at appropriate size

How to Make a Multi-Device Mockup

1. Prepare screenshots for each device

2. Upload all images

3. Select a multi-device layout

4. Ensure consistent styling across devices

5. Export the composition

Common Mockup Mistakes to Avoid

Low resolution exports - Always export at 2x or higher Outdated device frames - Use current-generation devices Busy backgrounds - Keep backgrounds subtle Inconsistent styling - Match frames and colors across mockups Too much content - Focus on one feature per mockup

The 60-Second Mockup Workflow

If a mockup takes longer than a minute, you're either doing something exotic or using the wrong tool. Here's the rhythm that produces a publish-ready image in under sixty seconds, with timing.

• 0:00–0:10 — Capture. Open the page you want to showcase, press Cmd+Shift+4 (Mac) or Win+Shift+S (Windows), and drag over the area. If you're capturing a web app, drop into DevTools first and set a fixed viewport — 1440x900 for desktop, 390x844 for an iPhone view. Ten seconds.
• 0:10–0:20 — Upload. Drag the screenshot into a free mockup generator. The upload itself takes two seconds on a normal connection; the buffer is for your browser tab switching.
• 0:20–0:35 — Frame. Pick a device that matches the screenshot's aspect ratio. Don't squeeze a 1440x900 desktop capture into an iPhone — it looks wrong even if it technically works. Fifteen seconds, mostly spent scrolling the frame list.
• 0:35–0:50 — Background. Pick a gradient. Two gradients, max — if you spend more than fifteen seconds on background selection, you're procrastinating, not designing. Default to a soft brand-adjacent gradient and move on.
• 0:50–0:60 — Export. PNG, 2x resolution, download. Done.

The first time it'll take you ninety seconds because you're learning where the buttons are. By the fifth mockup you'll be under forty.

Common Beginner Mistakes and How to Recognise Them in Your Own Work

The mistakes below don't show up as errors — they show up as a vague sense that the mockup looks "off." Train yourself to spot them.

The aspect-ratio mismatch. Your screenshot is 16:9 and you crammed it into a 9:19.5 iPhone frame. The tool stretched or letterboxed it. If your viewers see black bars or distorted text, this is what happened. Fix: match capture dimensions to frame intent before uploading. The over-rotated frame. A 30-degree tilt looks dramatic. It also makes the screenshot unreadable, which defeats the entire point of showing the screenshot. If a stranger can't tell what app they're looking at, dial the rotation down to 0–8 degrees. The clashing gradient. Your app is blue. Your gradient is blue. The screenshot vanishes into the background. The fix is contrast: if the dominant UI colour is X, pick a gradient that complements (warm vs cool, light vs dark), don't echo it. The default everything. Same gradient as everyone else's launch, same iPhone 15, same 5% rotation. The mockup is technically fine but forgettable. Pick one element to make distinctly yours — a brand-coloured background, an unusual angle, an environmental shot. Just one. The Lorem ipsum giveaway. The mockup is gorgeous; the screenshot says "Item Name 1 / Item Name 2 / Lorem ipsum dolor." Investors notice this in two seconds and discount everything that follows. The screenshot is the part viewers actually read; the frame is wallpaper.

Related Reading

• What Is a Mockup? Types, Uses, and Examples - Understanding mockups
• Figma vs Photoshop vs Mockup Generators - Choosing the right tool
• 7 Screenshot Mistakes That Make Your Product Look Amateur - What to avoid
• Best Free Mockup Tools in 2026 - Free options

Frequently Asked Questions

How do I make a mockup for free?

You can make mockups for free using tools like Screenhance (free tier), Figma (free plan), or Canva. These tools let you add device frames and backgrounds to your screenshots without any cost. The free tiers typically have some limitations on exports or features.

How long does it take to make a mockup?

With a dedicated mockup generator, you can create a professional mockup in under 30 seconds. Upload your screenshot, select a device frame, choose a background, and export. More complex mockups in Figma or Photoshop take 5-15 minutes.

Do I need design skills to make mockups?

No, you don't need design skills to make professional mockups. Dedicated mockup tools handle the design work for you. You just upload your screenshot and make simple choices about frames and backgrounds. The tool does the heavy lifting.

What size should my mockup be?

It depends on where you'll use it. For websites, 1920x1080 or larger works well. For social media, check platform requirements (Twitter: 1200x675, Instagram: 1080x1080). Always export at 2x resolution for sharp display on retina screens.

What's the best file format for mockups?

Use PNG for mockups with text, UI elements, or sharp edges. PNG preserves quality without compression artifacts. Use JPEG only for photo-heavy mockups where file size is a concern. WebP offers the best of both for web use.

Conclusion

Making a mockup is straightforward: take a screenshot, add a device frame, choose a background, and export. The whole process takes under a minute with the right tools.

Don't overcomplicate it. Professional mockups are about clean presentation, not complex design work.

Start with one mockup. Once you see how easy it is, you'll never post a raw screenshot again.