How to choose a background for your mockup showcase
Backgrounds are great for setting the context of your mockup animation. For example, you can hint at the app’s personality and tone of voice or give the impression that the app is being used outdoors or on a coffee table.
But let me warn you right off the bat: it’s easy to add too much noise to your slick animation accidentally. 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 exact dimensions as your mockup canvas. For example, you could show a table, a forest 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 are a few exceptions to this rule of thumb. One of them is a gradient background, so let’s look at that next.
Gradients
Here, I’ve dragged in a simple radial gradient in my brand’s green color, which 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 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 accurate to Rotato’s 3D nature.
Environment images
Take a look at the video below, and note how the background 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; use an image that is 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 how many pixels you give it. So, as a rule of thumb, go for big images here.
Let’s look at the example 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 shows your environment image reflected! Neat, huh?
Next, let’s take a look at a small trick that will give you complete control over the reflections.
Matched environment background
We love the reflections in the glass, but we want to tone down that noisy background a bit. And when I say “a bit,” I mean “completely.” So we can now 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 same tone of green as is reflected on the 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. So open Rotato and start experimenting!
Update: In August 2023, Rotato got a refreshed sidebar which makes the above techniques a lot simpler.