Phone UI
How to Put a Chat Screenshot in a Phone Mockup
Turn a chat or post into a polished phone mockup: when to use one, which size for each platform, picking backgrounds and phone colours, and keeping text readable.
By The Mocknex team · Published · 7 min read
A bare screenshot is a grey rectangle. Put the same image inside a phone, on a background with some colour and a soft shadow, and it suddenly looks like something you meant to show. That’s why landing pages, pitch decks and launch posts almost never use raw screenshots. This guide covers when a phone mockup helps, how to make one from a chat or post you built in Mocknex, and the small decisions — size, background, how much text — that decide whether it looks polished or cluttered.
Mockup or plain screenshot?
They do different jobs, and picking the wrong one is the most common mistake.
| Use a plain screenshot when… | Use a phone mockup when… |
|---|---|
| The viewer should feel they’re looking at the phone itself — a text-story video, a film prop shown full screen | You’re presenting the conversation to someone: a slide, a landing page, a portfolio piece |
| The image will be cropped or zoomed in an editor later | The image goes straight into a feed, where it needs to stand out from other posts |
| You’re stacking several screens in a video timeline | You want one strong image — a launch post, a thumbnail, a hero image |
For TikTok-style text stories, the plain screen usually works better: the phone frame shrinks the text and reminds people it’s a graphic. For anything that’s about the conversation rather than inside it, use the mockup.
Step by step
- Build the scene in any generator — for example the WhatsApp chat generator, the iMessage generator or the tweet generator.
- Click Export. At the top of the dialog, set Output size: Device gives a 1600 × 2000 (4:5) mockup; Vertical, Portrait, Square and Wide use 1080 × 1920, 1080 × 1350, 1080 × 1080 and 1920 × 1080.
- Under Mockup style, pick a look. The first four are shown straight away; Add more mockups opens the rest. Every thumbnail is a live preview of your own scene.
- Choose a Phone colour (black, silver, gold, blue, pink or green) if the style shows a phone.
- Click Download PNG mockup, or pick the 3× option for print and 4K slides. JPG, Copy image and Share use the same mockup.
Select Simple to go back to the plain screenshot. Nothing is uploaded: the mockup is drawn in your browser, like the rest of the export.
Pick the size for where it’s going
Choosing the output size first saves a trip through an image editor, because the background is drawn at the exact size the platform expects.
| Destination | Output size | Why |
|---|---|---|
| Instagram or Facebook feed | Portrait 4:5 (1080 × 1350) | The tallest shape the feed shows without cropping |
| Stories, Reels, TikTok, Shorts | Vertical 9:16 (1080 × 1920) | Full screen; leave the top and bottom clear for the app’s buttons |
| X, LinkedIn, slides, YouTube | Wide 16:9 (1920 × 1080) | Matches slide and video frames; the phone sits in the middle with room for a headline beside it |
| Website hero, portfolio, README | Device (1600 × 2000) | A tall image that crops well on mobile layouts |
| Profile grids, carousels | Square 1:1 (1080 × 1080) | Lines up neatly in grids |
On a wide 16:9 canvas the phone takes up only the middle third. That’s deliberate: it leaves space for a title or caption you add in your slide or video editor.
Choosing a background and phone colour
The background should support the screen, not compete with it. A few rules of thumb:
- Light chat, dark background. WhatsApp and iMessage screens are mostly white or beige, so they pop on Midnight, Forest, Ocean or Spotlight. On a pale background like Sky or Peach they still work, but the phone’s shadow does more of the work.
- Match the phone to the background. A black phone on a black Spotlight background loses its outline — switch to silver. A silver phone on a pale Lavender background can look washed out; black or blue gives it an edge.
- Use brand colours deliberately. If the post is for a brand, pick the background closest to its palette and keep the phone neutral. Forest and Mint are green-led, Ocean and Blueprint are blue, Sunset and Peach are warm.
- Tilt is for energy, not for reading. Float, Aurora, Forest and Sky lean the phone a few degrees. That feels lively in a launch post, but it’s harder to read a long conversation at an angle. Use a straight style when the words matter most.
- Several phones for a launch look. Fan spreads five phones on white, Trio layers three, and Duo 3D angles two phones on a purple gradient. The phones behind the front one show the same screen, dimmed, so the eye goes straight to the centre. Showcase turns one phone in 3D next to a big headline taken from your view name — rename the view tab to change it.
- Card skips the phone entirely. It puts the screen on a white card over a dotted background — good for documentation, tutorials and anywhere a phone frame would look like marketing.
Keep the text readable
A mockup shrinks the screen. In a 4:5 feed image the phone fills roughly three quarters of the height, and on a phone screen that whole image is about 10 cm tall — so a 20-message conversation turns into grey lines. What helps:
- Cut to the moment. Four to eight messages is plenty for a single image. If you need the whole conversation, use Split into carousel slides or a video instead.
- Raise the text size. In the editor’s Preview appearance panel, Text size goes up to 130% for chats. A small bump makes a big difference once the screen is scaled down.
- Turn off what isn’t needed. Hiding the date chip or message times removes clutter that nobody reads at this size.
Mockup videos
The same styles work for video. With a mockup selected, Export video records the chat playing inside the phone — typing indicators, message timing and sounds included — as MP4 or WebM at 720p or 1080p. With Output size set to Device, the video is 4:5 (1080 × 1350 at 1080p); choose Vertical for a 9:16 Reel or TikTok.
A mockup video is a good fit for product demos and launch posts, where seeing the phone helps people understand what they’re watching. For story-style videos, where you want people reading every line, the plain screen is still easier to read — see how to make text message videos.
Doing it in other tools
If you already have a screenshot from a real app, a dedicated mockup tool is the better route: Figma has free community phone frames you can paste an image into, and sites such as Shots.so or Mockuuups place any image in a device. The advantage of exporting the mockup from the generator is that there’s no second step — you edit the conversation and the mockup updates with it, and the screen is redrawn at the right width instead of being stretched.
Common mistakes
- Two phones. If Phone frame is switched on in the editor, the screenshot already has a phone. The mockup then adds only background and shadow — but for the cleanest result, switch Phone frame off and let the mockup draw it.
- A clock that contradicts the story. The status bar still shows a time. If the chat is supposed to happen at night, 9:41 in the corner looks wrong.
- Too many styles in one series. If you post several mockups as a carousel or in a deck, keep the same background and phone colour so they read as a set.
- Real people’s names. A polished mockup looks more official, which makes it more likely to be taken as real. Use invented names, as our acceptable use policy asks.
FAQ
Is the phone mockup free?
Yes. Every mockup style, phone colour and size is free, with no watermark and no account.
Does the mockup use an official Apple or Samsung image?
No. The phone is drawn from simple shapes when you export, so there are no third-party device photos or logos in the file. It shows an iPhone-style island or an Android-style camera hole depending on the OS you chose in the editor.
Can I get a transparent background?
Not with a mockup style — they all include a background, because the shadow needs something to fall on. If you want to place the phone on your own background, export with Simple and Phone frame switched on, then add the background in your design tool.
Does it work for posts and comments, not just chats?
Yes. Tweets, Instagram posts, comments, notifications and call screens can all be exported in a mockup. Video export is available for chats.