Make a raw screenshot feel ready to share.

Capture first, compose second

Keeping the source separate means one clean capture can feed a landing-page hero, a social post, a help article and a slide. Keep the original file untouched and do all styling in the mockup, so you can rebuild any version later.

1. Start from a sharp source

A sharp export starts with a source large enough for the area it will fill. Enlarging a small image smooths pixels rather than recovering detail, and no later step can fix it.

The rule: the screenshot's pixel width should be at least the width it occupies in the final export. A 400-pixel-wide capture stretched across a 1200-pixel panel loses its small text; a 2400-pixel capture reduced to 1200 stays crisp.

• Raise pixel ratio, not viewport width. A wider browser window makes every label smaller once the screenshot is scaled into a card. A 1440-wide viewport at 2× gives 2880 px of crisp interface at the same layout.
• Keep small text honest. Capture the relevant panel at a readable size and explain the benefit in a headline; don't enlarge isolated UI text until it misrepresents the interface proportions.
• Avoid recompressed copies. Chat apps, social DMs and some cloud previews resize images. Upload the original file.

2. Capture a clean, honest source

A frame and a shadow preserve everything in the screenshot, including mistakes. Review the source before you build around it.

• Demo data, not customer data. Create a sample workspace with clearly fictional names, emails and balances. Blurring one table cell doesn't remove private information from other panels, tab titles or file metadata.
• Settled state. Wait for fonts, images and charts to load. Don't present a skeleton or half-drawn chart as the finished feature unless loading is the subject.
• No stray notifications. Dismiss banners and menus, pause notification sources with your device controls, and check the whole capture before uploading.
• Correct orientation. Make sure the image is upright and choose a frame that fits it; rotating a composition for style and rotating readable UI sideways are different things.
• Real light and dark modes. Switch the app's own appearance and capture matching content in both. Recoloring a screenshot to fake a theme misrepresents the product.
• Current version. Name captures by feature and date (settings-v3_2026-10.png) and compare with the shipping product before delivery. A polished frame makes an outdated claim look more authoritative.

3. Crop before you frame

A deliberate crop lets the presentation support the interface instead of hiding it. Remove space that doesn't help, but keep enough context to explain the action.

• Name the takeaway in one sentence, then crop to the control or result that proves it.
• Keep meaning intact. A chart keeps its title, units and legend; a table keeps its headers; a filtered list keeps the active filter.
• Don't shrink a whole ultrawide desktop into a small card; every label becomes illegible. Crop to the panel instead.

4. Pick the canvas, then one message

Choose the final aspect ratio and pixel size before styling. Building a 16:9 composition and cropping it to a square later always loses something.

One message per image. Write the intended takeaway in one sentence and remove anything that serves a different message: a second screenshot about billing in a post about the calendar, a feature list under a one-benefit headline.

Landscape to portrait is a redesign, not a resize. Stack the headline over the screenshot, and drop secondary screenshots that become unreadable.

5. Background and contrast

The background's job is to make the screenshot's edges readable. A detailed interface usually needs a quieter background.

• Start with a solid color or a restrained gradient. A vivid gradient can drown an equally colorful dashboard.
• Check the brightest and darkest areas of the screenshot against the background. A white app on a white canvas has no edge; a soft tint or a slightly darker neutral gives one without a heavy shadow.
• Pair light screenshots with mid or dark backgrounds and dark screenshots with light or mid backgrounds.
• Use one dominant background treatment across a series; change the screenshot, not the backdrop.
• If the image will sit on a colored page, check it there. An image that looks balanced in the editor can look different on another background.

MockupX's backgrounds include solid White and Paper, dark Ink, Midnight and Graphite, gradients such as Aurora, Mint, Coral, Violet, Sunset, Solar, Cosmic and Glass blue, and Transparent.

6. Padding, corner radius and shadow

In MockupX, padding runs from 3% to 24% of the canvas, corner radius from 0 to 38 px and shadow from 0 to 100. Avoid layering a capture's own window shadow (macOS adds one unless you hold Option) under the mockup's shadow; you get two halos.

7. Tilt, rotation and multiple screenshots

Rotation adds energy, but text gets harder to read as the angle grows. Use the smallest tilt that does the job, and keep content that must be read precisely, such as pricing tables or settings, upright. MockupX's tilt goes up to 18° either way; most compositions need far less.

• Give each screenshot a role. One dominant, the others supporting. If you can't say why the second screenshot is there, remove it.
• Check overlaps. A stacked or cascaded layout must not cover the control the headline mentions.
• Don't imply support you don't have. A phone beside a desktop says the product has a mobile interface; only show it if it does.
• Leave clearance. A tilted window needs extra space at its upper corner.

8. PNG, JPEG or WebP?

When in doubt, export a sample in two formats and compare small text and flat-color edges at 100%. Pick the smallest file that keeps the detail you need.

9. Export with a transparent background

Transparency depends on two settings together: the background and the format.

1. Choose the Transparent background.The canvas behind the screenshot or device is left empty.
2. Export as PNG (or WebP).JPEG cannot store transparency, so MockupX fills those areas with white.
3. Check on light and dark surfaces.Drop the file onto a white page and a dark page. A shadow that looks right on white may look muddy on dark; reduce it if needed.

Don't use a transparent export where transparency isn't allowed. App Store Connect, for example, refuses screenshots with an alpha channel; see the App Store screenshot size guide.

10. Pixel size, 2× export and file size

The downloaded file is the source of truth for dimensions. MockupX shows the output resolution before you download and names the file with it.

• 1× is the exact canvas size. Use it whenever a destination demands specific dimensions, such as store screenshots.
• 2× doubles width and height, which means four times as many pixels: 1920 × 1080 becomes 3840 × 2160. It helps high-density web placements, provided the source is sharp enough. It is a paid-plan option.
• Match output to the placement. A 600-pixel-wide docs image doesn't need a 3840-pixel file. Extra pixels increase load time without adding information.
• Compress carefully. Aggressive compression damages fine interface text before it noticeably affects large shapes.
• Check dimensions outside the editor. On a Mac, Finder's Get Info or sips -g pixelWidth -g pixelHeight file.png prints them; sips -g hasAlpha shows whether a PNG carries an alpha channel.

If a large export fails: large, complex compositions need a lot of browser memory. Keep your original screenshots saved, try 1× or a smaller output size, close heavy tabs and retry in a current browser.

Diagnose a blurry export in three comparisons

Blur can come from the source, the scaling, or how the destination displays the file. Compare each stage before changing settings.

1. Open the original screenshot at 100%.Soft here? The source is the problem: recapture at a higher pixel ratio or from the original file.
2. Open the downloaded export at 100%.Sharp source but soft export? The screenshot is being enlarged on the canvas. Crop tighter, reduce zoom or use a larger source.
3. Compare with the destination.Sharp export but soft on the site? The page is stretching the image beyond its pixel width, or the platform resized it. Export at the size the destination displays, or 2× for high-density screens.

Increasing the export size without fixing the source just produces a larger blurry file.

How to beautify a screenshot in MockupX

1. Choose the output frame.A preset (HD, Presentation, Classic, Square, Portrait, Story, social and store sizes) or a custom size from 320 to 6000 px.
2. Add the screenshot.Drop, paste, upload, use Capture for a window on your desktop, Phone upload via QR code, or pick a photo from the built-in Unsplash and Pexels search.
3. Crop it.Use Edit on the media slot, then choose Fit or Fill.
4. Choose a treatment.Screenshot (frameless) for a clean card, or a browser, phone, tablet, laptop, desktop or watch frame.
5. Pick a layout.Single float, top, bottom, right, close-up or tilt; duo, staggered, overlap, trio, fan or cascade for multiple shots.
6. Tune background, padding, corners, shadow, zoom and tilt.Drag elements on the canvas or nudge them with the arrow keys.
7. Add copy only if it helps.Optional headline (100 characters) and description (180).
8. Export and open the file.Sign in, pick the format and scale, download, then check it outside the editor.

Worked example: one capture, three images

A product team documents a new export dialog and wants a changelog image, a docs image and a social post from one capture.

1. Capture.Chrome device mode at 1280 × 800, DPR 2, demo project, dialog open: a 2560 × 1600 PNG. No extensions, no cookie banner.
2. Changelog (1920 × 1080).Frameless, cropped to the dialog plus a strip of the page behind it, Paper background, 8% padding, radius 16, low shadow. Headline: “Export straight to PDF.” PNG, 1×.
3. Docs (1600 × 1200).Same crop, no headline, White background, smaller padding so the dialog stays large. PNG.
4. Social (1080 × 1350).Tighter crop on the format options, slight tilt, Violet background, two-line headline. The first attempt kept the whole dialog and the labels were too small at feed size, so the crop was tightened.
5. Check.All three files opened at real size; the changelog image checked on the blog's off-white page, where the shadow was reduced.

Final-file checklist

A successful download confirms that a file was created, not that it meets the destination's requirements. Open the exported file outside the editor and check:

• Pixel dimensions and format match the destination.
• Watermark state is what you expect (free exports carry a MockupX watermark).
• No private data, notifications or debug overlays are visible.
• Text is readable at the size people will actually see it.
• No shadow or tilted corner is clipped at the canvas edge.
• Transparent areas are transparent (PNG/WebP) or intentionally white (JPEG).
• The screenshot matches the current product.
• The image still communicates one message when shrunk to thumbnail size.