Why device frames work
A plain screenshot is abstract — the viewer has to infer what device or context they are looking at. A device frame resolves that ambiguity instantly. An iPhone frame tells the visitor "this is a mobile app." A MacBook frame tells them "this is a desktop tool." A browser chrome frame says "this works in your browser." That context reduces cognitive load and increases trust in the screenshot as representative of the actual product.
Device frames also solve a practical problem: raw screenshots have inconsistent dimensions. A frame normalizes them into a consistent visual container, making a gallery of screenshots look coherent rather than mismatched.
Choosing the right frame
Match the frame to the product context, not to the device you happened to take the screenshot on.
- iPhone frame: Mobile apps, progressive web apps with a mobile-first experience, anything you would primarily use on your phone. Works well for both App Store listings and landing page hero shots.
- MacBook frame: Desktop apps, native Mac software, and web apps where the desktop experience is the primary one. The MacBook silhouette reads as "powerful tool" — use it for productivity, developer, and creative software.
- Browser chrome frame: Web applications without a strong device dependency. If your product runs equally well on any computer, a browser frame is the honest choice — it does not imply a specific OS.
- iPad frame: Tablet-optimized apps and multi-column interfaces that make use of the larger canvas. Also works well for document editors and creative tools where the horizontal layout is part of the value.
- Android frame: Android apps and cross-platform mobile apps where the Google Play audience is the target. Pair an Android frame with an iPhone frame when highlighting cross-platform availability.
How to add a device frame in Shotcraft
- Open Shotcraft — no signup or download required.
- Upload your screenshot by dragging it onto the canvas, pasting with Ctrl/Cmd+V, or clicking the upload button.
- In the right panel, open the Frame section and select your device type (iPhone, MacBook, Browser, iPad, or Android).
- Adjust the padding slider to set how much space appears between the device frame and the edge of the exported image. A value of 8–12% reads well in most contexts.
- Select or customize the background — a gradient, solid color, or ambient glow behind the device.
- Set the export scale to 2x or higher and click Export.
The whole workflow takes under two minutes for a clean result.
Sizing considerations
Device frames add significant visual area around your screenshot, which reduces how much space the actual UI takes up in the final image. For complex UIs with small text or dense controls, make sure the UI is still legible after the frame is applied. You can increase the export resolution or crop the source screenshot to a smaller, more focused area before framing.
For App Store screenshots: Apple requires specific pixel dimensions per device. Export the base screenshot at the required size for the target device, then apply the frame layer on top — the framed export should meet the minimum dimension requirement with room to spare at 3x.
Tips for polished results
Pair the frame with a shadow on the device. A soft drop shadow (20px blur, 20% opacity) creates a sense that the device is resting above the background rather than pasted onto it. Avoid hard-edged shadows — they look dated.
Keep your device frame color neutral. Most frame presets in Shotcraft default to a realistic silver or space gray, which pairs with any background. Avoid novelty colored frames unless they serve a specific campaign purpose.
If you are creating a sequence of screenshots (App Store gallery or landing page carousel), apply the same frame, padding, and background to every screenshot. Consistency across a gallery reads as a deliberate design choice. Inconsistency reads as carelessness.