9 TUTORIALS | 3.5 HOURS | 3 BONUSES
Learn how to create cinema quality rotoscoping and compositing of UI animation into video. Learn how to shoot and analyze your footage, track, rotoscope out hands, and create filmic quality composites while maintaining reflections, color, and depth of field.
In this course, Senior tracking and compositing designer, Charlie Bartlett shares the secrets, tips and best practices he applies when creating these two viral videos (watched by millions)
4,980,558 views
Instructor Charlie Bartlett was lead compositor on this project. Learn from him how to master the fundamental tracking, rotoscoping, and compositing techniques and workflows that Charlie used in this video.
2,064,329 views
Instructor Charlie Bartlett was lead compositor on this project, and shares his techniques and workflows. Learn how to analyze live action footage, and using Adobe After Effects and Mocha (which comes with After Effects) easily track, rotoscope, and composite your UI designs into video.
I designed the Screen Replacement Mastery as a professional training and development course for designers to quickly learn how to create cinema quality UI tracking and compositing with live action video.
Having directed and produced futuristic UI product vision videos, I know firsthand how valuable it is to have tracking, rotoscoping, and compositing in your toolkit.
My longtime friend and collaborator Charlie Bartlett is hands down the best rotoscoping and compositing person I have ever met. His attention to detail is unparalleled. He is typically booked out months in advance, and his contributions to projects are legendary.
If you are unfamiliar with the terms, Tracking is when you are able to marry graphics to moving objects in video footage (in this course, you will be learning how to track with Mocha AE, a really cool planar tracking tool, which comes with After Effects).
Rotoscoping is when you mask out objects in video. For example, a hand interacting with a screen.
Compositing is when you take graphics and make them look completely seamless with the video footage in terms of depth of field, color, contrast, and lighting.
All 3 techniques are critical skills to have on UI product vision videos, which are typically used to showcase work, or during important pitches.
Charlie is also extremely passionate about teaching and is meticulous in his approach. Each lesson in this course is packed with industry best practices, techniques, and value.
Over the years, I've learned so much from Charlie and I know you will too.
Best,
Issara Willenskomer
Founder of UX in Motion, Instructor
★★★★★
"This was really useful. I work on a project where motion is going to be a big part of the interaction and just using static screens doesn’t really get the message across or get anybody really excited. Being able to get the wide variety of things can do and actually see some real examples of how to create some motion was really useful."
– Ario Jafarzadeh, Lead Designer & Product Manager at Amazon, Seattle
★★★★★
“The UX in Motion training established a solid foundation for our Designers and left us with valuable tools and tactics that will allow us to integrate motion as a prototyping tool in our practice, which will ultimately allow us to produce more tangible, evocative work for our clients."
- John Rousseau, Executive Creative Director at frog, Seattle
My goal is to make your learning experience as seamless as possible. That’s why I’ve included all the design source files, downloadable video tutorials (to sync with your devices and watch offline), as well as the After Effects project files.
Depending on the project, this could include Photoshop, Illustrator, or Sketch. You don't need to have these programs to use this training.
HD video files for you to watch online or download and sync to watch later on your devices.
Use this file to follow along with the tutorial and even ideate your own solutions and iterations!
Tutorial #1 – Shooting Strategy And Best Practices
Duration: 21 min
In the first tutorial, you will learn how to set up your device to either capture reflections, or illuminate your subject. If your UI design is bright, your subject would actually be physically lit by the device itself. If the UI happens to be darker, you want the device completely off so as to capture all the beautiful reflections that you will use on the final composite.
Tutorial #2 – Shooting Smartphone video with the ProCamera App
Duration: 5 min
In this tutorial, you learn how to access manual exposure features on your Smartphone using ProCamera. If you don’t own or have access to a DSLR, you can still shoot professional footage on your smartphone but you’ll need to have manual control over your exposure by using ProCamera or a similar app.
Tutorial #3 – Talent Guides
Duration: 12 min
In this tutorial, you will learn how to use ‘talent guides’ – images you create and load on your device that your model can use to accurately simulate using your UI. Using Guided Access (iOS only), you can lock the images down so your model can physically interact with the device without bringing up the menu.
Tutorial #4 – Easy Tracking And Screen Replacement
Duration: 16 min
In this tutorial, Charlie takes you through step by step on how to set up a track in Mocha using the xSpline tool, using the planar grid to make sure your track is working, and how to get the tracking data out of Mocha and into After Effects so that your UI fits perfectly.
Tutorial #5 – Tracking With Reflections
Duration: 20 min
In this tutorial, you’ll learn how to work with the reflections on the device. Nothing sells a shot more like seeing the real world reflected in a screen. While reflections can pose tracking challenges, Charlie breaks down how to approach tracking the shot for minimal effort and maximum effect.
Tutorial #6 – Advanced Tracking With Markers – Part 1
Duration: 26 min
In the following two tutorials, you’ll learn from Charlie how to prep your device with the appropriate markers, as well as how to ultimately use that data in Mocha to generate an accurate track. Finally, you’ll learn how to digitally remove your markers so that you can complete the composite.
Tutorial #7 – Advanced Tracking With Markers – Part 2
Duration: 38 min
In this tutorial you will learn how to paint out your markers using After Effects. This is the final step before you can composite your work into the device. After this lesson, you will be pretty damn pro.
Tutorial #8 – Rotoscoping In Mocha
Duration: 39 min
If you have your model interacting with the device in a way that their hand passes over or covers the screen, rotoscoping allows you to mask the hand so that the shot appears utterly seamless. Using Mocha’s powerful tracking tools, Charlie shows you how to remove a hand from a shot.
Tutorial #9 – Final Compositing And Color Correction
Duration: 29 min
In this tutorial you will be learning how to ‘finish’ your shot with color correction. Charlie really loves this stuff and breaks down all the ways you can get the extra 5% from your shot to make it really shine. After this tutorial you will be able to see how the fine details are really what make a shot work or not. And now you’ll be able to do it!
Charlie Bartlett works as as an elite tracking, rotoscoping, and compositing artist on projects for top name clients. His deep expertise and passion for professional workflows and photo real composites, as well as his incredible attention to detail make learning from him a rare opportunity.
Learn advanced analysis and tracking with markers
Learn how to rotoscope complex movement
Learn how to track and composite reflections
These additional training and resources will help you to get up and running fast, with great content and access to Q&A
New to After Effects? Get up and running in less than an hour with this 3 part Fast Start video course.
Get your questions answered in this exclusive group of world class designers. Post, share, and critique inspiration. Get new tips and resources.
Print out and accelerate your learning with these 23 critical keyboard shortcuts just for UI animation. PDF included with purchase of course.
Don't own After Effects? Not a problem! Download the free 30 day demo of After Effects from the Adobe site.
50% Complete
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
