Backgrounds are great for setting the context of your mockup animation. You can hint at the app’s personality, tone of voice, or give the impression that app is being used outdoors, or on a coffee table.

But let me just warn you right off the bat: it’s really easy to accidentally add too much noise to your slick animation. If the background becomes too busy, it moves the viewer’s attention from the mockup to the background—and that’s rarely what you want.

So let’s take a look at a few different types of backgrounds that will inspire you for your next app showcase video.

Photo backgrounds

Plain old and simple. Just drag in an image with the same dimensions as your mockup canvas. You could show a table, a forrest or a blue sky. One thing to consider here is that if you animate the mockup on top of a photo background, it can look weird; the two elements are no longer in sync. I found this beautiful background for free on Unsplash.

But there’s a few exceptions to this rule of thumb. One of them is a gradient background, so let’s take a look at that next.

Gradients

Here, I’ve dragged in simple radial gradient in my brand’s green color, and that looks pretty good. You can experiment with linear gradients to create a kind of atmospheric look. You can also give a very subtle gradient a shot, adding just a hint of interestingness to the scene without shouting “hey! Here’s a gradient! I’m using a gradient!”

Okay, let’s move on to something slightly more advanced - and very true to Rotato’s 3D nature.

Environment images

Take a look at the video below, and note how the background actually moves along with the camera. The trick I used here is an environment image. So how do you go about creating this seemingly black magic? It’s almost embarrassingly simple; just use an image that is exactly twice as wide as its height. So, 1000x500 pixels as an example.

One thing to note here is that Rotato will wrap the image in a globe-like shape, and put you, the mockup and the camera right in the center of it. So, as you might have guessed, that will create distortions at the north and south poles, and also how many pixels you give it. As a rule of thumb, go for big images here.

Let’s look at the example from above, but this time as an environment image

‍

‍

And another one, with a repeated pattern from StockTextures

I don’t know if you saw it, but if you look closely at the iPhone mockup’s screen glass, it actually shows your environment image reflected! Neat, huh?

Next, let’s take a look at a small trick that will give you full control over the reflections

Matched environment background

Let’s say we love the reflections in the glass, but we want to tone done that noisy background a bit. And when I say “a bit” I mean “completely”. We can now simply pick another background color, and Rotato will remember the reflection environment and use your new background.

In the video below I went all in and used the color picker to get the exact same tone of green as is reflected ont he device. This gives me an interesting effect where the phone mockup becomes extremely subtle, leaving only a hint of a device mockup, while guiding the viewer’s eye towards the place with the real action: the app on the screen.

‍

As you've seen, the possibilities are pretty much endless. Open Rotato and start experimenting!

‍