I made this video while making Energy Rehab prototype. During this process I’ve learned one cool After Effects trick. When you prototype screen interfaces you often would like to present them in video scenario. But to do this you have to show them somewhere in the real world let it be a screen or mobile phone. If it’s a computer screen its easy. You can build a interactive website that is a mockup of the interface or even just display static images on you mobile. But what if you want to show devices that don’t exists or show more sophisticated interaction static images are not enough.

Several times I tried to use color keying to remove the screen and substitute it with animation of the interface. And almost always I ended up with something like this.

The problem is that without proper lighting you will always have problems with shadows. But Vinay suggested me a very easy trick. Basically you create 3 layers. One with original video sequence, second one on top of it with animated interface, and third one with part of the video that is covering the screen masked out. Here is a picture explaining it:

It looks like I’m going to use it a lot!