From Jobin George, a graphic designer living in Bahrain:
“I love the detailed motion case studies that you guys post on Instagram and on the Ueno website. Can you please suggest a few After Effects tutorials on how to make them?”
Kwok Yin Mak, designer at Ueno NYC has the answer, sort of:
Hi Jobin, thanks for your question! I’m delighted to hear you enjoy our case studies and motion studies as much as I do.
Even though there are tons of great After Effect tutorials on the internet, I’m not aware of any that specifically show how to create motion study of a website or an app. So, sorry Jobin, I don’t have the answer to your question. But what I can do for you is to list the useful techniques that will essentially enable you to create what you see in some of our case studies.
The list below should cover pretty much everything, and I recommend go through them in order.
First Things First
Do yourself a favor and read these excellent posts. They will help you figure out what you should create for your motion studies and why.
Importing PSD
The proper way to import PSD file to your project.
Keyframing
The essential part of creating animations.
Easing
The secret sauce of making animations look slick and smooth.
Pre-composing
Think of it as a smart object in Photoshop.
Masking
Different techniques of masking.
Motion Blur
A way to make motions look more natural. But don’t go overboard! 😉
Pin Corner
A very useful technique if you want to add some perspective.
Basic 3D
A basic understanding of 3D layers. You’ll need this to create effect like hover parallax.
Trim Path
A very handy technique to make cool line animations.
Shape Morphing
A simple way to turn one shape into another.
Expression
A scripting tool that assists you with your animations. Very useful when you’re working with complex animations.