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:

| Content Type | Best Frame |

|-------------|-----------|

| Web app / SaaS | Browser or MacBook |

| iOS app | iPhone |

| Android app | Samsung or Pixel |

| Tablet app | iPad |

| Cross-platform | Multiple devices |

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 mockup tool

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

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 2025 - 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.