With new challenges of coloring and rigging a human face, Bryan generated another fantastic animation for an upcoming YouTube beauty channel under the direction of Danielle Ilisabeth! Learn the step-by-step process of this project to understand the complexity of motion graphics.

Prepping for her new channel, Danielle is in the pre-production stage of her make-up show on YouTube and came to 35mm. for an opening animation. She came to me with an uncolored logo, drawn by another artist, and a general idea for how she wanted the animation to look.

From there, I began coloring the logo based on her desired color palette. With the idea of the “wink” set from the beginning, I began the illustration work in Adobe Photoshop by creating another version of the face with the closed eye. Once I had each version of the face on their own layer, including the hair on a third layer, the final step of the process was filling in the space behind the face in order to have some wiggle room in Adobe After Effects.

Exporting these into After Effects as separate layers, the animation was smooth sailing! The trickiest part to coordinate was moving the pieces of the logo together cohesively. In order to animate the hair independently from the face, I rigged the hair using a third-party plug-in called DUIK.

DUIK is primarily intended for character movement, with the ability to set pivot points on an object as “bones” and create a hierarchy. Think of the hierarchy like your own arm. If you set Point 2 to be parented to Point 1, it’ll move however Point 1 moves. Try it yourself! Look how your elbow will always move with your shoulder.

So, I set up the points with the idea of which point of the hair I wanted to more, the lower curl, and set the rest of the points in the interest of anchoring the lower curl. The lower curl had to be set so that the whole image wouldn’t move. It took a bit of trial and error to find the best placement, but once I had them placed properly, I was good to move on.

I set the movement of all the pieces for the face, and then to get the wink to "look convincing," I used an effect that’s built into AE called “mesh warp,” which lays a grid over the image and allows you to move the points of the grid to contort the image. I used this to move the edges of the face and around the eye to simulate the facial movement of a wink. After that I was set, I pre-comp’d (or "pre-composition") the three layers of the logo.

Making a pre-comp in AE is useful for many reasons. Primarily for keeping your timeline tidy, it also allows you to move multiple layers at once. I made a pre-comp so that, from this point, I’d be easily able to tweak the motions of the logo to fit the background better.

After this, the rest of the animation was straight forward. The background and transitions were made-up of shape layers and different color effects and followed simple movements. Danielle was ecstatic with the final animation and we can't wait to see her channel grow!