A plain screenshot rarely sells an app or a website. Placing it inside a phone or laptop frame gives instant context and looks professional in portfolios, app store pages, social posts and pitch decks.
Make a mockup in a minute
- Pick the device: iPhone, Android phone, iPad, MacBook or a generic phone.
- Drop in your screenshot.
- Choose the device colour, orientation and how the screenshot fits (fill the screen or fit inside).
- Pick a background: transparent, solid or a gradient. Adjust the space around the device.
- Download the PNG. Use the transparent version to place it on your own designs.
Your unreleased designs are never uploaded. Everything is rendered in your browser.
Which device should I choose?
| Showing | Device |
|---|---|
| Mobile app | iPhone or Android |
| Responsive website | Phone plus MacBook side by side |
| Tablet app or dashboard | iPad |
| Desktop web app or SaaS | MacBook |
Get a sharp screenshot first
- Take screenshots at the device’s native resolution.
- Hide status bar clutter like notifications.
- Use realistic sample data, not placeholder text.
- For web pages, capture at a 1440 or 1920 px wide window for laptops.
Design tips
- Background: a soft gradient in your brand colour makes the device stand out. Use dark devices on light backgrounds and light devices on dark ones.
- Shadow: a subtle floor shadow adds realism. Keep it light.
- Space: give the device room to breathe. Around 10 to 20 percent padding looks balanced.
- Consistency: use the same device colour and background across a set of mockups.
Make more dramatic angles
Tilt the finished mockup in 3D with the Perspective Image tool and add a drop shadow. Combine several mockups with Combine Images.
Add text and callouts
Highlight features with arrows, speech bubbles or a headline using Add Text to Image.
Export sizes
- App store and website hero: export at least 2000 px wide
- Social posts: resize to the platform size with the Image Resizer or social presets
Start with a good screenshot
- Use a full-resolution screenshot taken on the device. Do not use a photo of a screen.
- Hide notifications, personal data and low-battery warnings.
- Match the device: an iPhone screenshot in an iPhone frame looks right, but forcing a desktop screenshot into a phone frame looks stretched.
Choose the right frame
Use iPhone mockup or Android mockup for apps, iPad mockup for tablet layouts and MacBook mockup for websites and dashboards. The screenshot is fitted to the screen area without distortion.
Make the final image work harder
- Export as PNG with a transparent background so you can place it anywhere.
- Add a soft shadow so the device does not look flat.
- Use a clean, brand-coloured background for store listings and landing pages.
Where mockups help
App store pages, product launch posts, portfolio case studies, pitch decks and documentation all look more professional with a device frame. Keep the files small with the image compressor so your pages stay quick.
Frequently asked questions
What screenshot size works best in a mockup?
A screenshot taken from the real device at its native resolution fits best. Use Fill the screen to crop or Fit inside to show everything.
Can I get a mockup with a transparent background?
Yes. Choose a transparent background and save the PNG to place the device on your own designs.
Which device should I choose for a website?
A laptop frame for desktop layouts, a phone for mobile layouts, or both side by side to show responsiveness.
Are my screenshots uploaded?
No. The mockup is rendered in your browser so unreleased designs stay on your device.
