To make 3D device mockups for app screenshots and launch visuals, decide the output first, then the tool. App Store and Google Play screenshots must be flat JPG or PNG with no transparency. A landing page can use a transparent PNG, a short MP4 or an interactive 3D embed. A launch video needs an animated export. Browser editors (HorizonX Mockups, Shots, Previewed), the Rotato app, Figma plugins and community files, and your own Blender scene all cover part of that list, with different licences on the device models.
This guide compares the options by output, where you edit, device model licence, resolution and transparency, then ends with a checklist for store and landing page visuals. Features, specs and licence terms were read on each vendor's own pages on 2026-11-10. Prices change often and are left out except for HorizonX.
Start with where the image will be used
The destination sets hard limits that the mockup tool has to meet.
| Destination | Format that works | Size and limits | Transparency |
|---|---|---|---|
| Apple App Store screenshots | JPG or PNG | 1 to 10 per size; iPhone set required (for example 1206x2622 or 1179x2556 portrait); 13-inch iPad set if the app runs on iPad | Not allowed |
| Google Play screenshots | JPG or 24-bit PNG | 320 to 3,840 px per side, long side at most twice the short side | Not allowed |
| Google Play feature graphic | JPG or 24-bit PNG | 1024x500 | Not allowed |
| Landing page hero | PNG, WebP, MP4 or an interactive embed | Size it to the layout at 2x density | Useful, so the device sits on any background |
| Social posts and launch videos | JPG or MP4 | 9:16, 4:5, 1:1 or 16:9 frames | Not needed |
Sources: App Store screenshot specifications say images "can't include alpha channels or transparencies" and list the accepted sizes; the Google Play graphic assets guide gives the Play limits. Check both before each release, since Apple adds sizes when new devices ship.
Two consequences matter for mockups. First, a transparent PNG straight out of a mockup tool will be rejected by the App Store: flatten it onto a background colour or export JPG. Second, Apple's App Review Guidelines (2.3.3) say screenshots should show the app in use, not just title art, a login page or a splash screen. A device frame around a real screen is fine; a pretty device around a logo is not.
Mockup tools compared by output
| Tool | Where you edit | Output | Notes (checked 2026-11-10) |
|---|---|---|---|
| HorizonX Mockups | Browser | PNG, JPG, MP4, interactive HTML embed | 16 mockups; stills up to 4,096 px on the long edge, video up to 1,920 px; transparent PNG where the scene allows; exporting needs a plan |
| Rotato | macOS app; web version in public beta | Images and video, including ProRes 4444; App Store images | 30+ devices, up to 8K; one-time purchase plans; Figma plugin |
| Shots | Browser | Images, animated mockups, video zoom | Transparent backgrounds and export presets; Free, Basic and Pro plans |
| Previewed | Browser | App Store and Google Play screenshot sets, 3D snapshots, animations | Built around store screenshot layouts |
| Mockuuups Studio | Desktop app (Mac, Windows, Linux) and plugins | Photo-style scene mockups | 5,300+ mockups; plugins for Figma, Sketch, Adobe Express, Penpot and Frontify |
| Figma Community files | Figma | Whatever you export from the frame | Free files are CC BY 4.0, so credit is required |
| Blender scene | Blender on your machine | Any still or animation you can render | Full control; you supply and license the device model |
| fastlane frameit | Command line | Framed screenshots with background and caption | Automates frames for iOS, macOS and Android screenshots |
Sources for each row: the HorizonX mockups guide and HorizonX docs, Rotato and Rotato pricing, Shots and its terms, Previewed, Mockuuups Studio, Figma's Community licensing help, and the frameit docs.
Browser editors, Figma plugins or Blender: which way to edit
Browser editors are the fastest path from a screenshot to a finished render. You drop in the screen, turn the device, pick a background and export. The trade-off is that you work inside the scenes and devices the tool offers. HorizonX, Shots and Previewed work this way; Rotato's web version is in beta, and its main app is for macOS.
Figma plugins and community files keep the mockup next to the design. That suits teams who iterate on screens daily and want the frame to update with them. Most are flat or fixed-angle images rather than a 3D scene you can rotate freely, and community files carry their own licence (see below).
A Blender scene gives total control: any angle, any light, any material, any animation length, at any resolution your machine can render. It also means you model or source the device, set up materials for the screen, light it and render each change yourself. It is the right choice for a hero animation that will run for months, and a slow one for weekly store updates.
fastlane frameit is the odd one out: no 3D, but it frames screenshots from the command line, adds a background and caption, and can run in the same pipeline that captures the screenshots. If you ship a localized app in many languages, automating the flat store set and using 3D only for marketing visuals saves real time.
Device model licences and Apple's bezel rules
A 3D device mockup has three layers of rights: the tool's terms, the licence of the device model inside it, and the device maker's rules for showing its hardware.
- Device model licence. On HorizonX, the phone mockup uses a third-party "Phone 17 Pro Max" model by Ranguel and the laptop uses a "MacBook Pro M3 16-inch 2024" model by jackbaeten, both under CC BY 4.0, with logos removed. The device mockup page shows the credit and asks you to keep it with what you publish. Renders themselves are covered by the HorizonX commercial licence (client work, ads and store listings), and the templates cannot be resold, per the HorizonX FAQ.
- Figma Community. Per Figma's help page, free community files are under CC BY 4.0 (credit the creator), and paid files use the Community Paid Resource License.
- Your own Blender scene. If you download a phone model from Sketchfab or elsewhere, check its licence: CC BY needs credit, NC versions exclude commercial use, and the logo on the model is a trademark either way.
- Apple hardware in marketing. Apple's marketing guidelines ask developers to use the Apple-provided product bezels without modification, and list reflections, shadows, tilting, animating and spinning as modifications. The bezels are on Apple Design Resources as Photoshop and PNG files. Many tilted 3D iPhone renders do not meet that rule, so for materials where Apple's guidelines apply, either use Apple's flat bezels or a generic device without Apple branding, and decide with whoever handles legal review.
Resolution and transparency in practice
Resolution. Store screenshots have exact pixel sizes, so export at or above the target and resize down, never up. For a landing page, export at twice the displayed size for high-density screens: a hero device shown at 600 px wide needs a 1,200 px image. HorizonX exports stills at up to 4,096 px on the long edge (JPG also at 1x or 2x scale) and MP4 up to 1,920 px; Rotato offers up to 8K. Very large exports matter for print and video editing more than for the web.
Transparency. Transparent PNGs are the most flexible asset for web and slides, because the device drops onto any background. On HorizonX, PNG is lossless with an optional transparent background where the scene allows it. Keep in mind:
- A soft shadow on a transparent PNG will look different on a dark background than on a white one; preview it on the real page.
- Transparent PNGs are large. For the web, convert to WebP with alpha after export.
- Video is usually opaque. If you need a transparent animation for editing software, Rotato's ProRes 4444 export carries alpha; for the web, an opaque MP4 on a background that matches the page is simpler.
Video and interactive embeds. For launch visuals, a 3 to 15 second loop shows more than a still. HorizonX exports H.264 MP4 at 30 or 60 fps with 9:16, 4:5, 1:1 or 16:9 frames, and an HTML embed that visitors can drag to rotate. If you use an embed on a landing page, keep a still image as the poster so the section never shows empty while it loads; the hero visuals guide covers when motion helps a hero and when a still is better.
HorizonX Mockups: what it covers and what it costs
The HorizonX mockups hub lists 16 mockups (checked 2026-11-10). The device ones are a phone, a phone held in a hand, a foldable phone pair, a tablet, a laptop, a desktop display, a home display, a watch, and rock-themed phone and tablet scenes. The others cover a business card, a credit card, a glass tile, a "Dune" card, coffee bag packaging and a cap.
What the mockups guide and the HorizonX docs state:
- One scene exports four ways: PNG (lossless, optional transparent background), JPG (1x or 2x), MP4 (H.264, 3 to 15 seconds or the length of your keyframe timeline, 30 or 60 fps) and an interactive HTML embed.
- Exports carry no watermark.
- Anyone can open every mockup and try it in the browser; exporting needs a plan. Plans are Starter at $24.99, Pro at $39.99 and Max at $99.99 a month, and MP4 exports per 30 days are 20, 100 and 400 respectively, per the HorizonX pricing page and FAQ.
It is not the right pick if you need hundreds of device models, an App Store screenshot layout tool with captions, or a fully automated pipeline. Previewed and frameit are built for those jobs.
Checklist for App Store and landing page visuals
Before you export:
- [ ] The screen shows the app in use, not a splash screen or login.
- [ ] Screenshots are captured at native resolution, with real-looking content and no personal data.
- [ ] The status bar is clean (full battery, sensible time) or hidden.
- [ ] The device model's licence allows commercial use, and you know what credit it requires.
- [ ] If Apple hardware appears, you checked the bezel rules for this use.
For App Store and Google Play:
- [ ] Exact pixel size for each required device size.
- [ ] JPG, or PNG flattened with no alpha channel.
- [ ] Captions sit beside or above the device and are short enough to read on a phone.
- [ ] Every localized set uses the same layout, so updates only swap screens.
For landing pages and launch posts:
- [ ] A transparent PNG or WebP at 2x the displayed size, previewed on the real background.
- [ ] Video loops are short, muted, and have a still poster image.
- [ ] Interactive embeds have a static fallback and do not block the page from loading.
- [ ] File names, sources and licences are recorded with the asset, as in the visual asset handoff checklist.
FAQ
Can I use a 3D device mockup in App Store screenshots?
Yes, as long as the image follows the size and no-transparency rules and shows the app in use. If the device is Apple hardware, also read Apple's marketing guidelines on modifying product bezels, since tilting, shadows and reflections count as modifications there.
What is the best free way to make device mockups?
Apple's Design Resources bezels and fastlane frameit are free and cover flat frames. Free Figma Community files work if you credit the creator. Shots lists a free plan. For 3D scenes, Blender is free, but you need a device model whose licence allows commercial use.
Do I need transparent PNGs?
For a landing page or slides, yes, they are the most reusable. For store screenshots, no: both stores reject alpha channels, so export JPG or flatten onto a background.
Next step
Pick the destination, check its size and transparency rules, then render the device. To try it in the browser, open the HorizonX phone mockup, drop in a screenshot and set the angle before you decide on a plan.