.svg)
Start with a useful reference image
Find an image that clearly shows the device edges and the amount of screen visible. A three-quarter shot is easier to trace when you can see the top, one side, and the display. Crop unrelated page content before uploading if it distracts from the phone. You are using this image to guide your own composition, so make sure you have the right to use it for your intended work. The editor does not detect an angle automatically; matching is a manual visual task.
Open the iPhone mockup editor and choose the device you want to present. You can start with the iPhone 18 Pro, the Pro Max, or the foldable Duo. Upload your app screenshot under Add your design before you begin matching the perspective.
Add the reference behind the mockup
Turn on Trace a reference in the settings panel and upload your inspiration image. It appears behind the 3D device at 25% opacity. The on-canvas controls let you change Reference opacity and Mockup opacity independently. Lowering the mockup opacity for a moment can reveal how closely its edges line up with the image beneath it. The uploaded reference is a guide layer in the editor, not part of the final PNG.
The canvas has an Editing switch. Mockup is the default target: dragging controls the phone. Choose Reference to work on the guide instead. Drag the reference to move it; use an edge or corner to resize it while preserving its aspect ratio. Use the circular handle above the image or the Rotate reference slider and degree field to set its angle. This gives you a reference overlay that is easy to place without distorting the source image.
Match position, scale, and perspective
First, place the reference so the phone in the image occupies the part of the canvas you want for the final composition. Return the Editing switch to Mockup, then begin with the closest camera preset. Front is useful when the reference shows mostly screen; three-quarter, low, high, or top views are useful when the image reveals more of the hardware. Drag the 3D phone until the visible side, top edge, and screen shape resemble the guide. Move and zoom the phone to align its overall footprint.
Next, compare the four screen corners and the nearest frame edge. If one side is too visible, rotate the model toward the viewer; if the top or bottom looks too prominent, tilt the view. Use Rotate frame for a small clockwise or counterclockwise adjustment. The reference is a flat image, so changes in camera perspective will not always match every pixel. Prioritize the phone silhouette and the screen plane rather than chasing a perfect outline.
Adjust light and finish, then export
Once the angle is close, choose a finish and adjust Studio lighting. Move the sun icon around the canvas to change where highlights fall, and use Light intensity to strengthen or soften them. If your reference has a flatter graphic style, try the unlit appearance instead. On the Duo, adjust the fold angle before fine-tuning the camera: the hinge changes the silhouette and the amount of inner screen visible.
Turn Trace a reference off to review the composition alone. Turning it back on restores the same guide placement and opacity settings if you want another pass. When you export, the reference image, its handles, and the opacity controls are omitted. Only your rendered iPhone mockup and uploaded screen design appear in the transparent PNG. For the complete upload, crop, lighting, and download sequence, see how to make an iPhone mockup for free.