Introduction and clarifications

Hello!

In this tutorial I will explain how to make basic animations for an animated emote, using keyframes.

 

 

Before starting it is important to mention 3 things:

 

1. Clip Studio Paint PRO (the base license of Clip Studio), has a limit of 24 frames to be able to animate. If you need more, it will be necessary to purchase the EX version of the program.

As we are dealing with simple animations, we do not need so many frames, so 24 will be enough and it will be explained based on this limit.

 

2. In this tutorial we will use only keyframes, not frame by frame animation. This tool helps us so that a layer can be transformed and edited, so that it makes a movement or change of size from an indicated point, to an end point. We will take advantage of these tools to be able to make a quick, cute and easy animated emote.

 

3. It is not possible to export a GIF with a transparent background with Clip Studio at the moment, but instead we can export the frames to be able to render the gif later, I will explain these steps at the end of the publication.

As examples in this tutorial, I will use 4 of my emotes to make different animations:

◦ Greeting: Hand movement and heartbeat

◦ Smug: Eyebrow movement with use of layer mask

◦ Shout: Vibration

◦ Sleep: Moving Text

For support, you can also visit my video tutorial on this Clip Studio Tip

How do I prepare my emote to cheer?

Consider two scenarios:

 

 

• You haven't started your emote yet.

 

You can watch this tutorial to skip ahead a few steps while you're at it:

Think of the parts or elements you want to make move (letters, arms, pupils, etc.) and draw or create them on separate layers. In "How should I separate my emote?" I will describe this process further.

 

• If you already have an emote.

 

You don't need to make a new canvas, just open your file from FILE -> OPEN and find your image

Remember that it must be a .png image with a transparent background

Since your emote is entirely on a single layer, it will be necessary to separate the parts or elements that you want to move.

 

• How should I separate my emote?

 

You will need to have separate parts to get started. If your image is on a single layer, this can be achieved using the SELECT tool:

And using the SELECTION PENCIL, you will select one at a time, the parts or elements that you are going to separate.

Once your element is selected, cut (CTRL+X) and paste (CTRL+V). This should create a new layer for you on top of where you were positioned.

Tip: In order to better notice any errors when selecting, use a background layer, and fill it with a dark color of your choice.

You will need to deselect in order to continue with your next item. This option can be found in the SELECT -> UNSELECT window.

You repeat this step in the necessary elements and you must arrange them in the logical order according to their position. In my example:

 

• The heart goes on top of all of them, because it is a floating element in the emote.

• The body goes on top of the arm, so that the arm can pass behind the head.

• The hand goes behind the arm, so that the wrist is covered by the sleeve of the clothes.

 

Tip: If your emote has lines to express movement, you can remove them, because in the animated emote they could get in the way, and they would no longer have much use.

Finally, you will also need to add some 'tabs' to your separate parts, which are hidden by the element above them. This will help so that when you move the arm, there are no separate parts when you animate.

 

These 'tabs' apply only to emotes that need them as they are an element of a larger system, such as the Greeting emote. The emotes that have characteristics only of vibration or floating element, it will not be necessary to create these 'tabs'

In the example in the illustration, you can see how I extended the color a bit further behind the body. The effects will not be noticeable at this point, but later you will be able to notice it.

NOTE: Remember to save your file (if you opened it in .png) in CLIP STUDIO FORMAT, in order to save your animation changes.

In FILE -> SAVE AS... you can change the format of your file. You can see it under the name of your file in the window that will appear:

Once with the elements separated, and the file saved in the correct format, we can start.

fundamentals

 

• TIMELINE

To get started, we'll need the animation timeline. By default, Clip Studio does not display this bar. We will be able to appear it in our workspace searching in WINDOW-> TIMELINE

This new bar will appear:

In which we will look for the NEW TIMELINE icon located in the upper left corner.

The following options window will appear:

In Name, you can put any, it doesn't matter so much, because you can change it anyway before saving.

The speed, preferably keep it at 24, because if our frame limit (duration) is 24, it will translate to 1 second of animation.

 

The other options can be left as they appear.

In the timeline, the layers that we have created will now appear.

 

 

• KEYFRAMES

Keyframes can be activated on the penultimate icon at the bottom of the bar, by clicking "ENABLE KEYFRAMES FOR THIS LAYER"

You'll be able to see that your layer can now use keyframes, because a pencil and lock icon will appear to the left of your layer.

To insert keys we will use the icon indicated in the following image:

Where we can also display the animation options for the keys:

• Fixed value: The image will remain static until it reaches the exact frame where it must change position. The key icon is yellow.

• Linear: Create motion animation, directly from the indicated position to the next. The key icon is green.

• Smooth (Curve): Creates motion animation just like Linear, however adds an element of "softness" to the element's transition. The key icon is purple.

Each can serve different purposes. In the examples that I will show, we will use only the Linear and Smooth (curved) interpolation

 

On the other hand, you will be able to see how your emote animation is going as you do it in the "PLAY" option in the timeline.

Greeting Emote

We will be using Smooth (curve) mode for this emote.

 

 

 

• ARM

 

 

Starting with the arm, we click on INSERT KEY while positioned on frame 1, and a diamond-shaped symbol will appear to indicate that the first key has been generated.

Once with our first frame set to the starting position, we can start moving the element.

We place ourselves in another frame, where we want the second position of the arm to be.

We look in the toolbar OPERATION -> OBJECT

And we can start moving the element to our liking.

As soon as we move the element being located in another frame, we can notice that a key is automatically generated in the timeline:

Then we will move the arm from the center, up and down, in order to generate the greeting movement.

NOTE: To make your emote loop, you can add a key identical to the initial one, but at the end of the timeline.

 

The way to do it is by right clicking on the key (the diamond icon) and the following options will appear:

You click on CUT, you position yourself in the last frame of the timeline, there you right click and select PASTE.

Tip: If you notice that some of your elements leave spaces when moving that they shouldn't be, don't worry! You can still correct it.

With the option "EDIT LAYERS WITH KEYS ON" you can modify your layer, and with a brush, draw anything you missed. Your canvas will appear as follows:

It is normal for it to appear like this, it is to help you have a better view of your layer.

Once you're done, you can click the "EDIT KEYED LAYERS" icon again and continue creating your animation.

 

 

• MY

We follow the same steps to insert a start and end key.

 

Being an element related to another, we have to create the keys in the same positions as the arm has them:

In the high and low hand positions, you can tilt the hand a little more, so that it makes an extra movement that gives the illusion of a wrist.

 

 

• HEART

This is the easiest.

It consists solely of creating keys by making the heart smaller and larger. In this way the beat is created.

You can leave a part of the timeline without keys, so that the beat has a timeout before returning to the beat

Emote Smug

This emote has two layers:

• Face base layer, without eyebrows

• Eyebrow Layer

In this emote, instead of parting the hair so I could make the eyebrows go under the hair and on top of the head, I used a layer mask instead.

BEFORE turning on the keys for the layer, look for the "CREATE LAYER MASK" icon

A second white box will appear next to your layer. Being located in it, with an eraser, review the parts through which you do NOT want your element to be seen when passing.

 

In this case, I don't want the eyebrows to show above the hair, so I erase the area where the hair meets.

You will be able to see the blocked areas in black.

Once the mask is activated, you can activate the keys for the layer, and make the up and down movements with the eyebrows.

In this emote, I didn't feel like the 24 frames were necessary, so I reduced them.

Sleep Emote

In the sleep emote, since it is an emote with a moving text effect, we will only need the base emote, without any other addition:

 

 

• LYRICS

To start our text animation, we need to go to this tool:

With the font and color of our preference, we will write the text.

In this example, I will only write a Z

We insert the key, and accommodate the letter according to our preference.

 

I will accommodate it near the mouth, with a small size. I will be inserting keys, transforming to a larger letter to generate a movement like steam.

The keys in the middle are for making small variations in size and angle as the letter goes up.

 

The letter at the end is positioned outside the canvas to make it "disappear".

 

 

 

• OPACITY

To add a more steamy effect, we can change the opacity of the letter as it rises.

For this, it is only necessary to position yourself on key 1 (make sure the diamond has a red border when you have selected it). And on the opacity slider (above your layers), move it to 0.

Next, you go to your key 2, and bring the opacity to 100.

 

With this, your letter should make a pop-up animation.

 

 

 

• REPEAT

Now, you will do the previous steps with two more letters, in order to have the text "Zzz".

 

The new letters that you add, put them below the first one you have made, in this way, when they appear, they will go one after another, and not interfering between order and superposition.

 

 

• TABLES

Once you have your three animated letters, you can apply a colored border to them to make them more attractive in the emote.

Under LAYER PROPERTY, find EFFECT -> EDGE EFFECT and turn it on.

Once activated, you will be able to modify the color of the border, and the thickness:

And you apply this border to your three letters.

Emote Shout

For this emote with a vibration effect, it is only necessary to have the base emote.

We're going to apply a blur effect, so if you prefer, copy the layer so you can go back to the original if you don't like the changes.

 

 

• BLUR

Let's go to FILTER -> BLUR -> MOTION BLUR

And the following window will appear:

• Distance: is the amount of drag effect. I recommend maximum 3. I used 1.8.

• Angle: is the direction where the drag goes. In my opinion it doesn't matter in this case.

• Direction: if the drag applies to both directions, or only a movement to one direction. For this emote I recommend that you use both directions.

• How to blur: it has two different effects: box or smooth, the difference is more noticeable the greater the distance. It's a matter of preference, and it doesn't matter much which one you choose. I chose box.

 

 

• ANIMATION

For this emote, it will be better to use the "Linear" interpolation, since trying to be stronger movements, it needs more roughness in the transition that the "Soft" eliminates.

You can move the image randomly.

 

Create the keys every frame if possible, this way the vibration will seem faster.

How to export?

As I mentioned at the beginning, we cannot export a GIF with a transparent background in Clip Studio, as it automatically converts it to a white background.

In this case, the alternative is to export as Image Sequence.

FILE -> EXPORT ANIMATION -> IMAGE SEQUENCE

This window will appear:

Make sure your export destination is the right one.

You can change the name of your timeline in this window, and it will be what the name of the images that are exported will start with.

 

In advanced settings, the file type should be PNG (NOTE: make sure the dark background color you set is no longer part of your animation!)

 

You can modify the size if your file is very large, or adapt it according to the specifications of the site where you have to upload your animated emote.

 

Under Export Frame, the first row should match the number of frames you determined when making your timeline.

And finally the FPS, leave it at 24.

 

Once this is set, hit OK, and every single frame (in our case 24 images) you made should appear in your designated folder.

How do I use frames to make an animated GIF?

You can use them in the software of your choice that allows you to make GIFs with transparent backgrounds. You only have to enter the frames for processing in order.

 

If you don't have one to use or don't know which one, I recommend using GIMP since it's free.

 

You can find a brief tip on my profile on how to make these GIFs.

Results

And this is how it would look!

 

There are many options where you can apply this kind of animations, so let your imagination run wild! Good luck

 

 

 

Thanks for visiting this tip! If you have any comments or feedback, feel free to comment ❤