Quick answer: start from the original, full-resolution screenshot (not one sent through a chat app), pick the canvas for where the image will be published, place the screenshot in an iPhone frame whose orientation matches it, use Fit so nothing important is cropped, keep the phone large with one short headline, and check the export at the size people will see it. In MockupX that means: choose an output frame, drop or paste the screenshot, choose an iPhone 17, 17 Pro, 17 Pro Max or iPhone Air frame and finish, adjust layout, padding and shadow, then export.
When an iPhone mockup helps, and when it doesn't
A device frame answers one question instantly: “this is a phone app.” That is worth a lot on a landing-page hero, a launch post, a feature announcement or a pitch deck, where viewers glance rather than read. The frame also gives a flat screenshot a physical silhouette, which separates it from the background without heavy effects.
The cost is space. The frame's bezel and the margin around the phone shrink the screen itself, and on a small placement such as a feed thumbnail or a help-center image, every pixel of interface matters more than the hardware outline.
Marketing and launch artwork
Hero images, social posts, decks, store cards and announcements where recognizing “mobile app” matters more than reading every label.
Detail and documentation
Help articles, UI reviews, changelog close-ups and tiny placements. A frameless screenshot card with rounded corners and a soft shadow keeps the interface larger.
One message
The default. One screen, one benefit, one headline. Easiest to read at any size.
A short flow
Use when the story is a sequence (before and after, step one to step three) or when showing iPhone next to another device. Make one phone dominant.
iPhone frames available in MockupX
MockupX uses device frames for current Apple hardware. Each iPhone model is available in portrait and landscape, in the finishes listed below:
| Model | Finishes | Orientations |
|---|---|---|
| iPhone 17 Pro Max | Cosmic Orange, Deep Blue, Silver | Portrait, landscape |
| iPhone 17 Pro | Cosmic Orange, Deep Blue, Silver | Portrait, landscape |
| iPhone 17 | Black, Lavender, Mist Blue, Sage, White | Portrait, landscape |
| iPhone Air | Cloud White, Light Gold, Sky Blue, Space Black | Portrait, landscape |
The same editor has Android frames (Pixel 7 Pro and Nothing Phone), iPad Air, iPad Pro and iPad mini, MacBook Air and MacBook Pro, Studio Display, Studio Display XDR and iMac, Apple Watch Series 11 and Ultra 3, Safari and Chrome browser toolbars, and a frameless screenshot mode. If your app also runs on iPad, the iPad mockup page covers the tablet frames; for Android builds, see the Android mockup generator.
Picking a finish: choose for contrast with the background, not for brand color. A Silver or White phone disappears against a pale canvas; a Deep Blue or Space Black phone disappears against a dark one. If the app has a dark interface, a light finish on a mid-tone background gives the clearest edge.
Capture a clean iPhone screenshot first
A mockup cannot restore detail missing from the source. Everything starts with a full-resolution capture of a settled, realistic screen.
On a physical iPhone
- Face ID models: press the side button and volume up button together, then release (Apple Support).
- Home-button models: press the side button (or top button) and the Home button together.
- Move the original file to your computer with AirDrop, a cable or a cloud folder, or use MockupX's Phone upload button, which shows a code to scan so the phone sends the image straight into the editor slot. Avoid messaging apps and social DMs; many resize and recompress images.
In the iOS Simulator
xcrun simctl io booted screenshot home.pngsaves a PNG of the booted simulator.xcrun simctl status_bar booted override --time 9:41 --batteryState charged --batteryLevel 100 --cellularBars 4 --wifiBars 3fixes the status bar so every capture in a set matches.xcrun simctl status_bar booted clearresets it.- Simulator captures have no notifications, no low-battery warnings and no personal data, which is why most store and marketing sets are made there.
Before you press the buttons
- Use demo data. Create a sample account with fictional names, plausible numbers and a populated state. An empty list says nothing about the product.
- Wait for the screen to settle. Skeleton loaders, half-drawn charts and placeholder images make a working feature look broken.
- Silence notifications. Turn on a Focus mode so a banner doesn't land on top of the interface.
- Remove debug overlays such as test-build banners, FPS counters and developer menus.
- Decide light or dark. Switch the app's own appearance; a dark phone frame does not make a light app look dark, and recoloring a screenshot misrepresents the product.
- Version your captures. Name files by feature and date (
checkout-v3_2026-10.png) so last quarter's screen with removed controls doesn't slip into a launch graphic.
Choose screens that explain outcomes
Start with what a new viewer cares about, not with the first screen in the app. The home tab may establish breadth; a focused feature screen communicates a specific benefit faster. Login forms, permission prompts, onboarding carousels and splash screens rarely belong in a mockup.
A finished report, a booked appointment, a completed workout. They show what the user gets.
The moment of doing: a one-tap check-in, a search with results, a composer with real content.
The feature competitors lack. Give it its own phone and headline rather than a corner of another screen.
Widgets, Lock Screen, Dark Mode. Useful later in a sequence, rarely as the lead image.
Match the screenshot to the frame
An iPhone screenshot and the frame's screen opening have nearly the same tall proportions, but not always identical ones, especially if the capture came from a different iPhone model or was cropped. MockupX gives two image-sizing modes:
Whole screenshot visible
Scales the image to fit inside the screen area. Nothing is cut off; if proportions differ, a thin band can appear. Use it when the tab bar, header or a bottom button must stay visible.
Edge-to-edge screen
Scales the image to cover the screen area and crops whatever overflows. Looks seamless, but can clip the status bar, header or tab bar. Check all four edges after switching.
- Orientation first. A portrait capture goes in a portrait frame. Rotate the frame only when the app itself is landscape (games, video, a landscape iPad-style layout); rotating readable UI sideways for style hurts legibility.
- Crop before framing, not after. Use the Edit button on the media slot to crop the source if you want to remove a status bar or zoom into one region, then place it.
- Don't put a desktop screenshot in a phone. It shrinks to illegibility and implies a mobile interface the product may not have. Use a browser or laptop frame instead.
How to make an iPhone mockup in MockupX, step by step
- Pick the output frame.In the Frame tab, choose a preset (HD, Square, Portrait, Story, X post, App Store sizes and more) or type a custom width and height between 320 and 6000 px. Doing this first stops a last-minute crop.
- Choose iPhone as the mockup type.Select the model, orientation and finish. The default is iPhone 17 Pro in Silver, portrait.
- Add the screenshot.Drop a file on the canvas, paste from the clipboard, browse for a file, use Phone upload, or use Capture to grab a window from your desktop.
- Set Fit or Filland check the top and bottom of the screen for clipped navigation.
- Choose a layout preset.Single float, left, right, close-up or tilt for one phone; duo, staggered, overlapping, trio, fan, stack or cascade for two or three.
- Tune the composition.Pick a background, adjust padding (3–24%), corner radius, shadow, zoom and tilt (up to 18° each way). Drag the phone to reposition it.
- Add copy if it helps.Turn on Optional content for a headline (up to 100 characters) and description (up to 180). One benefit beats a feature list.
- Export and inspect.Choose PNG or JPEG (WebP on paid plans), 1× or 2×, download, and open the file at its real display size.
Upload or paste a screenshot, choose an iPhone 17 frame and a layout, then export from the browser.
Layouts: one phone, two phones, three phones
Each extra phone halves the attention the others get. Use multiple phones only when each one adds something.
| Layout | Best for | Watch out for |
|---|---|---|
| Single float / close-up | Hero images, single-feature posts, store cards | Too much empty canvas around a small phone. |
| Single left / right | Wide canvases with a headline on the other side | Headline and phone fighting for the center. |
| Tilt | Launch posts and social graphics that need energy | Text inside the screen becomes harder to read as the angle grows; stay modest. |
| Duo / staggered / overlap | Before and after, two steps, light and dark mode | Overlap hiding the control that matters. |
| Trio / fan / cascade / stack | A three-step flow or a feature overview | Each phone becoming too small to read on mobile. |
Showing iPhone alongside an iPad, Mac or Android device? Use the multi-device mockup generator workflow, and only show devices the product actually supports.
Canvas sizes by destination
These are MockupX output presets and how a phone composition usually works on each. Platform rules change, so for a specific network check the relevant size guide before a campaign.
| Destination | MockupX preset | Composition that works |
|---|---|---|
| Landing-page hero | HD 1920 × 1080 or Presentation 1920 × 1280 | Phone off-center with the headline beside it; a duo or trio layout fills the width. |
| Pitch deck slide | HD 1920 × 1080 | One phone, large, with very little copy; the speaker supplies the story. |
| Instagram feed | Square 1080 × 1080 or Portrait 1080 × 1350 | Phone centered, headline above, nothing important near the edges. |
| Instagram or Facebook story | Story 1080 × 1920 | One phone, headline in the upper middle, clear space at the top and bottom. |
| X post | X post 1600 × 900 | Wide composition; a tilted phone plus short headline reads well in the timeline. |
| App Store | iPhone 6.9″ · 1320 (1320 × 2868) | Exact store size, exported at 1×; see the App Store size guide. |
For store submission sizes, use the App Store screenshot size guide. For feed, carousel and story crops, see the Instagram post mockup guide and the social media image sizes reference.
Plan an app showcase as a sequence
Store galleries, carousels and launch threads are read in order. Plan the sequence before styling individual images.
Keep device scale, headline position, background family and finish identical across the set so only the screen changes. Viewers then notice the product, not the presentation. Set up the first image, note its values (frame, background, padding, shadow, layout), and reuse them for every other card.
Worked example: a budgeting app launch
A team launching a budgeting app needs a website hero, an Instagram post and a story, all from the same captures.
- Sources.Three simulator captures at full resolution with a fixed 9:41 status bar: the monthly overview with sample spending, the add-expense sheet, and a savings goal. All names and amounts are fictional.
- Hero (1920 × 1080).Duo layout: overview phone in front, savings goal behind it, iPhone 17 Pro in Deep Blue on the Paper background. Headline on the left: “Know where every dollar went.”
- Instagram post (1080 × 1350).Single phone with the overview, centered, headline above in two lines. The second phone was dropped because it became too small to read in the feed.
- Story (1080 × 1920).Single phone with the add-expense sheet, headline in the upper middle, clear space at the top and bottom for the app's own overlays.
- Check.Each export was viewed on a phone at actual size. The hero's rear phone was nudged so it didn't cover the overview's total.
Export settings for iPhone mockups
Default for UI
Keeps text edges and flat colors crisp. Required if you chose the transparent background and want the phone as a cut-out.
Smaller files, no transparency
Good for photographic backgrounds and for App Store uploads, where an alpha channel is not allowed. Transparent areas become white.
Web delivery (paid plans)
Smaller files for your own site when the destination accepts WebP. Not accepted by App Store Connect.
Double resolution (paid plans)
Doubles width and height for high-density web placements. Don't use it for store uploads that need an exact size.
Export requires sign-in. Free exports are PNG or JPEG with a MockupX watermark, which is fine for drafts and reviews; a paid plan removes it.
iPhone mockup mistakes and how to check for them
| Mistake | How to spot it | Fix |
|---|---|---|
| Soft or blurry screen | Zoom the source to 100%: if text is already soft there, the mockup can't fix it. | Recapture at full resolution; don't use chat-app copies. |
| Clipped tab bar or header | Look at the top and bottom of the phone screen after choosing Fill. | Switch to Fit or crop the source first. |
| Phone blends into background | Shrink the export to thumbnail size; the outline should still be visible. | Change the finish or background for contrast; add a little shadow. |
| Shadow or tilt clipped at canvas edge | Check all four corners of the downloaded file. | Reduce zoom, add padding or move the phone inward. |
| Private data in the screen | Read every visible name, email, balance and notification. | Recapture with a demo account; blurring one cell misses others. |
| Desktop UI inside a phone | Text is microscopic and the layout is clearly not mobile. | Use a browser or MacBook frame instead. |
| Different models or finishes across a set | Put the exports side by side. | Reuse one model, finish and scale for the whole sequence. |
| Watermark on a final asset | Open the file and look at the center and corner. | Export from a paid account for final delivery. |
iPhone mockup generator FAQ
What is an iPhone mockup generator?
A tool that places an app screenshot inside an iPhone-shaped device frame and composes it on a background, often with a headline, so the result can be used on a landing page, social post, deck or store listing.
Which iPhone frames does MockupX have?
iPhone 17, iPhone 17 Pro, iPhone 17 Pro Max and iPhone Air, each in portrait and landscape and in the finishes Apple sells for that model (for example Cosmic Orange, Deep Blue and Silver for the Pro models). Android, iPad, MacBook, desktop, Apple Watch and browser frames are also available.
What screenshot should I upload for an iPhone mockup?
The original PNG from the phone or simulator, at full resolution. Avoid copies sent through messaging apps or downloaded from social posts, which are often resized and recompressed.
How do I take a clean iPhone screenshot?
On iPhones with Face ID, press the side button and volume up together; on Home-button models, the side (or top) button and Home button. In the iOS Simulator, xcrun simctl io booted screenshot saves a PNG, and xcrun simctl status_bar can fix the clock and battery so every capture matches.
Should every iPhone mockup include a device frame?
No. A frame tells viewers the image is a mobile app and makes it feel tangible, but it uses space. For dense screens or very small placements, a frameless screenshot card keeps the interface larger.
Can I use the same iPhone mockup for the App Store and Instagram?
Reuse the source screenshots, colors and headline style, but rebuild the canvas for each destination. The App Store needs exact pixel sizes such as 1320 × 2868; an Instagram portrait post is 4:5. Scaling one into the other crops or shrinks the phone.
Why does my iPhone mockup look blurry?
Usually the source is too small for the area it fills, or it was compressed before upload. Check the original at 100% zoom, recapture at full resolution, and compare the final export at the size it will actually be shown.
Is the MockupX iPhone mockup generator free?
You can build mockups in the browser for free. Exporting requires sign-in; free exports are PNG or JPEG with a MockupX watermark, and paid plans remove the watermark and add WebP and 2× export.