A device mockup generator that starts from your screenshot's shape.

Every device frame in the editor

The editor groups frames by device type. After you choose a type, a Model menu, an Orientation switch (where the model has both) and a row of finishes appear. The screen opening below is the area, in the frame's own pixels, where your screenshot is placed; its shape is what you should match.

Two more modes sit beside the frames. Screenshot is frameless: your image keeps its own shape and gets rounded corners and a shadow you control. Browser adds a Safari or Chrome toolbar above a web capture without implying any hardware.

Match the capture to the screen opening

A frame never stretches your image. The Image sizing control has two settings: Fit shows the whole screenshot and leaves bands where the shapes differ; Fill covers the whole screen opening and crops whatever overflows. Either is fine when the shapes are close, and both look wrong when they are far apart. The fix is to start with a capture of the right shape, which usually means taking it on the device the frame represents, or on a simulator or browser window sized to match.

The last row is the one to avoid entirely. A phone screenshot inside a tablet frame suggests a tablet app that may not exist. If you only have a phone capture, use a phone frame or the frameless mode. When you need to adjust a crop, the media crop tool offers Original, 1:1, 4:5, 16:9 and 9:16 so you can trim a capture before it reaches the frame.

Check the notch, Dynamic Island and camera cutouts

Every modern frame draws its camera hardware over the top of the screen: the Dynamic Island on the iPhone 17 family, a punch-hole camera on the Pixel 7 Pro and Nothing Phone, and a notch at the top center of every MacBook. The frame image sits on top of your screenshot, so whatever is under that cutout disappears.

Captures taken on the same kind of hardware line up naturally, because the operating system already keeps content clear of the cutout: an iPhone screenshot has the status bar split around the island, and a notched MacBook puts the menu bar on both sides of the notch. Problems come from mixing sources. A web page captured on an external monitor and placed in a MacBook frame will lose whatever sat at the top center of the browser, which is often the address bar or a centered logo. A screenshot from an older phone without an island can have a centered clock or title that the island now covers.

Zoom in on the top 10% of the preview before you export. If something important is hidden, retake the capture on matching hardware, crop a little off the top with the crop tool and use Fit, or switch to the frameless mode. Do not edit the app's interface to move elements out of the way; the mockup should show the layout the product really has.

Frame size and canvas size are different decisions

The device frame describes the object inside the image. The canvas (the editor calls it the output frame) describes the whole exported file. A phone frame on a 1920 × 1080 canvas is a wide banner with a phone in it; it is not a phone screenshot and it will not pass an app store's size check. Choose the canvas for the destination first, then place the device inside it.

A portrait phone on a square canvas leaves about half the width empty. Use that space on purpose: offset the phone with the Right or Left layouts and turn on Optional content for a headline of a few words. A landscape phone capture, such as a video editor's timeline, needs a wide canvas; on a square canvas it shrinks to a thin strip. Switch the frame to landscape, use HD or X post, and check that the bottom controls are still legible.

Choose a finish for contrast, then a background

The frame's job is to outline the screen. A dark finish (Space Black, Midnight, Obsidian, Black) draws a crisp edge around a light interface on a light or mid-tone background. Light finishes (Silver, Starlight, Snow, White, Cloud White) need a deeper background such as Midnight, Ink, Violet or Graphite, otherwise the device edge dissolves and the screenshot looks like a floating rectangle. Bright finishes such as Cosmic Orange, Sky Blue or the iMac colors add a second accent; use them only when the background is quiet.

The editor's backgrounds are Aurora, Sunset, Midnight, Mint, Paper, Ink, Coral, Violet, White, Transparent, Cosmic, Glass blue, Solar and Graphite. Transparent exports a PNG with an alpha channel, which is useful when the device will sit on your own website background. JPEG has no transparency, so a transparent canvas exported as JPEG comes out on white. A frame finish is a visual choice only; it does not change your screenshot and does not imply any relationship with the hardware maker.

Margins, tilt, zoom and shadow

Four controls decide whether a device looks placed or crammed. Padding (3 to 24% of the canvas) sets the breathing room around the composition. Zoom (48 to 400%) scales the devices. Tilt rotates them up to 18 degrees either way. Shadow runs from 0 to 100. Each one changes the bounding box of the device, so recheck the edges after every change.

• Leave visible space between the canvas edge and the nearest device corner, including the shadow. A shadow cut off by the edge looks like a mistake, not a style.
• Tilt enlarges the device's footprint. A phone that fits upright can clip at 12 degrees; reduce zoom slightly after tilting.
• Heavy shadow on a dark background barely shows; on Paper or White a shadow of 30 to 60 usually reads as depth without smudging.
• Drag a device on the canvas to offset it, or use the arrow keys for precise nudges.
• A deliberate crop through a device can work for a hero image, but crop with intent: keep the screen content that carries the message fully visible.

Apple Watch mockups: one glance, one state

Watch screens are not small phone screens. Pick a state with one dominant element (a metric, a timer, an alert, a single action) and let it be the clearest thing in the image. The Series 11 46mm frame has a 416 × 496 screen opening and the Ultra 3 frame 422 × 514, which are exactly the App Store Connect screenshot sizes Apple lists for those watches, so a capture from the watchOS simulator fits without cropping. The 42mm frame's opening is 374 × 446.

Because the watch is small, case-to-background contrast matters more than on any other frame. Pick a band and case that separate clearly from the background, keep marketing text outside the watch face, and check the export at thumbnail size: the screen should still read as a screen, not a dark square. Three watches with the Gallery trio or Depth stack layouts can show three complications or band styles side by side.

The watch frames are Apple Watch only. For Wear OS listings, Google Play asks for plain 1:1 screenshots of at least 384 × 384 with no device frame, extra text, graphics or background, so upload the raw capture there rather than a mockup.

Product mockups without hardware

Many product visuals do not need a device at all. For a SaaS dashboard, a feature announcement or a docs image, the frameless Screenshot mode or a browser toolbar keeps attention on the interface. The principle is the same as with devices: one screen that proves one benefit. Pick the state where the value is visible (a finished report, a filled calendar, a successful import) rather than an empty starting screen.

• Keep campaign copy outside the screenshot. Optional content adds a headline (up to 100 characters) and a description (up to 180) on the canvas, so the interface stays authentic and the copy is easy to translate.
• Replace customer names, emails and real figures with realistic sample data before you capture.
• Use one background family, one corner radius (0 to 38 px) and one shadow level across a set so later images look related.

Review checklist before you share

Review the image in three layers: the screenshot, the screen opening, and the composition around the device. Most problems that reach a published page would have been caught by looking at the exported file at its real size for thirty seconds.

• The screenshot shows the feature the headline promises, with no test data, debug banners or notifications.
• Nothing important sits under the notch, island or camera cutout, and the bottom tab bar or home indicator is not clipped.
• Fit or Fill was chosen deliberately; there are no stray bands or cropped sidebars.
• The device edge is visible against the background in the chosen finish.
• Margins are even, and no shadow or tilted corner touches the canvas edge.
• The exported file has the pixel size the destination expects; the editor shows the output resolution before download.