Augmented Reality


Create stunning augmented reality UI animations by combining video footage with your design source files using Adobe After Effects. Learn how to track objects in your footage with planar and 3D trackers, add your graphics to a scene, add your UI design to a device in a shot, use ‘in camera’ depth of field, how to do a quick composite, and color grade your footage using a beautiful ‘split tone’ effect for final presentation.


Augmented Reality

Learn how to put your UX/UI designs into video.

Learn how to create stunning augmented reality videos with these 2 tutorials.

Tutorial #1 – Tracking, intro to 3D cameras and depth of field, split-tone color grading
Duration: 50 min

In this first tutorial, you will learn how to track objects in video footage. You’ll learn how to use Mocha AE (which comes bundled with After Effects) to analyze and track any object in your video. You’ll learn how to set up 3D cameras using true depth of field to create beautiful photographic compositions from your designs. Finally, you’ll learn how to split-tone color grade your video for final presentation.

Tutorial overview

01:15 – Intro
02:26 – Review assets
05:42 – Tracking
11:48 – Using tracking data
16:54 – Adding graphics to your scene
27:13 – Animating UI
35:54 – Motion blur overview
39:07 – Split-tone color grading
42:42 – Alternate version in true 3D
44:29 – In camera depth of field
46:33 – Using 3D lights to light your design

Tutorial #2 – Screen replacement, 3D camera solving, quick compositing, turning your designs into 3D scenes
Duration: 40 min

In the second tutorial, you’re going to build on the previous skills by using Mocha to replace a screen on a device. Then you’re going to learn how to use the ‘camera solver’ in After Effects to generate a true 3D camera. With the 3D scene built, you’ll begin adding your graphics in space and using the ‘collapse transformations’ feature in After Effects to turn your 3D scene into a single object, giving you power and flexibility.

Tutorial overview

00:58 – Intro
3:05 – Review assets
5:15 – Track screen in Mocha AE
10:38 – Corner pin overview
11:48 – Screen replacement
13:37 – Simple compositing trick
14:59 – 3D camera tracker overview
17:56 – Using assets within 3D scene
20:07 – Animating UI
27:12 – Adding UI animation to scene
30:49 – Collapse transformations technique
33:08 – Using 3D lights to light your UI animation
39:56 – Color correction

Download the ‘Augmented Reality’ tutorials now.

 Save $69 on Augmented Reality Pro package   Learn more

Free bonus tutorials included with purchase.

Bonus tutorial #1 – After Effects Fast Start
Duration: 44 min

If you’ve never used After Effects before, this simple ‘fast start’ tutorial walks you through the 8 things you need to know. Even if you’ve never worked on a timeline or with keyframes, you’ll be cruising to victory.

Photoshop to After Effects

BONUS Tutorial #2 – Prepping in Photoshop
Duration: 32 min

You will save the most time by learning how to prepare your Photoshop files correctly for After Effects. Learn how to set up and work with layer styles, layer groups, adjustment layers and more. This will set you up for success so you are animating from clean files and not wasting valuable time.

Illustrator to After Effects

BONUS Tutorial #3 – Prepping in Illustrator
Duration: 14 min

For Illustrator lovers, I take you through step by step how to prepare your Illustrator design file and get it set up powerfully in After Effects so you can animate with ease.

Bonus item – UI Animation Keyboard Shortcuts
Format: PDF

Print out this little buddy and keep it next to your desk. These are the top 25 keyboard shortcuts that will have you animating with lightning speed like a pro. It covers both Mac & Windows keyboard shortcuts.

Use Augmented Reality videos to…

Win bids

Simply put, this is a high leverage opportunity. If you find yourself bidding on a project and you incorporate motion into your bid, you have a leg up. My bids over the years have won hundreds of thousands of dollars, and every single one used motion.

Pimp your portfolio

You already did the design work. Now have some fun, shoot some footage, and bring it all to life. Impress future employers and make your work stand out.

Get buyoff from your team or client

Showing your idea ‘in context’ is a powerful communication opportunity. I’ve had my motion studies make the difference in whether I got approval or not. It’s super awesome.

Industry best practices

Issara Willenskomer brings 3 years teaching designers, and over a decade of UI Animations work for clients like XBox, Facebook, HBO, Twitter, Nordstrom, Amazon, and more. His teaching methods are taken from real world workflows and industry best practices.

Watch anywhere

Download this video training and watch on the go. Sync with your mobile device and hang out at your favorite coffee shop while you learn After Effects.


What do I get with the training?

A link via email to 2.5 hours of downloadable video tutorials, including project source files and renders. Plus another 1.5 hours of bonus tutorials and source files.

How long do I get access to the training?

Lifetime access. Pure and simple. I do this because it’s what I would want from a training. Things comes up and sometimes you don’t have time to invest in learning. My commitment is that this training be there for you 365 days a year.

Isn’t After Effects a tool that’s too hard to learn?

It can be, especially when you learn it the wrong way. After Effects is like a huge wood shop filled with hundreds of tools, and for UI animation, you only need to know one or two extremely well. That’s what this training does. Rather than focus on the WHOLE program, you learn the tools and techniques SPECIFICALLY for prototyping. You’ll be amazed at how fast and easy it is.

Aren’t there other prototyping tools, some even give you a fully functional prototype?

Absolutely. However there are times when the idea is more valuable than the interactivity itself. Having an appropriate sketching environment like After Effects allows you the freedom to create whatever you can imagine and even create a dev friendly spec (which you’ll learn about in the training).

How is this training different?

Tutorials on other sites teach individual tools. Real world projects rely on combining and stacking tools, techniques, mindsets, tactics and best practices. This training supports a professional workflow, connects the dots for you, and, sets you up strong in your real world projects.

Do I really need this?

When it comes to animating with Adobe After Effects, the sky is the limit and that’s the point. If you’re only needing to prototype ‘stock’ interactions where one screen swipes to another, don’t bother with this training. If you love to push innovation, and discover what’s possible then the answer is yes. You need this.

Learn to innovate with motion

Great UI Animations require a combination of countless techniques. Learning how techniques can be combined to create new animations allows you to create your own unique style, and innovate solutions for your individual projects.

Buy now

Included in your download

My goal is to make your learning experience as seamless as possible. That’s why I’ve included all the PSD files, references to online projects, and the After Effects source files so you can learn and practice at the same time.

30 day money back guarantee

If are not 100% satisfied for any reason, I’ll give you a full refund AND you can keep the training. That’s how committed I am to having this training work for you.

Download the Augmented Reality After Effects tutorials.