How to use Device Mockup Generator
- Upload the image to place on the drawn screen.
- Choose a phone or laptop and the fit option.
- Export the mockup and inspect the screen area for cropping or empty space.
Example: Device Mockup Generator
A local worked example using the inputs and settings below for device mockup generator.
Options
- Phone and laptop
- The frame choice sets the supported output dimensions. Shapes are generic and do not identify an actual device.
- Fit
- Contain can leave unused screen space; cover fills the screen while cropping edges. Choose based on what must remain visible.
Supported inputs and limits
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
A frame does not test a responsive page
The input is a static image placed inside a drawn screen. It does not run a website, reproduce a device viewport or test interaction. Check the whole downloaded PNG before using it as a presentation image.
Questions about Device Mockup Generator
Which fit option keeps the whole image?
Contain fits the full image inside the screen. Spare space appears when the image and screen proportions differ.
Why are the image edges missing?
Cover fills the screen by cropping excess width or height. Switch to contain to retain the whole image.
Are these official device frames?
No. They are simple generic phone and laptop drawings intended to show your image in context.