UI Animation After Effects Tutorial: Color Correction Slider

By August 13, 2015Tutorial

Ok, I admit, it isn’t often your project has a color correction slider. And it’s probably even less often that you’d be online searching for for how to animate one, but just in case the perfect storm has transpired, I’m answering that question today.

The beauty of these ‘color correction’ UI animations is that After Effects recognizes Photoshop adjustment layers. This is awesome because then all you have to do is design as you normally would in Photoshop, bring it into Adobe After Effects, and animate your UI.

In putting this together, I couldn’t find a complete breakdown of Photoshop adjustment layers supported by After Effects on a straight import. So, I went through and tested them all. Below are the SHOCKING results. Ok, it’s not really that shocking, they’re pretty much just results with zero shock.

Oh, and before I forget, if you’re totally lost here, head over to http://uxinmotion.net and watch my FREE fast start video. It teaches you how to animate your UI in Adobe After Effects. And if you want to go deeper with all this, I’ve put together a pretty dope online video course that gives you step by step instructions on how to create beautiful professional animations from your UI designs. You can get it here: http://uxinmotion.net/rapid-prototyping-with-adobe-after-effects-launch/

Photoshop Adjustment Layers that Work

  • Brightness/Contrast
  • Levels
  • Curves
  • Exposure
  • Vibrance
  • Hue/Saturation
  • Color Balance
  • Black & white
  • Channel Mixer
  • Invert
  • Posterize
  • Threshold

Adjustment Layers that do not work (and how to recreate it in After Effects)

  • Color Fill (use layer style)
  • Gradient Fill (use layer style)
  • Pattern Fill (nope)
  • Color Lookup  (wtf is this thing?)
  • Gradient Map (kinda, with various effects)