How to use adjustment layers to blur your UI animation in After Effects

 

Click here to download the source files and follow along

I created a quick tutorial video to show you how to quickly create an adjustment layer, 3 ways to locate an effect, and 3 ways to quickly apply the effect to the layer.

One of the things that makes the UI animation workflow unique in After Effects is that there is so much iteration and feedback implementation required in the design process.

This means you have to build super clean ‘easy to update’ project files.

Personally, I view this as an opportunity to creatively find ways to not duplicate things. Like effects.

So, adjustment layers can help with this.

An adjustment layer is a blank layer that interacts with the layers below it. You can put effects (like a blur) on it and every layer below it will have that blur. The advantage is that it’s simple, fast, and easy to update when you get feedback or if you want to do versioning.

I also share a couple of my favorite keyboard shortcuts that make this whole enchilada easier and faster to implement.

Click here to learn how to make an adjustment layer!

Happy prototyping,

Issara

PS If you’re on a deadline and looking to prototype your projects at higher fidelity, check out my rapid learning UI animation courses for UX/UI/product designers.

FREE AFTER EFFECTS COURSE

FREE LottieFiles Icon Animation Course For UX/UI & Product Designers

Create a Professional Icon Animation and Play it on Your Phone (no experience necessary)
  • Learn how to make an icon animation in Adobe After Effects

  • Show-off your icon animation on your phone for your team, clients, or stakeholders

  • Build a portfolio-quality showcase UI Animation 

  • Export your assets for hand-off to engineers

GET FREE COURSE
You're a designer, you get paid to have opinions. Share them! 👇🏽
Close

🔥 Take 15% off your first purchase

90% Complete