Live Mockups · Export · 2 min read

Make a transparent WebM

Remove the backdrop and export a WebM of your animated mockup that you can place over any page or video.

Watch the steps

Turn on Transparent in Background, then open Export with WebM selected.

14-second editor demo · no audio
Transcript

An iPad scene sits on a black backdrop. Click the round Background swatch next to the 4:3 button.

The Background panel opens. Switch on Transparent. The canvas turns into a checkerboard.

Close the panel and click Export at the top of the right panel.

The Export window opens with WebM selected and the Export Video button ready.

Open Background

In Live Mockups, open your scene and click the round Background swatch next to the 4:3 button above the canvas.

The round Background swatch to the right of the 4:3 button above the canvasThe round Background swatch to the right of the 4:3 button above the canvas
The Background swatch sits at the top-right of the canvas.

Turn on Transparent

In the Background panel, switch on Transparent. The canvas turns into a checkerboard, and the editor tells you that transparency exports in WebM only.

The Background panel with the Transparent switch on and a checkerboard behind the deviceThe Background panel with the Transparent switch on and a checkerboard behind the device
The checkerboard shows what will be see-through in the file.

Open Export

Close the Background panel and click Export at the top of the right panel. WebM is already selected.

The Export window with WebM selected, the Watermark and Extend to video length options, and the Export Video buttonThe Export window with WebM selected, the Watermark and Extend to video length options, and the Export Video button
With Transparent on, the Export window opens on WebM.

Click Export Video

Click Export Video and keep the tab open while the progress bar runs. When it finishes, your browser downloads the WebM.

Questions

Can I export a transparent MP4?

No. Transparency exports in WebM only, and Live Mockups tells you so when you switch on Transparent in the Background panel.

Why does my preview show a checkerboard?

The checkerboard marks the see-through area around the device. Place the WebM over a page or a video to see the device float on it.

Do I need to keep the tab open while it exports?

Yes. Keep the tab open while the progress bar runs. When it finishes, your browser downloads the WebM.

Try it in the Live Mockups

Real 3D devices you turn, light and animate.

Open editor