How to Make Professional App Screenshots with Device Frames

A raw screenshot of your app is functional. A screenshot wrapped in an iPhone frame, floating on a gradient background? That's marketing.

Device frames transform flat captures into aspirational images. They help users visualize your app on their device. They make your landing page look polished. They stop the scroll on social media.

Here's how to create them—and when you should (and shouldn't) use them.

Tools like Matte make this simple for videos (and can export stills too), but there are also great options for screenshots specifically. Let's break it down.

What Are Device Frame Screenshots?

Device frame screenshots (also called device mockups) place your app's UI inside a realistic rendering of the device it runs on. Your iPhone app screenshot sits inside an iPhone 15 Pro frame. Your Mac app appears on a MacBook display.

The result looks like a product photo, not a screenshot. It's the difference between showing someone a JPEG and showing them a lifestyle image.

When to Use Device Frames

Device frames shine in specific contexts:

✅ Landing Pages and Websites

Your app's homepage should look premium. Device frames add depth and visual interest. A hero section with an iPhone floating on a gradient background immediately signals "this is a real product worth using."

✅ Social Media Posts

On Twitter/X, LinkedIn, and Instagram, device frames stop the scroll. A raw screenshot looks like documentation. A framed screenshot looks like an announcement worth reading.

✅ Blog Posts and Tutorials

When writing about your app, device frames make feature explanations more engaging. They break up walls of text and give readers visual anchors.

✅ Press Kits

Journalists need images they can use immediately. Device frame screenshots are publication-ready—they can drop them into articles without any editing.

✅ Presentations and Pitch Decks

When presenting your app to investors, clients, or at conferences, device frames look polished on slides. Raw screenshots look like developer documentation.

When NOT to Use Device Frames

Apple's reasoning: users already know what an iPhone looks like. App Store screenshots should maximize screen real estate for your actual UI, not decorative frames.

Other contexts where raw screenshots work better:

• Bug reports—you want clinical accuracy, not marketing
• Technical documentation—frames add visual noise
• Before/after comparisons—frames distract from the UI changes
• Accessibility audits—focus on the interface itself

How to Create Device Frame Screenshots

Method 1: Matte (Fastest)

Matte is built for this. While it's primarily a video recording tool, the Snapshot feature exports any frame as a polished static image—complete with device frames and backgrounds.

The workflow:

1. Open your app (iOS Simulator, Mac app, or any window)
2. Select the window in Matte
3. Choose your device frame (iPhone 15 Pro, iPhone 16, etc.)
4. Pick a background (gradient, solid color, transparent)
5. Click the Snapshot button

One click. Professional output. No Photoshop layers to manage.

Method 2: Figma or Sketch

Design tools give you full control but require manual work:

1. Find a device frame asset (search "iPhone mockup Figma")
2. Import your screenshot
3. Position it behind the frame layer
4. Mask to fit the screen area
5. Add your background
6. Export

This takes 5-10 minutes per screenshot. Fine for one-offs, tedious for batch work.

Method 3: Online Mockup Tools

Tools like Mockuphone, Smartmockups, and Rotato offer browser-based mockup generation:

• Pros: No software to install, many device options
• Cons: Upload screenshots to third-party servers, watermarks on free tiers, limited customization

These work for occasional use, but the upload-wait-download cycle gets old fast.

Method 4: Photoshop / Smart Objects

The professional design approach:

1. Download a PSD device mockup template
2. Double-click the Smart Object layer
3. Paste your screenshot
4. Save the Smart Object
5. Export the main file

Maximum control, maximum effort. Makes sense if you're already a Photoshop power user.

Choosing the Right Background

The background behind your device frame matters more than you think. It sets the emotional tone of the image.

Gradient Backgrounds

Gradients add energy and visual interest. They're the default choice for app marketing because they feel dynamic without being distracting.

• Blue → Purple: Trust, premium feel (great for productivity apps)
• Orange → Pink: Energy, creativity (great for social/creative apps)
• Green → Teal: Growth, health (great for fitness/wellness apps)
• Dark gradients: Sophistication, power (great for pro tools)

Solid Color Backgrounds

Clean and minimal. Works well when your app's UI is colorful—you don't want the background competing for attention.

Transparent Backgrounds

Export as PNG with transparency when you need to composite the device onto another design—website headers, presentation slides, marketing collages.

Photo Backgrounds

Lifestyle photography (desk setups, hands holding devices) works for Instagram and ads but can look cheesy if overdone. Use sparingly.

Device Frame Best Practices

1. Match Device to Audience

Show iPhone 15 Pro frames if your app targets premium users. Show standard iPhone frames for broader audiences.

2. Keep Frames Consistent

If your landing page shows an iPhone 15 Pro in Space Black, use that same frame everywhere. Mixed devices look sloppy.

3. Mind the Angles

Straight-on frames are versatile. Angled frames add dynamism but can make UI harder to read. Use angled views for hero images, straight views for feature explanations.

4. Size for the Medium

Export at appropriate sizes:

• Twitter/X: 1200×675 (16:9)
• Instagram Square: 1080×1080
• LinkedIn: 1200×627
• Website: 2x resolution for Retina (e.g., 1600×1200 for an 800×600 display size)

5. Don't Overframe

One device per image is usually enough. Multiple devices can show cross-platform support, but the layout needs to be intentional—not just devices scattered randomly.

Screenshot Checklist Before Framing

Your screenshot needs to be perfect before you add a frame. The frame amplifies quality—including flaws.

• ✅ Status bar shows 9:41 (Apple's canonical time) or a realistic time
• ✅ Full signal bars, WiFi, battery
• ✅ No debug labels or placeholder text
• ✅ Realistic sample data (not "John Doe" or "Lorem ipsum")
• ✅ App is in a compelling state (show value, not empty states)
• ✅ Light/dark mode matches your marketing aesthetic

Comparison: Device Frame Tools

FAQ

Can I use device frames on the App Store?

No. Apple explicitly prohibits device frames, hands, or any hardware imagery in App Store screenshots. Your screenshots must show only the app UI. Violating this will get your submission rejected.

What about Google Play?

Google is more lenient—device frames are allowed on Play Store listings. But you still want to maximize UI visibility, so consider whether frames actually help your listing.

Which iPhone frame should I use?

Default to the latest Pro model (currently iPhone 15 Pro). It's recognizable, premium, and won't look dated for a few years.

How do I create Mac app mockups?

Same process—capture your Mac app window, place it in a MacBook or iMac frame using a dedicated mockup tool like Rotato or Figma templates.

Can Matte export screenshots from videos?

Yes. Record your app demo, then use the Snapshot button to export any frame as a static image with device frame and background applied.

Conclusion

Device frame screenshots are essential marketing assets. They transform functional captures into aspirational images that sell your app's experience, not just its features.

Use them on your website, social media, press kit, and pitch deck. Skip them for App Store submissions (where they're prohibited) and technical documentation.

The tools have gotten remarkably easy. What used to require Photoshop skills now takes a single click. There's no excuse for shipping marketing without polish.