Character Walk Animation in Simple Mode | Template Included
Hello, I'm Nukegara.
In this tutorial, we'll create a simple walk animation for a chibi character using the Simple Mode available on tablet versions of Clip Studio.
In the first half of this article, I'll explain basic operations in Simple Mode, and in the second half, I'll provide a guide for creating the walk animation.
Personally, I've primarily used Studio Mode and have created animations there before.
This article also serves as a review of my first serious experience using Simple Mode. I want to share the charming aspects of Simple Mode that Studio Mode doesn't have through this article and video.
You can also watch the contents of this article in this video.
In addition to Japanese subtitles, multilingual subtitles translated via automated services are available.
Please watch on YouTube if you would like to use the timestamps.
[ Operating Environment ]
CLIP STUDIO PAINT EX
iPad Pro 12.9 inch 4th Generation
Apple Pencil
Magic Keyboard
Template materials available for download
Based on the animation created this time, I have made a walk animation template.
While this article explains how to create an animation, I thought some beginners might feel that "creating a walking movement from scratch is too high a hurdle..."
So, I created this to go along with the article.
Using this material, you can easily produce a walking animation just by adding hair and clothes to the clean-up lines.
I have prepared materials compatible with both Simple Mode and Studio Mode.
It's recommended for those who want to practice movement easily or those who just want to try out animation for now.
Links to the materials and instructions on how to use them are summarized at the end of the article.
Please jump to the last heading from the table of contents.
1. Simple Mode and Studio Mode
First, let's briefly introduce the Simple Mode interface.
Clip Studio has Studio Mode and Simple Mode.
Studio Mode is almost identical to the PC version of the software.
On the other hand, Simple Mode is an interface similar to tablet-specific paint software like ibisPaint or Procreate.
Unlike Studio Mode, while the available functions are limited, you can expand the canvas to fill the entire screen and perform intuitive operations.
In Studio Mode, about half the screen can be filled with palettes, so if you want to focus on creating on a large screen, trying Simple Mode might be a good idea.
Tools used this time
The tools we'll use this time are:
・Pen
・Eraser
・Selection
・Transform function
・Other tool materials distributed on the Asset Store
All tools can be selected from the toolbar on the left. Double-tapping a tool icon will display the tool list, allowing you to change the tool being used.
Pressing the triangle button on the right side of the tool allows you to change detailed settings, such as brush size and opacity.
Importing materials from the Asset Store
For pens, you can also add materials downloaded from the Asset Store.
⚠️ Points to Note
Materials installed in Studio Mode are not synced to Simple Mode from the start. You need to install the materials again in Simple Mode.
Furthermore, materials that haven't been installed in Studio Mode cannot be loaded.
You must first install the materials in Studio Mode.
Installing into Simple Mode is easy; just press the plus button and select the relevant material.
I will introduce the steps for actually installing materials in the second half of the article.
Other layouts and functions
The layer palette is placed collapsed at the top right, and double-tapping a layer allows you to change detailed settings like layer mode and opacity.
In the layer palette, different layers appear for each frame.
Essentially, what you draw in a frame won't be displayed outside that frame.
Be careful, as this is different from the layer display during illustration production.
Shortcuts for frequently used buttons, such as visibility toggle and layer deletion, are displayed on the right side of the layer palette.
Settings corresponding to each tool, such as brush size and opacity, are at the bottom of the screen, and frames are displayed during animation production.
Frames can be moved by long-pressing and dragging, and tapping a frame again allows for duplication or deletion.
Also, the interface layout can be swapped between left and right.
Open the menu from the three dots at the top right and select Preferences.
Turning on the second option from the top, "Switch right and left layout," will reverse the sides.
You can also switch to Dark Mode from this screen.
2. The animation we're making
Now, let's start making the walk animation.
This is what we'll be making.
It's a simple walk animation of a chibi character in profile.
We'll animate five parts: arms, legs, head, hair, and blinking.
3. Creating a new canvas in Simple Mode
First, launch Clip Studio and switch to Simple Mode. You can change it with this button.
Create a new canvas from the Animation tab.
This time, let's try using a square canvas.
The canvas has now been created.
In Simple Mode, the animation frame rate is fixed at 12.
What is frame rate?
Frame rate refers to the number of images displayed per second.
Intuitively, it's like the number of pages you draw in a flipbook.
Since the frame rate is 12 here, 12 images will be displayed in one second.
If the frame rate is 2, two images appear per second; if it's 24, twenty-four images appear per second.
This is also referred to as frames per second or fps.
You'll see this often when making animations, so it's good to remember.
⚠️ When changing the frame rate
You can change the frame rate in Studio Mode and return to Simple Mode, but if you do, be sure to uncheck "Change total number of frames."
If you change the frame rate while this item is checked, you will not be able to return to Simple Mode.
4. Drawing the arm movement
Using the pen tool, let's jump right into sketching the movement.
First, we'll draw the arm movement.
This is because I want to determine the movement of other parts based on the arm swing.
First, draw the state where the left hand is forward.
Once drawn, add a new frame. Frames can be added using this button.
In the new frame, draw the exact opposite state where the right hand is forward.
We'll fill in the movement in between based on these two frames. Roughly 5 to 6 frames is a good target.
"Keyframes" and "Douga/In-betweens"
The drawings that serve as the base for movement are called "Keyframes" (Genga).
The frames between them are called "Douga" or "Nakawari" (In-betweens).
Filling in the gaps between keyframes is the job of in-betweens.
Tips for in-betweening in character animation
There are various tips for in-betweening, but what's important for creating lively character animation is to avoid spacing frames at equal intervals as much as possible.
Spacing frames equally gives a mechanical impression of movement.
While there are certainly scenes where equal spacing works, it's unsuitable for the organic movement of living things.
By intentionally clustering the in-between points closer to the keyframes to add rhythm, you can create the impression of a living creature in motion.
Useful feature: Onion Skin
When drawing in-betweens, it's convenient to use the Onion Skin function.
Onion Skin is a feature that displays the frames immediately before and after the selected frame as translucent sketches in distinct colors.
By default, the previous frame is purple and the next frame is green.
By referencing the before and after frames shown via Onion Skin, you can draw without getting lost.
However, note that Onion Skin cannot be used between the last and first frames.
This function is on by default in Clip Studio. It can be used the same way in Studio Mode.
If you want to turn off Onion Skin, tap the icon with three dots next to the plus button at the bottom of the screen. A switch to toggle Onion Skin on and off will appear.
Tips for arm swinging
The key for arm swinging, as mentioned above, is to avoid equal spacing and create in-betweens clustered toward the keyframes.
Arm swinging is basically a pendulum movement, so if you draw the motion for the way out, you can just copy-paste for the way back.
Looping the in-betweens
Once the in-betweens for the arm swing are ready, duplicate the frames and adjust them to become a loop animation.
In this step, we'll copy the outgoing movement to create the return movement.
I'll number the frames to make it easier to understand.
Tap the frame before the last one and duplicate it.
The frame will be duplicated behind it, so long-press and move it to the end.
Repeat this so the numbers cycle.
Once you've finished duplicating and have a loop animation, the arm swing sketch is complete.
We'll use this arm swing as a base to add other body movements.
5. Drawing the head
Next, we'll draw the head.
Return to the first frame, create a new layer, and draw the character's head on that layer.
Make the head large for that cute chibi look.
Once drawn, use shortcuts to copy and paste the layer into other frames.
On a Mac keyboard, press Command+C to copy and Command+V to paste; on Windows, use Control+C and Control+V.
⚠️ By the way
Since Simple Mode doesn't yet support the Edge Keyboard available in Studio Mode, you cannot copy and paste to other frames without shortcut keys.
If you don't have external accessories like a keyboard, you'll need to switch back to Studio Mode to copy-paste into different frames.
I think this is because animation in Simple Mode was designed with hand-drawing frame-by-frame in mind, but I hope to see improvements in future updates.
After copy-pasting the layer with only the head drawn to all frames, use the move tool to add movement.
Adding movement with the Move tool
The Move tool can be selected from the four-way arrow icon, third from the top on the left bar.
Unlike Studio Mode, simply selecting the Move tool puts you directly into the transformation screen, which is convenient as it requires fewer steps.
If you press it by mistake, you can cancel using the cancel button at the top left.
Moving slightly with the arm swing
Select the head layer and press the Move tool.
Adjust it so the head moves back and forth in sync with the arm swing.
Keep the range of motion very small and add movement while keeping the in-betweens mostly equally spaced, without strong rhythm.
This is because the shifting of the center of gravity in a walking motion is slow, so swaying the head too much will look unnatural.
This time, I added movement where the head sways slightly forward and backward in accordance with the shift in the center of gravity.
6. Drawing the legs
Now, let's move on to the leg movement.
The point is to draw them with a slight timing offset from the arms.
Bad example:
If you align the timing perfectly, it ends up looking like a toy's mechanical movement.
To give it a human feel, we'll draw the arm keyframes and leg keyframes at different times.
Draw the keyframe where the left leg is swung forward in the frame where the arms are vertical.
Use this drawing as a base to draw the following frames.
Leg movement is complex compared to arms, so generally draw frame-by-frame instead of copy-pasting.
Tips for in-betweening leg movement
The in-betweens are mostly equally spaced, but create a "hold" to add rhythm at the moment the legs are widest apart.
Doing this helps depict the preparatory action before moving to the next motion.
It's easier to achieve cohesive movement if you make the legs close together when the arms are opened wide.
When drawing in-betweens, it looks cleaner if you keep the leg thickness consistent and ensure the ground position where the soles are planted doesn't shift.
Since Onion Skin doesn't work between the last and first frames, copy-paste a leg from another frame with similar movement into the first frame and use it as a guide for adjustments.
Once you've finished drawing to some extent, play the animation to check the movement, make corrections to any areas that bother you, and the leg movement is complete.
7. Adding a blink
Next, add a blink.
The trick is to move both the eyes and the eyebrows.
Create the in-betweens for the blink with sharp rhythm as well.
Pick any frame, erase the drawn eyes, and draw eyes that are about 30% closed.
Next, draw a frame where the eyes are completely closed.
Next, draw another frame where they are about 30% closed.
By doing this, you get a lively and cute impression.
This completes the sketch of the body movement.
8. Drawing the hair
Finally, add movement to the hair.
Create a new layer and draw the hair with a red pen for clarity.
Tips for movement
Create the hair movement primarily to match the legs.
This is because hair sways the most during the shifting of the center of gravity.
Make the hair sway the most in the frame where the leading leg plants and becomes straight.
That's the timing when the center of gravity shifts.
Also, the longer the character's hair, the more it will sway.
Since I'm drawing a character with a wolf cut this time, I'll focus on swaying only the tips near the ears and the back hair.
The trick is to keep the roots of the hair still and increase the sway toward the tips.
By adjusting the amount of sway according to the hair length, you can suggest the presence of gravity.
Now the hair movement and the sketch for the entire character's movement are finished.
9. Drawing clothes and cleaning up
Now we move on to drawing clothes and the clean-up process.
This time, I'll go with simple clothes with little movement.
For clothes that catch the wind easily, like a cape, add sways just like the hair.
I wanted a simple animation this time, so I kept the clothing details minimal.
For clothes that don't move much, it's fine to just draw them to match the body movement sketch you've already made.
Cleaning up
Lower the opacity of the sketch layer to about 10-20%, create a new layer on top, and draw the line art.
I'll use a thicker pen size this time.
Once the clean-up is done, hide the sketch layers. Visibility can be toggled by pressing this eye button.
If you don't need them, you can delete them using the trash can button.
Once all line art is cleaned up, let's start coloring.
10. Coloring
Create a new layer beneath the line art layer.
Recommended material: "Enclose and Fill" tool
Here, I'll load a material called the "Enclose and Fill" tool from Studio Mode.
By simply using a lasso selection, this tool automatically fills in the area inside closed line art. It's an excellent tool that works even if there are some gaps.
You can download it from the link above.
It's a very easy-to-use material, so please give it a try ^^
How to import materials
You can't import the material from the Lasso tool, so select the Pen tool.
Open the tool list and add it from the plus button via "Import Studio Mode material."
Materials added this way will go into the Pen tool section in the left toolbar, even if they are selection or figure tools.
If you get lost looking for it, check the Pen tool.
Tips for faster coloring
Start by coloring the skin.
Once done, move to the next frame and color the skin parts first.
You are free to choose which part to start with; color whatever is easiest for you.
It's faster to color the same area across all frames at once, as it reduces the number of color changes.
Divide the coloring layers as you like.
How to create a custom color palette
Also, you can register frequently used colors to a color palette.
You can create a new palette by pressing the plus button in the three-line menu bar of the color palette.
Pressing the plus button in the empty palette you created will add the currently selected color to the palette.
I've finished coloring. It's complete!
11. Exporting and saving the file
Now, let's export this animation.
We need to return to Studio Mode for this.
This is because in Simple Mode, you can only export video files, not animated GIF files.
What is a GIF?
GIF stands for Graphics Interchange Format and is a file format for images that can display animation.
It features automatic looping, background transparency support, and lightweight file sizes.
Most sites will play GIFs on a loop automatically when posted online.
However, there is a limit of 256 colors.
The MOV files exportable in Simple Mode are video files, so they output higher quality images compared to GIFs.
On the other hand, they don't loop automatically like GIFs.
GIF: When you want a short loop or a lightweight file size.
MOV: When you want high quality or are using more than 256 colors.
Use them according to your purpose.
Exporting a GIF in Studio Mode
After returning to Studio Mode, select "Export animation" from the "File" menu.
A pop-up will appear, so set the image size and frame rate, then export.
Be sure to set the frame rate to 12.
Once exported, save it to your desired location and you're done.
Exporting a video in Simple Mode
I'll also show you how to export animation in Simple Mode.
Tap the three dots in the top right and select Export animation.
A preview of the work will be displayed; if everything looks good, tap Save or Share.
Save it to your desired location and it's complete.
The file will be exported in MOV format.
Conclusion: The appeal of Simple Mode
Thank you for reading this far!
Since this was my first time creating an animation using Simple Mode, there was a lot of trial and error, but the intuitive operations of Simple Mode allowed me to get used to it quickly.
Two advantages of Simple Mode
As for my personal impressions, there are two main charms to Simple Mode.
One is that the screen isn't filled with palettes, allowing you to draw on a large canvas.
The other is that the detailed setting screens for tools are large and easy to read.
Disadvantages of Studio Mode
While Studio Mode is multi-functional,
it also has downsides like being overly sophisticated making operations hard to understand, or having text that's too small to read.
When I only used Studio Mode, I didn't feel these were downsides, but after trying Simple Mode, I noticed these negative points of Studio Mode for the first time.
I think you could say Simple Mode is an interface that fills in the gaps of Studio Mode.
Advantages of Studio Mode
But of course, disadvantages are just the flip side of advantages.
In Studio Mode, even just looking at animation production, you can use various functions like changing the frame rate, animation folders, and camera functions.
Drawing with held frames that don't move or separating parts into folders is the real pleasure of serious animation production unique to Studio Mode.
CSP's Strength: Switch modes to suit your needs
Simple Mode is an intuitive mode that even those who have never made an animation before can use easily, so I recommend it for beginners.
Being able to switch to Studio Mode for full-scale production once you're used to Simple Mode is a strength unique to Clip Studio.
License limitations
However, depending on your Clip Studio license, there may be a limit on the animation length. If something doesn't seem right, please check your license.
Animations that can be created in the PRO / DEBUT versions are up to 24 frames.
It is unlimited in the EX version.
Thank you for reading!
Please try using Simple Mode when you want to focus on creating on a large screen or want to try making an animation casually.
That's all from Nukegara.
Thank you for reading this far!
Distributing template materials
Based on the animation made this time, I've created a walk animation template.
You can easily produce a walking animation just by loading the material, adding hair and clothes, and tracing the clean-up lines.
I created this alongside the article thinking that some people might find starting animation production to be a high hurdle.
It also includes guide animation for how much to sway the hair (and clothes) according to the movement.
Maximizing the sway when the guide graph reaches its peak will help it blend better with the body movement.
There are two materials being distributed.
① Animation material distribution on CLIP STUDIO ASSETS
② .clip file distribution on Nukegara's FANBOX
① Animation material distribution on CLIP STUDIO ASSETS
This can be downloaded for free from the Clip Studio Asset Store.
*Please note this material is only for use in Studio Mode.
Refer to the material download page for usage and loading instructions.
② .clip file distribution on Nukegara's FANBOX
For those who wish to produce animation in Simple Mode, I am distributing a CLIP STUDIO FORMAT file of the walk animation template (it's a regular .clip file you can open in Clip Studio).
The contents are exactly the same as the material distributed on ASSETS.
If you want to use Simple Mode, please use this file.
[How to use]
Open the downloaded file in Clip Studio and switch to Simple Mode.
Add the character's hair and clothes on a new layer, hide the sketch, and export.
Confirmed working device is iPad Pro 12.9 inch 4th Generation.
Personally, I feel that the part of the brain used for drawing illustrations and the part used for drawing animation are quite different.
When I first made an animation, there were many things I only understood by actually trying it.
Please utilize this material to acquire the mindset needed for animation production.
I hope it serves as a helpful tool for casually making animations.
Animation has a different appeal than illustrations, allowing for expressions unique to animation.
It might feel difficult at first, but it gets easier as you get used to it.
It's very fun, so please use this material to easily move your favorite characters :)
Users who liked this post
Comment