Live Mockups · Export · 2 min read
Make a transparent WebM
Switch on Transparent in Live Mockups and export a WebM of your animated mockup that you can place over any page or video.
To make a transparent WebM in ls.graphics Live Mockups, click the round Background swatch next to the 4:3 button, switch on Transparent, then click Export. WebM is already selected, so click Export Video. The file keeps the device and its scene, and the empty area around them is see-through.
Result: iPad Pro.webm, 2882 × 2160 pixels, 60 fps, 6.65 seconds, about 132 MB, with a real alpha channel (in our test).
Watch the steps
Turn on Transparent in Background, then open Export with WebM selected.
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.
Turn on Transparent
In the Background panel, switch on Transparent. The canvas turns into a checkerboard, and a message says that transparency exports in WebM only. To color the backdrop instead, see Change the backdrop.
Open Export
Press Escape to close the Background panel, then click Export, the black button at the top right. WebM is already selected, and 60 fps was selected in our test.
Click Export Video
Click Export Video and keep the tab open while the progress bar runs. In our test, a 6.65-second scene at 60 fps took about 28 seconds. When it finishes, your browser saves the WebM, named after the scene. For a regular video with a backdrop, see Export an MP4 video.