How to create an iPhone mockup.

When you open Protato, the default scene loads with the latest iPhone model. If you want a different iPhone, tap the Devices button (phone icon above the canvas on iPhone, or the device list in the right panel on Mac).

Choose from iPhone 15 Pro Max, iPhone 17, iPhone 17 Air, or iPhone 17 Pro Max. Each model has multiple color options — pick one that complements your app's UI. For example, a white iPhone works well with dark mode UI, while a black iPhone suits light backgrounds.

The color of the iPhone frame affects the overall perception of your mockup. Match the device color to your brand palette or the dominant color in your screenshot.

Open the Settings sheet and go to the Ratio tab. Choose a canvas shape that matches your target output:

• 9:16 — portrait orientation, ideal for App Store screenshots and social media stories
• 16:9 — widescreen, good for website hero images and presentations
• 1:1 — square, perfect for Instagram posts and social media graphics
• 9:19.5 — full phone screen ratio, matches the 6.9-inch iPhone display exactly

Open the Settings sheet and go to the Media tab. Tap the import button and select your app screenshot from Photos or Files. The image appears on the iPhone screen instantly, curved to match the display with realistic reflections.

If the screenshot doesn't fit perfectly, adjust the device position in Pan mode or use the Transform tab to fine-tune the scale and offset. The screenshot wraps around the phone's curved edges automatically for a realistic look.

The default camera angle is a straight-on 3/4 view. For App Store screenshots, a slight 3/4 angle (not completely flat) looks more professional and shows off the iPhone's 3D design.

Switch to Orbit mode and drag to rotate around the phone. Find an angle that shows the screen content clearly while giving the device visual depth. Avoid extreme angles that distort the screen content.

In Pan mode, drag to center the device in the frame. Leave some space around the edges — you'll add background treatment next, and the device shouldn't touch the canvas borders.

Go to the Background tab and choose a style that complements your app:

• Gradient — 80+ presets available. Best for social media and marketing. Pick colors that match your app's palette.
• Mesh — smooth blended gradients like Apple's style. Gives a premium, contemporary look suitable for hero images.
• Solid — single brand color. Cleanest option for App Store screenshots where the focus should be on the device.
• Image — a photo from your library. Use for lifestyle contexts or pitch decks where the device sits in a real environment.

For lighting, the Studio preset works well for most iPhone mockups. If you want the phone to stand out more, try the Dramatic preset — it adds contrast with stronger rim lighting that separates the device from the background.

Tap the Export button. Choose your format and quality:

• PNG — highest quality, preserves transparency if background is set to None
• JPEG — smaller file size, good for web and App Store uploads
• 1x, 2x, 3x — quality scale. 2x or 3x for sharp results on retina displays

After export, your iPhone mockup is ready to use. Drop it into your website hero section, upload it as an App Store screenshot, share it on social media, or include it in a pitch deck. The 3D device frame does the job of communicating professionalism before anyone reads a single word of text.