SoftScrolls
Menu

Device mockups, drawn rather than photographed

14 frames - phones with every current camera cutout, a tablet, a round and a square watch, a laptop, a TV and a browser window. Drop a screenshot into any of them and export at whatever size you need.

Every one is constructed from geometry, so nothing you export carries a stock licence. Free, no signup, no watermark, and it all runs in your browser.

Open the studioNothing is uploaded anywhere.

Phones

8 bodies that differ mainly in one detail. The front-camera cutout is what dates a mockup, so picking the wrong one makes an otherwise good image look years old.

Phone - punch hole mockup frame, drawn rather than photographed

Phone - punch hole

A single punch hole - the current default. 0.46:1 body, 2.1% bezel.

Phone - pill cutout mockup frame, drawn rather than photographed

Phone - pill cutout

A rounded pill cutout, the premium tell. 0.46:1 body, 2.0% bezel.

Phone - notch mockup frame, drawn rather than photographed

Phone - notch

A wide notch - reads as 2018 to 2021. 0.46:1 body, 2.4% bezel.

Phone - corner punch hole mockup frame, drawn rather than photographed

Phone - corner punch hole

A single punch hole - the current default. 0.46:1 body, 2.1% bezel.

Phone - dual punch hole mockup frame, drawn rather than photographed

Phone - dual punch hole

Two punch holes side by side. 0.46:1 body, 2.1% bezel.

Phone - teardrop mockup frame, drawn rather than photographed

Phone - teardrop

A small teardrop - reads as budget. 0.46:1 body, 2.8% bezel.

Phone - under display mockup frame, drawn rather than photographed

Phone - under display

No visible camera at all. 0.46:1 body, 1.8% bezel.

Phone - classic bezel mockup frame, drawn rather than photographed

Phone - classic bezel

No cutout. 0.56:1 body, 3.5% bezel.

Tablets

A landscape-capable slate with a real forehead and chin, which is the asymmetry that makes a tablet read as a tablet rather than as a large phone.

Tablet mockup frame, drawn rather than photographed

Tablet

A single punch hole - the current default. 0.63:1 body, 3.5% bezel.

Watches

Round and square, both with straps above and below - which the layer box has to contain, so the case sits where it should rather than being centred on the straps.

Watch - round mockup frame, drawn rather than photographed

Watch - round

No cutout. 1:1 body, 5.5% bezel.

Watch - square mockup frame, drawn rather than photographed

Watch - square

No cutout. 0.84:1 body, 5.0% bezel.

Screens

A laptop with a base, a TV on a stand, and a browser window with a chrome bar inside the screen. For anything that is not being held.

Laptop mockup frame, drawn rather than photographed

Laptop

A single punch hole - the current default. 1.6:1 body, 1.2% bezel.

TV mockup frame, drawn rather than photographed

TV

No cutout. 1.78:1 body, 0.8% bezel.

Browser window mockup frame, drawn rather than photographed

Browser window

No cutout. 1.6:1 body, 0.0% bezel.

Why they are drawn

The part that usually comes with a licence attached.

A mockup made from a product photograph inherits that photograph's licence, and most of the free ones on the web are traced from press images whose terms nobody reads. These are built from a table of proportions instead - aspect, corner radius, bezel, cutout shape and position, thickness, whether there are side keys - and drawn at the size you export.

That is also why the proportions are honest. A 9:19.5 body with a 2% bezel is what a current handset actually measures, and a mockup that gets it wrong reads as wrong even to somebody who could not say why. The screen's corner radius is derived rather than stored, because two concentric rounded rectangles share a centre of curvature only when their radii differ by exactly the gap between them - and a screen corner that is not concentric with the body corner is the clearest tell of a hand-made mockup there is.

No manufacturer is named anywhere, no logo or badge is drawn, and the cutouts are described generically: the rounded slot at the top of a current handset is called a pill here, not the trademarked name its best-known implementation goes by.

Frequently asked questions

Are these device mockups free for commercial use?
Yes. The frames are constructed from geometry - a rounded body, a bezel, a camera cutout, two side keys - rather than traced from product photographs. No manufacturer is named, no logo or badge is drawn, and the cutouts are described generically, so there is no stock licence attached to what you export. Your own screenshot was yours already.
Which phone mockup should I use?
Match the cutout to the year you want the image to read as, not to a particular handset. A centred punch hole or a pill reads as current, a wide notch reads as 2018 to 2021, a teardrop reads as budget, and a thick top-and-bottom bezel reads as a decade ago. The cutout is the single detail that dates a mockup, which is why there are 8 phone bodies here rather than one.
Can I put a screenshot inside a tablet or a watch mockup?
Yes - every frame here has a real screen area that takes an image, and the screen corner radius is derived from the body radius minus the bezel, so the capture is masked to a shape that is concentric with the body. That is the detail that separates a mockup from a screenshot with a rounded rectangle drawn round it.
Do the mockups do 3D or just flat?
Three ways. Flat, for a straight product shot. A fast perspective tilt, for a row of angled devices. And a real 3D pass with actual thickness, a lit chamfer and a contact shadow, for when the device is the whole image. The thickness is per device, because the proportion is most of what distinguishes them: a handset is about 11% of its width thick, a tablet is relatively far thinner, and a watch case is a third of its width.
What resolution do the mockups export at?
Whatever the canvas is, at 1x or 2x. Nothing here is a bitmap being scaled up - the frame is drawn from geometry at the size you export, so a 3D device in a 3840px export is re-rendered at 3840px rather than upscaled from the preview.

Put a screenshot in one

The studio opens into a project with the device picker in the inspector. If you want a finished composition rather than a bare frame, the screenshot templates already have one placed.

Open the studio

The rest of the toolkit

One editor, and a page for each job people bring to it.