How Do You Make a Device Mockup from a Screenshot for App Store, Web, and Social Posts?

You can turn a raw screenshot into a finished device mockup in a browser, without design software, by working in this order: pick the target canvas size first, choose a device frame or browser window, drop in the screenshot, then style and export. Device Shots is a free, no-sign-up mockup generator that runs entirely in the browser, with 76 phones, tablets, laptops and watches, 9 vector browser window styles, and templates sized for App Store, Instagram, YouTube, Open Graph, LinkedIn, TikTok and more. The steps below follow that tool because its workflow matches the task, but the sequence applies to any mockup generator.

Step 1: Pick the canvas size before anything else

The most common reason a mockup gets rejected or looks wrong is that it was designed at the wrong dimensions. Choose the destination first, then build inside it.

If your destination isn't listed, set a custom canvas up to 6000 px. Starting from a template is faster than starting blank because the device, background and text are already arranged — you swap the device, drop your screenshot, and you're done.

Step 2: Choose a device frame or a browser window

Two framing options cover most needs:

• Device frames — phones, tablets, laptops and watches. Use these when the screenshot is a mobile app or a desktop app and you want the hardware to sell the context.
• Browser windows — 9 vector styles in light or dark, each with an address bar you can type into. Options include Safari (compact bar, centred address), Safari with tabs, Chrome, Chrome for Windows (caption buttons, no traffic lights), Edge, Brave, and Arc (tinted, inset content). Use these when the screenshot is a website or web app and you want it to read as a live page.

Browser frames are vector, so they stay sharp at any export size. The address bar is editable, which matters for landing pages and Open Graph images — a real-looking URL is more convincing than a blank bar.

Step 3: Drop, paste, or upload the screenshot

With the frame in place, add your screenshot by dragging it in, pasting it, or uploading it. The screenshot fills the frame's screen area.

This is where most quality problems appear, and they're almost always aspect-ratio mismatches:

• Blurry result — the source screenshot is lower resolution than the frame's screen area at your export size. Export at a higher multiplier (up to 4×) only helps if the source has the pixels; otherwise re-capture the screenshot at a larger window size.
• Cropped or letterboxed result — the screenshot's aspect ratio doesn't match the device screen. A tall phone screenshot in a laptop frame will crop or leave bars. Match the source ratio to the frame: phone screenshot → phone frame, wide desktop capture → laptop or browser frame.
• Stretched result — the frame is scaling a mismatched ratio. Switch to a frame with a closer ratio rather than forcing it.

Step 4: Style it so it looks intentional

A screenshot in a frame still looks like a screenshot. Add the finishing layer:

• Background — a gradient or solid colour behind the device. Templates like "Galaxy S10 gradient" and "Neon stripes" show how much this changes the read.
• Headline text — one short line above or beside the device. This is what makes a store listing or social post scannable.
• Shadows — a soft drop shadow lifts the device off the background.
• Icons — small marks for ratings, badges or feature callouts.

Keep the text short enough to read at thumbnail size. A YouTube thumbnail at 1280 × 720 and a LinkedIn banner at 1584 × 396 both get viewed small, so a long headline disappears.

Step 5: Export or copy

Export at up to 4× resolution, or copy straight to the clipboard. For App Store and Google Play listings, export at the template's native size or higher — store review processes reject undersized or wrongly proportioned screenshots. For social posts, the template size is already correct, so a 1× export is usually enough; use 2× or 4× when the image will be displayed large or on high-density screens.

A worked example: App Store screenshot from a phone capture

1. Open the Google Play Screenshot · Pixel pair template (1080 × 1920) or set a custom 1080 × 1920 canvas.
2. Choose an iPhone or Pixel frame.
3. Drop your app screenshot into the frame. If it's a full-height phone capture, it should fill the screen without cropping.
4. Add a one-line headline above the device, e.g. the app's core benefit.
5. Set a background gradient that contrasts with your app's UI colours.
6. Export at 2× (2160 × 3840) for a crisp store listing.

Common snags and what to do

• The mockup looks empty. Add a headline and background — a bare device on white reads as unfinished.
• The browser frame looks wrong for a mobile app. Switch to a phone frame; browser chrome implies a website.
• Text is unreadable in the feed. Reduce the headline to a few words and increase its size relative to the canvas.
• Export is huge or slow. Drop from 4× to 2×; 4× is only worth it when the source screenshot has the resolution to support it.

The whole process — size, frame, screenshot, style, export — takes a few minutes per image once you've done it once, and the template library means you rarely start from a blank canvas.