tool · one of 51 Pro saves the PNG
Device mockup
How do I put a screenshot in a browser frame for a post?
A bare screenshot in a tweet, a changelog or a slide looks like a mistake; the same picture in a browser window on a gradient looks like a release. This takes a screenshot you drop, paste or choose, puts it in a light browser, a dark one or a phone, with the address of your choice in the bar, and sets it on one of eight grounds with padding and a shadow you can tune.
Reach it Press ⌘ + K on any tab and type device mockup. Ctrl + K on Windows and Linux
in the panel · this one is Pro
What this actually is
a screenshot framed in a browser window or a phone on a gradient, as one imageAnnouncing a feature, filling an App Store or Product Hunt gallery, or illustrating a blog post. Capture the page with the page bar's camera, paste it here, and it is a presentation image a minute later.
Asked about this tool
3 of themWhy does it not take the screenshot itself?
Because a capture already has two destinations - a file and the clipboard - and this tool is not a third. Take the picture with Capture or the page bar's camera and paste it in.
Is the screenshot uploaded?
No. It is read in the panel and drawn onto a canvas on your machine. Nothing is requested and nothing is stored.
What is the difference from Mockup?
Mockup overlays a design comp on the live page to find where the build differs. Device mockup frames a finished screenshot for somebody else to look at. One is for checking, the other for showing.
how to use device mockup
- Open Device mockup and drop, paste or choose a screenshot.
- Pick the frame: browser, dark browser, phone or none.
- Choose a ground and set the padding, the shadow and the address in the bar.
- Save the finished image as a PNG.
96 of these · no host permissions · three free audits