◆Differences in character expressions between manga and animation
No. (laughs)
The depiction of facial expressions such as "crying," "laughing," and "anger" are basically the same.
However, while "laughing" is a one-shot depiction in manga and illustration drawing, "laughing" in animation involves acting actions such as "when" and "to what extent," making the character depiction process a bit more complicated.
When creating an animated character, blinking is one of the basic human-like gestures.
However, blinking in a constant, monotonous way can look mechanical and unnatural, so the trick is to recreate a rhythmic feel.
The speed and number of blinks can also have an effect on the psychological state of the character, so it is actually a delicate aspect.
It is a normal behavior in everyday life, but animation, which breaks down movement over time and expresses it, is very complex.
[Example]
Keyframe animation of facial expressions created from a single image
◆Timeline and Frames
Understanding the timeline display
When creating animation,
keyframes and cel animations are operated here.
For details on how to operate the timeline names, please refer to the official animation tips, but I will briefly explain what "frames per second" means.
1 frame and 1 frame have the same meaning and refer to 1 image per second.
30fps means that there are 30 frames per second.
Animations are usually made at 24 frames per second, but it's fine to think,
"Well, from now on, we can make it at 30fps," or, "If we make it at 60fps, it will move smoothly,"
but if you do that, the frame-by-frame animation techniques for things like "how to speak" and "how to walk" will not work at all when creating animation by hand at 24 frames, so it is more convenient and often more efficient in the long run to think of animation as 24 frames per second.
*Settings used by the author for the explanation
■Playback time/3 seconds ■Frame rate/24 (seconds + frames)
[Official Animation Tips]
◆How to create a keyframe layer switch
A technique that adjusts opacity on the same timeline axis and switches to a different overlaid layer.
This is how you can depict an eye that is open and then closed.
By applying this to a variety of parts of the body, not just facial expressions, it greatly expands the possibilities and direction of keyframe animation.
《Operation Points!》
How to make a character blink with an animation
Make your character blink
[Example settings] ClipstudioPaint Pro/EX
Size/1920x1080 Resolution/72dpi Color
Create a moving illustration Number of cells/24 Playback time/3 seconds Frame rate/8fps
01] Drawing the eyes
The basic images to create eye blinks with keyframes are
① "Eyelashes"
② "Pupil"
③ "White"
④ "Closed eyelashes"
Create these 4 and separate them into layers, then use only these to move.
02] Creating a timeline
[Timeline settings] ClipstudioPaint Pro/EX
Frame rate/8fps
Playback time/3 seconds (seconds + frames)
(24 frames in total)
03] Layer conversion
《Operation Points!》
Convert all four layers you created into "image material layers" using the following steps.
1. Turn off "Enable timeline"
2. From the Layer menu, select "Convert Layer" > "Convert to image material layer"
3. Select Edit > Transform > Free transform
4. Enable "Enable timeline"
5. From the Layer menu, select "Convert Layer" > "Convert to image material layer"
04] Editing keyframes
Transform it using the tool icon "Object" > "Operation".
[1st frame]
As in the example, make sure to add a keyframe to each of the four.
Only ④ Closed eyelashes will have their opacity adjusted to 0% layer transparency
① Eyelashes ② Pupils ③ Peach (Layer transparency is set to 100%)
[2nd frame]
Perform the layer switch mentioned above.
Transform ① eyelashes, ② pupils, and ③ white so that the eyes are about half closed.
Set the layer transparency to 100%.
Set ④ closed eyelashes to 0% layer transparency.
[3rd frame]
Set the layer transparency of ① eyelashes, ② pupils, and ③ white to 0%.
Set the layer transparency of ④ closed eyelashes to 100%.
《Operation Points!》
Duplicate (copy) keyframes / [Select and then]+[Alt]+move
[4th frame]
Copy all keyframes from the 3rd frame to the 4th frame as they are
[5th frame]
Copy all keyframes from the 2nd frame to the 5th frame as they are
This is what is known as reverse playback of keyframes.
[6th frame]
Copy all keyframes from frame 1 to frame 6 as is
Duplicate all keyframes from frame 1 to frame 6 to frame 2 seconds onwards
And that's it, the 3-second animation blinking movement is complete.
◆ Keyframe Interpolation
*In the example image introduced earlier, the "Keyframe Interpolation" setting is set to "Constant Speed" (green),
but when moving a character, setting it to "Smooth" will make the movement more natural.
Of course, there is nothing wrong with a constant speed, so the character will move properly.
Operation Tips!
◆When I actually work on a project, the timeline I go through is roughly like this:
◆ Just moving your eyebrows can change your facial expression
Just by moving the eyebrows in the same way as blinking, you can change the expression.
[How to make it]
Prepare a separate layer with only the eyebrows drawn on it, and create an image material layer following the steps in 03] Layer conversion explained in the previous ◆How to make an animation that makes a drawn character blink.
Then, use keyframe operations along the timeline to flip the eyebrows upside down and determine the expression.
To revert, simply duplicate the keyframe before editing to return to the original state.
*In my case, I move the left and right eyebrows separately.
Once you can blink the eyes, try moving each part of the character's body.
[Step-up Tips]
Keyframe animation of body movements
[Step-up Tips]
Let's create a moving background with keyframe animation
◆Let's connect facial expressions with blinking
《Operation Points!》
By connecting layer switches in complex ways and using transformations,
advanced keyframe animations can be created.
"Eyebrows" + "Eye" + "Lip sync" + "Blush" + "Hair" + "Body"
◆The trick to the eye position movement is to make the gaze natural by switching from a closed eye motion to a different gaze with the next open eye motion.
◆"Blush" is expressed using opacity transparency,
but although it may be okay to suddenly turn bright red in some scenes,
it looks more natural and calm if it slowly turns bright red and then slowly fades.
In the example, it takes 2 seconds to start and 2 seconds to end before disappearing.
◆For lip sync, the "open mouth" is transformed into a closed shape to match the mouth closing,
and the position is adjusted before opening.
In the example, "close" and "open" are set at 3-frame intervals.
◆ Use camera work to bring out the character's expressions from different angles
ClipstudioPaint's animation has a camera work function, so you can use the timeline in the same way as keyframe operations to rotate, zoom in, zoom out, pan, and turn to get the best shot of your character, and easily create cradle camera work like in the example.
One of the great things about ClipstudioPaint is that you can create interesting scenes depending on how you use it.
[Official Animation Tips]
◆ Psychological expressions can also be expressed through color
It's a psychological effect, but the eyes are not angry, but they look "angry" or "full power", and the color used to express the character's emotions, including the background, depends on the scene.
It's a classic expression that you've probably seen at least once in a scene from an anime or manga.
Well, if I talk about this, it might stray from the original tip and become an acting/directing tip (lol), so the party is in full swing.
But we'll talk about this another time.
Afterword
Using the basic techniques introduced here, you should be able to create almost any facial expression, including "laughing," "crying," "angry," and "joy, anger, sadness, and happiness," so if you're interested in creative writing, please give it a try.
The possibilities and creativity of human creation are endless. Thank you for reading to the end.
I hope that the author's tips will be of some help to you in your future creative endeavors.
Have a great creative life!
ClipStudioPaint EX Ver.3.0.4 20250405 Akiben
{This demonstration video is now available on YouTube}
I would be very happy if you could also watch it for reference.
[Atmaster Official Channel]
◆ClipstudioPaint Demonstration
Add expressions to your drawn characters and move them with keyframe animation
[1080p compatible]
■Video length: approx. 12 minutes
■1920x1080p/stereo
■Japanese
Users who liked this post
Comment