How to Add Device Frames & Mockups to Screenshots on Mac

Why device frames make screenshots look better

A raw screenshot is a flat rectangle of pixels with no visual context. Wrap that same screenshot in a MacBook frame, an iPhone bezel, or a browser chrome, and it immediately communicates what the viewer is looking at. The device frame provides spatial context — it says "this is a mobile app" or "this is a website" without any caption needed.

Device-framed screenshots are used everywhere: pitch decks, landing pages, App Store listings, blog posts, investor updates, social media, and documentation. The difference between a raw screenshot and a framed one is the difference between a draft and a finished product.

Method 1: Apple Frames shortcut (free, built-in)

Apple's Shortcuts app includes a community shortcut called "Apple Frames" that wraps your screenshots in official Apple device frames. It supports iPhone, iPad, Mac, and Apple Watch.

1. Open the Shortcuts app on your Mac
2. Search the Shortcuts Gallery for "Apple Frames" (originally by Federico Viticci)
3. Add the shortcut to your library
4. Run it and select one or more screenshots
5. The shortcut automatically detects the device based on screenshot resolution and applies the correct frame

The output is a PNG with the Apple device frame around your screenshot. It works best with screenshots taken at native device resolutions — if your screenshot doesn't match any known device resolution, the shortcut may not detect the correct frame.

Limitations: only Apple devices, no browser frames, no custom backgrounds, and no batch processing beyond what Shortcuts allows. But for quick iPhone or iPad mockups, it's free and accurate.

Method 2: Free online mockup generators

Several web-based tools let you upload a screenshot and download a framed version in seconds. No account needed for most:

The workflow is the same for all of these: upload your screenshot, pick a device frame, adjust the background color or gradient, and download. Most give you a high-resolution PNG suitable for presentations and web use.

The downside is the round-trip time. You capture a screenshot, save it to disk, open a browser, upload, configure, download, then use the result. For a single image it's fine. For 10 screenshots in a documentation set, it's slow.

Method 3: Native Mac apps for device mockups

Dedicated Mac apps integrate directly into your workflow and avoid the browser upload cycle:

Framous — A lightweight Mac app specifically for wrapping screenshots in device frames. Drag a screenshot onto the app, pick a frame (MacBook, iPhone, iPad, Apple Watch), and export. Supports batch processing and keeps the output resolution sharp. Best for Apple device frames with minimal configuration.

Rotato — Goes beyond flat frames into 3D device mockups. You can rotate a MacBook in 3D space, animate the rotation, and export video or still images. Used heavily for App Store preview videos and landing page hero images. More complex, but the output quality is significantly higher than flat frames.

Mockuuups Studio — A large library of photorealistic scene mockups. Place your screenshot into a MacBook sitting on a desk, an iPhone in someone's hand, or a tablet on a kitchen counter. The scenes are pre-rendered photographs, so the result looks like a real product photo.

Method 4: Add a browser window frame

For web app screenshots, a browser chrome frame is often more appropriate than a device frame. It signals "this is a website" and lets the viewer see the URL bar context.

Screely and similar tools add a Safari or Chrome-style title bar to any screenshot. You can also build this manually:

1. Take a screenshot of the web content only (not the browser chrome)
2. Add a title bar header in any image editor — three colored dots (red, yellow, green) on a light gray bar
3. Optionally include a URL bar showing your domain

Or automate it with ImageMagick:

# Add a simple browser-style title bar
convert -size 1200x40 xc:'#E8E8E8' \
  -fill '#FF5F57' -draw "circle 20,20 28,20" \
  -fill '#FEBC2E' -draw "circle 48,20 56,20" \
  -fill '#28C840' -draw "circle 76,20 84,20" \
  titlebar.png

convert titlebar.png screenshot.png -append browser-frame.png

This creates a minimal title bar with the three macOS traffic light buttons and appends it to the top of your screenshot. Adjust the width (1200) to match your screenshot's pixel width.

Best practices for framed screenshots

Device frames add visual polish, but they can also create problems if used carelessly. Here's what to watch for:

Match the resolution. A 1440×900 screenshot in an iPhone frame looks wrong because the aspect ratio doesn't match. Use the actual device resolution for the frame you're applying. For a MacBook Air frame, your screenshot should be 2560×1664 (or half that for 1x). For an iPhone 15 Pro, use 1179×2556.

Keep file sizes reasonable. A MacBook frame around a 2x Retina screenshot produces a very large image. For web use, resize to 1x before framing, or compress the output. A 4000px-wide framed screenshot is overkill for a blog post.

Use consistent frames. If your landing page shows three screenshots, use the same device frame and background for all of them. Mixing a MacBook Air frame with a MacBook Pro frame, or using different background gradients, looks sloppy.

Choose the right background. A solid color or subtle gradient works best. Avoid busy patterns or photographs behind the device — they compete with the screenshot content. Dark backgrounds (charcoal, dark navy) make light UI screenshots pop. Light backgrounds work better for dark-themed UIs.

Don't frame everything. Device frames are great for marketing and presentations. For documentation, bug reports, and developer communication, raw screenshots are usually more appropriate. A framed screenshot in a GitHub issue would be weird.

Choosing the right frame for each use case

Automating mockup generation

If you need to generate framed screenshots at scale — for instance, generating all the screenshots for a documentation site or creating App Store assets for multiple locales — you need automation.

The Apple Frames shortcut can be called from the command line via the shortcuts command:

# Run Apple Frames shortcut from Terminal
shortcuts run "Apple Frames" -i screenshot.png -o framed.png

For browser frames at scale, build a simple script using ImageMagick or Python (Pillow) that composites your title bar template onto each screenshot in a folder. This is faster than any web tool and produces consistent results.

For more sophisticated mockups with shadows, rounded corners, and gradient backgrounds, tools like Pika.style and Screenhance offer APIs or CLI tools that can process batches.