How to Create an iPhone Mockup: Step-by-Step Tutorial

iPhone mockups make your iOS app look professional. Instead of a flat screenshot, you show your app in context—on a real device that users can picture in their hands.

Here's exactly how to create one.

What You'll Need

1. A screenshot of your app - High resolution, clean UI

2. A mockup tool - Screenhance, Figma, or similar

3. 2 minutes - That's all it takes

Step-by-Step: Creating an iPhone Mockup

Step 1: Take a Clean Screenshot

On your iPhone or simulator:

From a real iPhone:

• Press Side button + Volume Up simultaneously
• Screenshot saves to Photos

From Xcode Simulator:

• Cmd + S to save screenshot
• Or File → Save Screen

From browser (responsive design):

• Open DevTools (F12)
• Select iPhone device preset
• Capture screenshot

Pro tips:

• Use a clean home screen
• Hide the status bar if needed (Settings → General → Autofill Passwords, etc.)
• Show realistic data, not "Lorem ipsum"

Step 2: Choose an iPhone Model

Match the frame to your audience:

| Model | Best For |

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

| iPhone 15 Pro | Latest and greatest, premium feel |

| iPhone 15 | Standard modern iPhone |

| iPhone 14 | Still current, wider compatibility |

| iPhone SE | Budget market, smaller screens |

Rule of thumb: Use the newest model unless you're targeting a specific audience. Color options:

• Space Black - Premium, modern
• Silver/White - Clean, minimal
• Gold - Warm, elegant
• Blue/Purple - Stand out

Step 3: Upload to a Mockup Tool

Using Screenhance:

1. Go to app.screenhance.com

2. Upload your screenshot

3. Select "iPhone" as device type

4. Choose your model

Using Figma:

1. Find an iPhone mockup template (many free ones available)

2. Import your screenshot

3. Place into the screen frame

4. Resize to fit

Step 4: Choose a Background

Background options:

Gradients (most popular):

• Subtle color transitions
• Match your app's color scheme
• Avoid harsh neon gradients

Solid colors:

• Clean and simple
• Good for minimalist brands
• White, black, or brand colors

Custom backgrounds:

• Your own branded imagery
• Abstract patterns
• Photography (use sparingly)

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

Step 5: Adjust Settings

Fine-tune your mockup:

• Padding: More space around the phone = cleaner look
• Shadow: Subtle drop shadow adds depth
• Angle: Slight rotation can look dynamic (optional)
• Scale: Ensure text in your app is readable

Step 6: Export

Export settings for different uses:

| Use Case | Format | Resolution |

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

| App Store | PNG | Exact dimensions required |

| Website | WebP or PNG | 2x display size |

| Social media | PNG | 2x platform dimensions |

| Print | PNG | 300 DPI |

iPhone Mockup Best Practices

Do:

• Use current iPhone models (iPhone 14/15)
• Match frame color to your app's aesthetic
• Keep backgrounds simple
• Export at high resolution (2x minimum)
• Maintain consistent styling across mockups

Don't:

• Use outdated iPhone models (iPhone X, etc.)
• Add busy backgrounds that distract
• Forget to hide personal info in screenshots
• Export at low resolution
• Mix different iPhone models inconsistently

Creating Multiple iPhone Mockups

For App Store galleries or marketing:

Maintain consistency:

• Same iPhone model throughout
• Same background style
• Same padding and shadows
• Same export settings

Tell a story:

• Screen 1: Main value proposition
• Screen 2-3: Key features
• Screen 4-5: Secondary features or social proof

iPhone Mockup Dimensions

If you need exact pixel dimensions:

| iPhone | Screen Resolution | Mockup Size (with frame) |

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

| iPhone 15 Pro Max | 1290 x 2796 | ~1400 x 2900 |

| iPhone 15 Pro | 1179 x 2556 | ~1300 x 2700 |

| iPhone 15 | 1179 x 2556 | ~1300 x 2700 |

| iPhone 14 | 1170 x 2532 | ~1280 x 2650 |

These vary slightly by mockup tool.

Related Reading

• How to Create App Store Screenshots That Convert - App Store optimization
• How to Make a Mockup: Complete Beginner's Guide - General mockup guide
• Screenshot Size Guide: Dimensions for Every Platform - All platform dimensions
• What Is a Mockup? Types, Uses, and Examples - Mockup fundamentals

Frequently Asked Questions

How do I create an iPhone mockup for free?

Use free tiers of mockup generators like Screenhance, or use Figma with free mockup templates. These tools let you upload a screenshot and place it in an iPhone frame with a background—no design skills required. Most free tiers have some limitations on exports.

What size should an iPhone mockup be?

For App Store, use Apple's exact requirements (1290 x 2796 for iPhone 15 Pro Max). For web/social use, the mockup itself can vary—just ensure you export at 2x resolution for sharp display on retina screens.

What is the best iPhone model to use for mockups?

Use iPhone 15 Pro or iPhone 15 for the most current look. These represent the latest design and feel premium. Avoid older models like iPhone X or iPhone 8 as they make your app look dated.

Can I create iPhone mockups without Photoshop?

Yes, you don't need Photoshop for iPhone mockups. Dedicated mockup tools like Screenhance let you create professional mockups in seconds—just upload your screenshot, pick a frame, and export. No design skills needed.

How do I make my iPhone mockup look realistic?

Use subtle shadows, appropriate padding, and backgrounds that don't compete with your app. Match the iPhone color to your app's aesthetic. Most importantly, start with a clean, high-resolution screenshot with realistic data.

Conclusion

Creating iPhone mockups is simple: screenshot, frame, background, export. The whole process takes under 2 minutes with the right tools.

Professional mockups make your app look credible and help users visualize using it. That visualization drives downloads.

Stop posting flat screenshots. Put your app in context with a proper iPhone mockup.