Live Mockups · Media · 2 min read

Put your design on the screen

Replace the picture on a device screen in Live Mockups, fit it, and keep it when you switch scenes.

Find your design

Look for Media at the top of the right panel. The tile shows the picture that is on the device screen right now. Hover over the tile: a pencil (Edit media) and a cross (Remove media) appear on it.

The iPad scene with the Media tile in the right panel and the pencil and cross showing on the tileThe iPad scene with the Media tile in the right panel and the pencil and cross showing on the tile
Hover over the Media tile to show its buttons.

Open Adjust media

Click the pencil. The Adjust media window opens next to the right panel.

The Adjust media window with the Replace Image or Video button, a preview of the current design and the Scale fieldThe Adjust media window with the Replace Image or Video button, a preview of the current design and the Scale field
Adjust media shows a preview of what is on the screen.

Replace the picture

Click Replace Image or Video and choose your image. The preview changes, and so does the screen on the canvas.

The Adjust media preview showing the new design, with the same design on the iPad screen behind itThe Adjust media preview showing the new design, with the same design on the iPad screen behind it
The new design replaces the old one right away.

Scale the picture

Type a number in Scale to zoom into your picture, for example 125. The preview and the screen update together. Set it back to 100 to see the whole picture again.

The Scale field set to 125 and the design enlarged in the preview and on the iPad screenThe Scale field set to 125 and the design enlarged in the preview and on the iPad screen
Scale zooms into the picture.

Close the window

Click × in the corner of Adjust media. Your design stays on the screen.

The iPad on the canvas with the new design on its screen and the same design in the Media tileThe iPad on the canvas with the new design on its screen and the same design in the Media tile
The Media tile shows the design that is on the screen.

Try another scene

Click any scene card in the library, for example a Nothing Phone. Your design comes along to the new device.

A Nothing Phone scene on the canvas showing the same design on its screenA Nothing Phone scene on the canvas showing the same design on its screen
The same design on a different device.

Questions

Which picture fills the screen without cropping?

One with the same proportions as the screen. This guide puts a 3:4 picture on an iPad.

Can I zoom into my design on the screen?

Yes. In Adjust media, type a number in Scale, for example 125. Set it back to 100 to see the whole picture again.

Does my design stay when I switch to another device?

Yes. Click another scene card in the library and your design comes along to the new device.

How do I remove my design from the screen?

Hover over the tile under Media and click the cross, Remove media.

Try it in the Live Mockups

Real 3D devices you turn, light and animate.

Open editor