An iPhone mockup for Instagram: put the screenshot in a phone and let the headline sell it
A raw screenshot in the feed looks like an accident. The same screenshot inside a phone reads as a product: this is a thing, here is what it looks like, here is why you should care. That is why app launches, website reveals, chat jokes and before-and-after posts all reach for the device mockup. The device does the framing so the headline can do the selling.
This guide is the mockup done in dump's browser editor: the iPhone and MacBook bezels with the screenshot inside as a live slot, the three shots that work and the ones that do not, where the headline goes, and the alternative that often beats a screenshot: a chat bubble or a notification you typed yourself, as an editable element.
Apple device mockups: a Studio feature, free to try in the editor. Exports are never watermarked.
The three screenshots that work, and the one that never does
- The hero screen: the one view of your app or site that explains it without words. Crop to it; do not show the whole scroll.
- The moment: a chat, a notification, a confirmation. Something happened on this phone, and the post is about that.
- The before and after: two phones side by side, or one phone and the same screen re-cut. The mockup makes the comparison fair because both sides get the same frame.
- The one that never works: a dense settings page or a spreadsheet. If the text on the screen is smaller than the caption under the post, nobody reads either.
Placing the screenshot: the screen is a slot
In dump the device mockups live in their own panel. Drag an iPhone onto the canvas and upload or drop the screenshot into it; the image becomes a slot inside the screen, so you pan it, zoom it and replace it without touching the bezel. A screenshot taken on a phone matches the screen ratio and fills it exactly; a desktop capture goes into the MacBook, or into the iPhone cropped to the part that matters. The frames are current Apple devices, an iPhone 17, an iPhone Air and a MacBook Pro, every colourway included in the Studio plan.
Tilt is the question. A straight-on phone reads as a spec sheet; a phone rotated a few degrees reads as held. For a launch post keep it straight and centred; for a story-style post rotate it slightly and let it run off the bottom edge of the canvas so the viewer's eye finishes on the screen, not the chin.
The headline sells; the phone only shows
A mockup without a headline is a screenshot with a border. Put the one line above or beside the phone, large, in a Display mood from the Text panel, and keep it to five words: the claim, the number, the name. Colour it from the screenshot so it belongs, and if the phone sits over a photo, give the headline a soft shadow or blur the photo behind it. A second phone is rarely worth it; a second line of text usually is.
When a chat bubble beats a screenshot
Half the screenshots people post are of a conversation, a notification or a comment, and those never need to be screenshots. dump's Tools panel holds editable mockup elements: chat bubbles and iOS interface pieces from TextLab, Instagram mention tags, follow popups. You type the words, and they render sharp at any size, with no cropping, no battery icon and no stranger's name to blur. Put the bubble inside the phone's screen for the full mockup, or drop it straight on a photo without the device at all for a lighter post.
- 1Take the screenshot on the device it will be shown in
Phone screenshot for the iPhone frame, desktop capture for the MacBook. Crop to the hero screen before uploading.
- 2Drag the mockup from the Device mockups panel
Pick the family and colour. Drop the screenshot into the screen; pan and zoom until the important part is centred.
- 3Write the headline
Five words, large, above or beside the phone. Colour from the screen.
- 4Decide on the background
A brand colour for a launch, a soft photo for a lifestyle post, a gradient when the screenshot is busy. Add a soft shadow to the phone so it sits.
- 5Export
PNG if you want the phone on transparency for reuse elsewhere, JPG for the feed. Never watermarked, on any plan.
Labs (TextLab, InstaTag, LocationLab, ReviewLab, ChartLab, PopLab, FolderLab, MineTag, FontLab): free with an account. Exports are never watermarked.
Frequently asked questions
In dump's browser editor, open the Device mockups panel, drag an iPhone onto the canvas and drop your screenshot into its screen. The screenshot becomes a slot you can pan, zoom and replace. Add a short headline beside the phone and export as PNG or JPG. One colour per device family is free; other colourways are on the paid plans.
Current Apple devices: an iPhone 17, an iPhone Air and a MacBook Pro, each in several colourways. One colour per family is free and the rest need a paid plan. The screen image inside each one behaves like a photo slot.
Yes, and it usually looks better than a real screenshot. dump's Tools panel has editable chat bubbles and iOS interface elements from TextLab, plus Instagram mention tags and follow popups. You type the text, place the element inside the phone mockup or directly on a photo, and it renders sharp with nothing to blur out.
Use a portrait canvas, 1080 by 1440 (dump's Instagram Post preset) or 1080 by 1350, so the phone can stand tall with room for a headline above it. For a story, 1080 by 1920. Keep the screen's important content inside the centre of the post so it survives the profile grid crop.
Part of frames and mockups. Start from the main guide: Put a photo in a polaroid frame online, and know when a frame is the wrong fix