How to Create a Device Mockup from a Screenshot?
Step 1: Add Screenshots
Drop, paste or browse for one or more screenshots (PNG, JPG, WebP, SVG). Each one gets its own frame.
Step 2: Choose a Frame
Pick iPhone, Android, Tablet, MacBook, a browser window or a plain rounded frame, then set orientation, style and finish.
Step 3: Set the Scene
Choose a background colour or gradient, canvas ratio, padding and shadow. With several screenshots, arrange them as a row, column or grid.
Step 4: Export the PNG
Pick 1×, 2× or 3× and click Export PNG, or copy the image straight to your clipboard.
Video tutorial coming soon
Best Use Cases
App Store Screenshots
Frame app screens in a phone and export a consistent set in one grid
Portfolio & Dribbble Shots
Present a website in a MacBook or browser window on a clean gradient
Landing Page Heroes
Export a transparent PNG and drop the device straight onto your page
Client Previews
Show a design in context before it is built
Social Media Posts
Use the 1:1 or 4:5 canvas for Instagram and LinkedIn
Documentation
Illustrate guides and release notes with framed screenshots