Device Mockup places an ordinary screenshot inside a phone or tablet frame. It is useful for app introductions, tutorial images, and social posts. It does not change what is in the screenshot; it handles the layout, background, and presentation.
When to use it
- Add a device frame to an app screenshot so it looks like a real usage scenario.
- Give a set of screenshots the same background, aspect ratio, and watermark.
- Make an article header or social image without opening a design app.
Prepare your screenshots
- Start with the original screenshot rather than an already compressed copy.
- If the screenshot and device screen have different aspect ratios, adjust scale and position in the tool.
- For a batch, make sure the images have similar dimensions and orientation first.
Step by step
- Open Device Mockup and choose or drop one or more images.
- Choose a device template and adjust the image scale, rotation, and position.
- For multiple images, apply the current settings to all images if you want a consistent look. You can still adjust one image afterward.
- Set the canvas ratio, background type, background adjustments, date and time, home-screen widgets, and watermark as needed.
- Check cropping, edges, and text placement in the preview, then choose export quality.
- Export the current image, or pack all images into a ZIP. You can also copy the current image to the clipboard when your browser supports it.
Layout advice
- Choose the canvas ratio first. Square works for social posts, portrait suits phone reading, and landscape fits article headers and presentations.
- Keep the background quiet. A solid color or a lightly blurred background makes the screenshot easier to read.
- Turn on date and time only when useful. A lock-screen clock adds realism but takes up space. If the screenshot is already busy, leave it off.
- Use the watermark sparingly. It is useful for attribution, but it should not cover important buttons or text.
- Keep a batch consistent. Set the template, background, and watermark on one image, apply them to all, then check each image individually.
Export and cache
A single result exports as PNG; multiple images can be packed as a ZIP. Higher export quality means larger files and longer processing time.
The tool stores images and some settings in the current browser's local cache so you can continue later. On a shared device, clear the image cache in settings or clear this site's browser data when you are done.
Frequently asked questions
My screenshot is cropped. What should I do?
This usually means the screenshot and device screen have different aspect ratios. Adjust scale, rotation, and position, or try a template closer to your screenshot ratio, then check the preview again.
Can multiple images share the same settings?
Yes. Template, background, and image adjustment sections include an apply-to-all action. After applying, you can still switch back to one image and adjust it.
Why are my previous images still here?
The tool keeps images and some settings in the current browser so you can continue editing. To remove them, use the image cache option in settings or clear this site's browser data.
The copy button is unavailable. Why?
Copying an image to the clipboard requires a secure connection and browser support. If it is not available, download the PNG instead.
Are my images uploaded?
No. Images are read and composed in your browser and are not uploaded to a server.