Highlights

  • Animations can make your design showcase feel even more real
  • Mockup animations are a high-end effect, used by big brands
  • But there are ways you can make them yourself

Make your design come alive with an animated mockup

How are those high-end ads with animated mockups actually made?
By Rotato
· 5 minutes

Ever wondered how the big companies make those mockup animations where a camera zooms in and out, and the phone rotates, typically at the end of an ad?

Here's an example from Apple:

Here’s how they are created: the company hires a 3D animation freelancer, who will then model a phone in Cinema 4D or Blender, and put your design inside, and then design some really cool animations.

How much was that?

You’re probably thinking, “okay, that sounds expensive.”  Let’s just be honest: it’s not cheap: According to the book The Freelance Manifesto (here’s a free article quoting the book), new freelancers charge $350 per day, and experienced ones go well beyond the $2,000 mark for every day they spend in front of their motion designer monitors.

Even $350 per day is a bit beyond most budgets, especially if you’re a new grad putting together a portfolio. So what can you do?

The do-it-yourself route

Luckily, there’s a ton of people on Youtube ready to teach you how to do it, like in this tutorial from Dansky. You can also go all the way and teach yourself Blender, a powerful and free 3D animation app for both Mac and Windows. Here’s a great (and often hilarious) tutorial series from Blender Guru if you want to get started. It's a great skill to get!

3D for the rest of us

While 3D certainly is a fun and useful skill, most of us don't have the time, money or patience for that learning curve. But good news, easier 3D modeling and animation is starting to appear. One of them is Rotato, but if you want to go just a step deeper and get your hands dirty with making 3D models, take a look at Spline, too.

Whichever route you take, have fun! 3D is a fun place to hang out.

Next steps

How to do it with Rotato

Examples from Rotato

Example
using the
Universal
mockup
Video showing a
Mockup Animation
using the
Universal
mockup
Example
using the
Generic Phone
mockup
Video showing a
Mockup Animation
using the
Generic Phone
mockup
Example
using the
Macbook Air
mockup
Video showing a
Mockup Animation
using the
Macbook Air
mockup
Example
using the
Pixel 4a
mockup
Video showing a
Mockup Animation
using the
Pixel 4a
mockup
Example
using the
Apple Watch
mockup
Video showing a
Mockup Animation
using the
Apple Watch
mockup
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.
No items found.

More mockup guides