Shop Blog Templates Bundles Login

How to create a UI Animation process video in After Effects

Click here to download the source files and follow along

I’m super excited to share this technique with you.

Here’s the idea: sometimes you need to show a video render and actually show the layer handles and UI elements. It’s part of the ‘behind the scenes’ or process materials that you may include in your portfolio, on your site, or even as part of a pitch or presentation.

This gif communicates what I’m talking about.

When I figured out that I wanted to do this for a project, it literally took me days. You can’t really even google it. In this tutorial video I show you the fastest and easiest way to make this happen.

Here’s the step by step  

  1. Preview your project in AE
  2. Select the layers you want to reveal handles
  3. Hit ‘Command + Shift + H’ on your keyboard
  4. Open Quicktime
  5. Select File > New Screen Recording
  6. Click record
  7. Click and drag to select your canvas
  8. Hit record to start recording (weird UX thing I know)
  9. Let it loop a couple times (keep your mouse cursor out of the frame or it will record that)
  10. Stop recording
  11. Bring it into AE and trim it down to the loop points
  12. Export as a GIF or video file

That’s it!

 


Become a UI animation pro this week and save $571 with my ‘Ultimate UI Animation Fundamentals bundle'


Find me on –

Facebook: https://www.facebook.com/uxinmotion
YouTube: https://www.youtube.com/channel/ux-in-motion
Medium: https://medium.com/ux-in-motion
Twitter: https://twitter.com/ux_in_motion
Dribbble: https://dribbble.com/issara

Get my free UI animation tutorials and resources emailed to you directly

Join 25k designers from around the world who have signed up to my UI animation newsletter. You'll be the first to get my new tutorials, articles, or courses on UI animation.

Close

50% Complete

Get my free UI animation tutorials and resources emailed to you directly

Join 25k designers from around the world who have signed up to my UI animation newsletter. You'll be the first to get my new tutorials, articles, or courses on UI animation.