Drawing a 2D vTuber for Adobe CH

Key terms:

Vtuber: a term for a Virtual Streamer or Youtuber, who streams their voice and onscreen gameplay while using a facerigged digital avatar. A fun, colorful character that mimics your movements and talks for you.
Facerig: With a webcam and NDI software, expressions and mouth sounds can be tracked on a 2D or 3D model typically called a “facerig”
Layers: Used by most digital illustration and editor programs. Transparency allows you to stack colors and lines to work cleanly. These layers can also help you in the same ways that classic animation cels were used for moving parts.

For this tutorial, we will focus on a top bust for a traditional vtuber. This character is intended to be streamed live or shown in a zoom meeting, etc.

When thinking of vtubing, you might think of a complex rig and 3D model. However, a good majority of existing vtubers use 2D illustrated rigs! The fact is that you don’t need a 3D model to jump into the vtubing scene. For those who want to stream their characters to friends and fans, setup starts with keeping art on separate layers.

These same principals apply to Live2D models, but this guide will focus on Adobe Character Animator.

Making a vtuber rig can be daunting- try starting with a basic 2-frame talksprite so you can show your persona with friends from Discord

what is a vtuber in 2D
Streamers Pictured: Kizuna AI, Inugami Korone, Gawr Gura, Kureiji Ollie

Art can be made with any digital art program that can handle layers, and export as a .psd to import into Adobe Character Animator.

If you aren’t already thinking in separate layers for your artwork, I hope you’re ready to jump ahead to Folders! When you have layers you want to group up, they can go into the same Folder and be moved together. Keeping things separated is key to making the puppet have separate movable parts in the first place here. Now using Folders will allow you to make alternate states and outfits for your sprites. With care, you can even keep the original artwork layers organized in their own spaces as well.

Plan the separate moving/panning layers on the character: think of anything you want to pivot like an arm, or layer on top of another part. What should dangle or layer or pan around? It might help to make multiple sketches to plan!

For your Character Animator puppet, you will draw out separate mouths for each Sound.

The main parts used in the cat puppet. *NOTE the white part would work best as a separate layer for a "muzzle" effect!
Grif's secret sauce for a basic puppet head

The main folders will be for the Head, Left Eye, Right Eye, Mouths, and the Nose/Muzzle.

The puppet’s Head is complicated since it’s the most expressive part. You probably even need to lip sync to every syllable. Character Animator allows you to capture live speaking and snap into another outfit/mode. This means you need separate assets made for mouth sounds and emotional states. There are lots of other goodies that can be added, but it’s best to start with the main face features and basic shapes!

It will help to use Stage Directions for the character, not our perspective. The Right Hand will be on the character’s right side!

When you’re drawing your character, it will especially help to mirror your canvas. Mirroring can help draw two symmetrical elements at a time. Once you have your art made, you can separate the Right and Left sides into their own layers! Remember to keep as much separated as possible. Note the gif on the left how the ears are separate, this will help them flop and emote. Characters with distinct strands of hair or a pronounced muzzle should have a layer made for each feature. All these moving parts help imply the shape’s weight and give it the ability to move or jiggle as needed!

Tracing your bases is good

Stacking layers on the canvas is helpful for tracing existing features. You want consistent sizing so it flows with other layers. You’re making separate sprites intended to run together as an animation, so make sure things line up!

Eyelids are best to trace on top of basic eyes. Start with a neutral sort of expression for the base eyes, and separate the pupils. You can have separate Eyebrows to help with emoting!

When you have all of the basics you need, add some extra features! Just remember to keep your layer hierarchy intact above all else, so that your things continue to overlap properly. Put a shirt torso on top of the Body base, and the sleeves on top of the Arms etc.

While you might have worked with separate layers for Lines and Colors originally, your end goal is one layer for each movable piece. You can preserve any artwork layers in their own folders to help with making alternate colorways and designs. Draw a chart to help yourself think ahead! Just remember: “always delete things last” — save a copy before you merge if you’re in doubt!

Export as a .psd to use with Adobe CH

From here, you would export your art as a .psd file to preserve the separate layers, so that Character Animator can read the file. It’s a matter of rigging the puppet to be able to move and read facial inputs.

The next steps will be in future articles and is already visible in the art streams on twitch.tv/GrifnMore so tune into a live lesson for help rigging your own puppet!

Share

This Post Has One Comment

Leave a Reply