How to make a device mockup from a screenshot

A device mockup places a screenshot inside a drawing of a phone, laptop or browser window, so people see your app or website the way they will use it. Making one takes three steps: capture a clean screenshot, choose a frame, and export at the right size and background. The device mockup generator does the framing in your browser, and this guide covers the steps around it.

What a mockup is for

A bare screenshot floating on a page reads as a scrap of interface. In a device frame it reads as a product: context tells viewers at a glance whether this is a phone app or a web dashboard. Mockups are used on landing pages, in portfolios and pitch decks, in launch posts and in app store listings. They are presentation, not documentation, so the screenshot inside should show one clear moment of the product rather than a busy settings screen.

Preparing the screenshot

• Capture at full resolution. Use the device's own screenshot function or, for a website, your browser's responsive or device mode, rather than a cropped photo of a screen.
• Tidy the status bar. A full battery, a neutral time and no notification icons look calmer.
• Use realistic but fake data. Remove real names, email addresses, account numbers and messages; screenshots get shared further than you expect.
• Match the shape. The phone frame's screen is roughly 1 by 2.15, close to modern phones, so a phone screenshot fits naturally while a desktop capture will be cropped.

Choosing a frame and fit

The generator offers a phone with a camera island, a phone with a punch-hole camera, a tablet, a laptop, a desktop monitor and a browser window with your own address bar text and an optional dark theme. Phones and tablets turn to landscape automatically when the screenshot is clearly wider than it is tall. Three fit modes decide how the image fills the screen: fill, keep the top, best for long web pages because the header stays visible; fill, centred, which crops evenly; and show whole image, which fits everything and leaves dark bars if the shapes differ. You can also paste a screenshot straight from the clipboard.

Background, padding and size

Pick a transparent background when the mockup will sit on a website or slide that already has its own colour; the PNG keeps the transparency. Choose a solid colour or gradient for social posts and anywhere the image stands alone. Padding comes in tight, medium and roomy, and an optional drop shadow lifts the device off the background. The output is a PNG 1,080, 1,600 or 2,400 pixels wide. Use the larger sizes for retina displays and print; 1,080 is plenty for most social feeds. Social media image sizes and aspect ratios lists the shapes each platform crops to.

App stores have their own rules

App store screenshots are not free-form images. Apple's App Store Connect requires at least one and up to ten screenshots per device size, in exact pixel dimensions; for the largest current iPhones, one accepted portrait size is 1320 by 2868 pixels. Google Play accepts JPEG or 24-bit PNG without transparency, between 320 and 3,840 pixels on each side, with the longer side no more than twice the shorter. So for store listings, export with a solid or gradient background rather than a transparent one, then resize to the exact dimensions with the image resizer. Both stores also expect screenshots to show the app accurately, so check their guidelines before adding marketing text.

Generic frames and their limits

The frames are clean, generic devices drawn from simple shapes, not replicas of a particular manufacturer's product, which avoids implying an endorsement you don't have. They are flat, front-on views rather than angled 3D renders; for perspective scenes you need a design tool and a licensed template. For a website or desktop app shown as a floating card rather than inside a device, the screenshot beautifier adds a gradient backdrop, rounded corners and a shadow, and the social media image resizer fits the result to each platform. If you also need icons for the listing, App icon sizes explained: every size, and why there are so many covers the sizes. Nothing is uploaded at any step.