Ever wanted to animate just one spot on an image? Sometimes it’s a great way to start learning animation! I’ll share how I do this in my style, and I hope it helps you with your experiments and animation journey!

 

 

FIRST THINGS FIRST: Do you know how layers and animation cells work in Clip Studio Paint? Come with me, young Padawan.

 

 

Have you ever illustrated digitally? For beginners in the magical world of digital drawing, we have the lifeline called "layers." When we draw on a physical material, be it canvases, papers, or perhaps a T-shirt with your hand-drawn design, we have to be careful not to make mistakes (or at least turn the mistake into a "happy accident" à la Bob Ross hahahahah). In digital drawing, we have the ace up our sleeve of drawing different parts on different layers; if you make a mistake on one layer, it won't interfere with the rest of the drawing. Well, did you get the example of layers in an illustration? Perfect, now let’s follow the logic of animation in Clip Studio!

 

Let’s imagine my image as an example, where there’s a child reading and the pages start to move. Starting from this, the main advice is to separate your layers according to your drawing's dimensions. For instance, in my animation, the book is in the foreground, so it will be on top of all the other animation folders. Whenever something needs to be "closer to the camera," "closer to the viewer," the higher the layer/animation folder will be. A VERY useful thing in Clip Studio is that you don’t need to extend the end of the animation cell to the end of the number of frames you’ve chosen. You just need to make a single cell, and it will automatically repeat. It’s VERY useful, SERIOUSLY!

For each part of the drawing's dimensions, I create a new folder, which is where the animation cells are kept.

 

Let’s imagine the axis of a math graph, which we all love, of course.

 

On the x-axis, we have the horizon, and on the y-axis, we have the height of something between the ground and the sky, right? In Clip Studio, the x-axis, our horizon, shows the position of each animation cell in its respective frame chosen by you, and you can freely click on any cell on this axis to choose the frame you need to edit, paint, etc. On the y-axis, we have our animation folders (they usually appear on the bottom right, but you can move them if you want).

 

Just like in real life, where we can stack folders as high as gravity allows, they can accumulate and reach an unimaginable height, right? In Clip Studio Paint, it’s the same. And you can play the folder stacking game on easy mode by closing the folders you’re not using, or on hard mode by opening them all and letting the wind mess up all the loose sheets. These sheets inside the folders are also the animation cells! And you can also click on them, everything depends on how many millions of folders you create in your excitement and need. Sometimes it’s easier to click on the y-axis cell to edit and paint than to search on the x-axis for the cell I need. Later, when you start getting excited about your animations, you’ll understand what I’m talking about HAHAHAHAH (nervous laughter).

 

 

I hope I’ve helped you understand the logic of this app's wonderful layers. At first glance, you might be like me, looking at the screen while tilting your head like a character opening a chest and trying to figure out what’s inside, but as soon as you realize it’s a disguised treasure, the smile appears just the same!

 

Let’s keep going!

 

 

Step 0: Grid as a Guide

This step is more of a bonus. If you want to create a harmonious scene based on the rule of thirds, you can do it in two ways: manually or with Clip Studio's grid.

 

a) If you opt for the manual way, just draw the lines and separate them into 3 columns and 3 rows, hence the rule of thirds (the columns and rows are the empty spaces, not the lines themselves). To draw straight lines like in the example, simply click once in the area where you want the line to start, hold the "shift" key, and move the mouse or pen to the end of the line in the direction you want. Then just repeat the process until you have all the lines you need.

b) If you opt for Clip Studio Paint’s grid, you’ll need to program the spacing between the lines, just follow the examples in the screenshot below. My program is in Portuguese because I’m Brazilian, but I hope you can understand my explanation in this tutorial and that the arrows and indications in the screenshot help in some way... once you configure the spacing between the lines and columns, dragging the "x" to frame the grid the way you need, just confirm, open the "view" menu again, and select the "grid" option, which will now show the lines the way you edited them.

Alright, back to the tutorial!

Step 1: Define the Main Idea

I thought for a few days and imagined a small scene where a child feels like time has stopped while reading their fantasy book. I sketched it out and separated the character with a red pen and everything else in dark blue.

 

Tip: Keep the sketch as a visible base for all folders. For this to happen, you need to drag the layer out of any folder; it needs to be an independent layer, placed way down at the bottom, just above the "paper" layer where we choose the background color of the animation.

Step 2: Let’s Define the Animation

After the previous step, I animated the pages "moving" from side to side still in sketch mode. One thing you might find strange at first is the way the layers are presented in Clip Studio, which ends up being vertical, BUT when you start to see that on the timeline the layers are parallel, things get easier. And I even find it interesting how this happens, it ends up helping me with animations, as it allows me to follow the final art and the layers of colors or effects I do separately. I feel like I’m illustrating, but with the difference that it’s also animation hahahahah. Alright, let’s move on.

 

Tip: To repeat the frames, we have 2 simple options: manually copy and paste the drawings from one cell to another; or quickly copy and paste with the right mouse button (this also works if you create a linked cell, the one with a chain icon).

 

a) Manually copying and pasting means using the "m" shortcut and selecting the type of cut to copy the cut and paste it into another frame. It may seem useless and like a ridiculous increase in work, but believe me: it’s not. When you choose this option, you can change the pasted frames as needed or wanted without altering the original frame. With this, depending on the type of animation you’re making, you can save time. I had to do this in a video I released recently, trust me, this is the best advantage of this option. The disadvantage is that it’s a bit of work to paste into each independent cell, but if that’s what you need, the effort will be worth it.

 

b) Quickly copying and pasting with the right mouse button (or with the linked cell with the chain icon): this also has its advantages but with a TOTALLY different focus from the previous option. Here you need to be sure that there won’t be any more changes, because if you change something in the cell you pasted, it will also change the original cell. Yep, baby. That’s the disadvantage, but it’s also the main advantage because if you’re going to repeat the scene to make a loop, this is more than enough, and if you need to change something, it will already change the copies and the original at the same time, so you wouldn’t have the work of going to each frame to make the change.

 

It all depends on your goal, just take advantage of the features =)

PS: In the screenshot above, there’s an example of how the screen looks when you select the creation of a linked animation cel. The program shows which cel you want to use as a base, basically asking which one you want to repeat.

 

 

2.1: Total Frame Count, Frames Per Second, and How to Navigate

Well, there are rules and guidelines with best practices about the principles of animation and all the rest. But in this simpler case, I’m going to show you an example that helps me when I’m in a hurry. When I still need to define the speed and "flow" of the animation, I can guide myself better by creating a pattern between the frames while only changing the drawing between keyframes and transitions.

For example, I can see if I can develop it better with a frequency of 4 frames (I count 3 frames and on the 4th, I add the new frame, you know?), so to make it smoother, I keep adjusting the drawings. Sometimes we can get lost with the total frame count and frames per second, but it's just a matter of dividing the total frame count by the total number of frames, or dividing the number of frames by the frames per second.

For example, if I’m completing a cycle and still don’t know how many I need, but there’s 1 frame every 4 frames, then I’ll need 6 frames every 4 frames to have 1 second (here, I just divided 24/4 = 6 frames in 1 second. Yeah, whoever thought they’d escape math just faced the terror head-on).

 

But in general, it’s pretty manageable because you just need to logically organize your priority: frames per second, total frame count to see how many seconds your animation will last... and from there, grab your trusty calculator from the corner of your phone or computer and check if the number of seconds is enough for what you want. =D

Or you can do it the other way around, as in the example where the space between one frame and the next is 5, and on the 6th, I create a new cell, so it ends up being 4 frames per second (meaning 4 cells within 24 frames) as the picture above

 

 

Just for the record: the total frame count or frames per second can be changed at any time in the program, so if you realize you need more or less, you can always adjust it ;)

 

 

Step 3: Define Values, Colors, and Experiment with Brushes

This part is more relaxed because it’s the moment to experiment with the effect you want to convey with the animation through brushes and colors. The correct way is to do it in black and white to understand where there will be light and shadow without it looking strange or without having to think too much about the colors and their effects with lights or shadows, but I’m stubborn, and I went straight to color. Don’t do as I did.

 

 

Step 4: Coloring the Static Parts

Since this is an example of animation where only one part is moving, there’s not much secret in coloring. My advice is to create a folder for each layer and name that folder so you can quickly navigate between them, because as I mentioned in the example above: the folders stack up until they reach the sky if gravity allows (and in Clip Studio Paint, gravity lets them reach the planet Venus).

 

Remember: to paint, you need to create an animation cell, but you don’t need to create more than one cell to repeat the layer you’re making.

 

 

Step 5: Animating Your Magic Spot

In my case, the only animated part is the book’s pages. In the meantime, I was experimenting with other animations to complement and accompany the pages, but in the end, I realized it would be too messy, so I just deactivated the eye icon, which makes your folder or layer visible, and moved on with my life.

 

Don’t get too attached to the work you’ve done; if you realize it’s better to throw it away or restart, do it. And there’s no waste because you end up with experience and learning what to do or not do in similar situations in the future. Just relax and enjoy the process, and the final work will naturally be better than you expected.

 

So, for animating just one part, you need to make the loop the way I mentioned in step 2, color it following step 4, and you’re ready to render and save your file as you want.

FINAL STEP: Render Your Animation and Save it as a Video or GIF

Clip Studio Paint makes it easy to save your animation, be it as a video or GIF. Since you already know the magic of layers, we just need to go to "File" and select "Export Animation" to save it in the format you prefer.

 

And voila! You made your cute animation just as your heart desired!

 

I hope you enjoy the process of animating, both in the technical aspects and in using the progra, it has many features that help one-person studios and their dreamers, hahaha.

 

Happy studying, and see you next time! =D