Combining multiple mockup scenes in an external editor

Learn how to show any number of mockups in the same image or video


Rotato comes with a variety of scenes, but sometimes you need something special. Here's how do combine as many Rotato scenes as you want, in a single image or video. We’ll do a simple example here, but you’ll quickly see how you can expand and express your own ideas easily.

Here's what we'll cover in this short tutorial:

And here's a combined video


Okay, let’s get started.

Making an image with multiple mockups

The general idea is to use the magic of transparent backgrounds, and then render each mockup one at a time, and then combine them in an app like Sketch or Photoshop.

Here's a quick video that shows the whole thing.


Steps in the video above

  1. Drag in a design file, image or video
  2. Choose the transparent background color
  3. Optionally, make the scene's aspect square so it's easier to handle
  4. Render the image and save it locally (or just drag it straight into Sketch)
  5. Check in Quick Look that it's transparent
  6. Choose a new rotation for the second phone
  7. Drag in another design file
  8. Render the image and save it locally
  9. Switch to Sketch and drag in your two images
  10. Position them however you like in Sketch
  11. Optionally, change the background color or add stuff below
  12. Export from Sketch

Making a video with multiple mockups

Once again, the general idea is to combine several renders from Rotato, and then combine them in an editor. Since we're making a video this time, we'll use iMovie, but you can use any other video editor, like Adobe After Effects, Premiere or Final Cut Pro. The magic is still in the background, and Rotato will make sure that the video contains a perfect alpha channel, making everything but the phone transparent - even those pixels that are supposed to be only slightly transparent, like shadows.


Steps in the video above:

  1. Optionally, set aspect to 16:9 to get some wiggle room
  2. Position the phone, and make a new keyframe
  3. Position the phone again, and make another keyframe
  4. Render movie, and name it e.g.
  5. Clear the keyframes
  6. Position the phone and make a new keyframe
  7. Position the phone again, and make another keyframe
  8. Render Movie, and name it e.g.
  9. Switch to iMovie, and make a new project
  10. Drag in both clips you just rendered
  11. Place one on top of the other
  12. Click Share and export your new movie