Want something like this?
Hi, and welcome to my Alight Motion tutorial. This time it's about eyes! You'll need Alight Motion and IbisPaint for this, as well as general knowledge about both apps.
If you are new to my tutorials, I highly recommend watching my previous tutorial videos!
I will give you two different methods to animate eyes. One is more complicated than the other if you want a challenge.
Let's jump into IbisPaint and begin!
Start with one layer and draw this part of the eye.
This layer has the eye shape, the sclera (white), and an eyebrow. The dot in the eyes is not included.
Here's a tip when drawing in IbisPaint: you can change the background at the bottom of the layer screen, so you can see certain colors better.
For instance, if I can't see the white part of the eye because of the white background, I can change the background to black.
I am fixing the white stuff.
Let me add some shading.
Okay, now make a new layer and draw the dot! (also known as the "pupil," but I know this will get lost in translation.)
Since the dot is on a different layer, it can move freely on the eye.
Now I am filling in the dot with a bright blue.
Next step: draw the eye again, except it's closed.
Again, this will be on a new layer.
(It was at this moment I realized I forgot the eyebrow. By the way, it is on the same layer as the open eye without the dot.)
Don't forget to give the closed eye an eyebrow as well. (They must be on the same layer as each other.) I suggest drawing it similarly to the previous eyebrow.
I made the other layers see-through so that I can copy the other eyebrow's style.
I tilted the eyebrow down, since the eye is closed.
I also suggest bringing the closed eye's eyebrow down a bit to make animation transitions better. We'll get to that later.
The drawing part is now done! We should have three layers in total:
A closed eye, an open eye (white part only), and the dot for the open eye.
Now save all three layers as separate, transparent PNGs. We will now move on to Alight Motion!
Import your layers onto Alight Motion.
Now we want a format on how the eye will blink, so we will crop the layers.
Select the layers and use these buttons to crop them as you like. It's key to edit the open-eye layers together!
(I mean to make the eye open again, but I'll do so after this.) Now we're going to animate! Select the white layer and click "Move & Transform"
Click the arrow button twice so the numbers become blue, and move the pivot point here.
The pivot point should be just below the eye. You'll see why in a little while.
(Also, you don't need to give this dot a specific pivot point.)
Anyway, select the white layer again and click the button shown.
And click this button to sever the link between height and width.
With height and width separated, you can stretch an object vertically or horizontally. (I was having fun making this animation)
Add diamonds at the beginning and end of the white layer. (I guess I am naming it that now)
Now, use the circled portion to squish the eye, like so!
Also click the graph button and give the eyes the graph shown above.
Feel free to adjust the diamonds if they are not fully at the beginning or end.
So far so good! But as of now, the eye is only going to close.
It only looks like a blink because I'm moving time back and forth.
Let's make the eye close more smooth using our other layer (the closed eye).
For this layer, we will only be doing translation (movement) this time, because it is a simpler layer.
With this button, add diamonds at the beginning and middle of the layer's duration.
At the middle diamond, make the closed eye go down slightly. Also add a diamond at the end that moves it back to its original position.
For the first half of the layer duration, make the graph above.
As for the second half, make this graph.
Preview:
We aren't done yet, since the eye only closes (we need it to open again).
But first, let me adjust the closed eye so it's even smoother. (I made the eye go down a bit more.)
(You can always tweak your animations as you like, but it's not always necessary. I am just being a perfectionist)
There you go! I brought down the closed eye so it can align with the motions of the open eye.
Now I'm going to make the eye open again, so that means duplicating these two layers.
I saved this step until later, when the layers already have animations, so I can show you a trick.
Switch the diamonds in the squishing animation.
Give the animation the graph shown above.
And that's how to make the eye open again, with less effort!
Here's our new preview:
If you were following along, you can also play around with the eye pupil (the dot) in any way you want!
Use "Move & Transform" to move it around. I suggest making quick eye movements if you want it to look more realistic.
And if you're doing a pair of eyes, the whole process I mentioned is overall the same. The white layer would be a pair, the dot layer would be two dots, and the closed eye layer will also be a pair.
Well, that is all for the first tutorial!
Stick around if you want a more challenging tutorial.
Still there? Okay, what we're going to do next will look something like this example.
Let's jump back into IbisPaint!
First, we shall draw the white layer of a new eye, except we only do the eyelashes. We don't fill it in with white yet.
If you caught that moment of me changing my bucket settings, it's because I draw with the "digital pen" option. I prefer if the filling doesn't expand or overlap certain colors. It's a bit complicated, so you don't have to change your bucket settings
I'm taking forever on the lashes
I'm giving the lashes more flare for fun
Okay, now we're going to do something a little different. Select the lasso tool and select your top eyelashes.
(Auto focus is so fun)
Tweak your selection by "subtracting" and "adding." "Subtract" helps you erase selections you don't want. "Add" is the default setting you use to select an area.
Now duplicate this layer with the lasso selection still on. This will make sure that only the section selected will be duplicated (that being the top lashes)
Now go to the full eyelash layer (the original, not the copy), and erase everything in the selection for that layer.
As you can see, we now have the top eyelashes and the side lashes on separate layers.
For this blinking animation, the top lashes will make the eye open and close. (This will help you envision it)
Now for the layer with side lashes, you can add the whiteness to the eye.
I am experimenting with how the sclera can look (again, I am a perfectionist)
Now that I'm finally done here, time to add a new layer and make the eye dot
(Press and hold to select a drawing color from the canvas)
circles~
So far, we have three layers: the white layer, the dot layer, and the top lashes layer.
Now, we shall add another new layer and bring it below the top lashes. (I don't know why I brought it all the way down, that's not needed lol)
This next step is important: find a color that is most different from the colors of your eye layers.
For mine, I'll use bright green. We are doing this because we will soon use "Chroma Key."
For those who don't know what "Chroma Key" is, it's an effect that can make a certain color transparent.
Take one of my drawings for example. Using the Chroma Key effect, I can remove everything that is gray, or even white if the effect is strong enough!
Or let's say I wanted to drink an invisible potion, I can make anything purple disappear instead.
So I picked green as my most different color, and on this new layer, I will make a big circle directly above the eyelid.
It's vital to fill the top of the eyelid and remove any fillings that obstruct the bottom, like here. (Also merge both of these layers together after!)
Make sure the filling is big enough to cover all of the white layer. If the filling is smaller than the whiteness on your white layer, then the eye won't close all the way.
As for me, I need to bring this whole eye down. As you can see, the green filling doesn't cover everything.
Good thing IbisPaint has this new feature: folders! I'll briefly show how this feature works (even though this is an Alight Motion tutorial lol)
If I want to make a group, I press the button shown below and select "Add Folder."
This gives us an empty folder! You can move layers into the folder by dragging them towards it, like so.
If you want to take a layer out of a folder, drag it below a layer that's not in the folder.
In this case, I want to bring all of my layers into this folder.
If you want to collapse the folder and its contents, just click the folder.
And folders are not just there for organization, it can also help you move several layers at once!
By selecting the folder, you can translate it like any other layer, and all of the folder's visible layers will move together.
There is a downside: any hidden layers will not be moved. For example, if I hide the eye dot and move around the folder, the dot will stay in its original spot (it got left out).
Take note of this, especially if you have hidden sketch layers or similar layers.
Okay, I lowered all of my layers at once, so I can finally add some more green filling. After that, let's go ahead and save our layers!
Time to go into Alight Motion again!
Go ahead and import your layers through "Media."
Now here's the fun part: select your "green eyelashes" layer. Add three diamonds in the beginning, middle, and end. Then, with the middle diamond, bring the layer downwards.
As for the graphs, you can use this pre-set one for both.
smooth~
This blink looks realistic, yet also unrealistic. You can use this animation as a tweening flex. (If you've seen edits or character animations in Genshin Impact, they may have similar eye animations.)
Also, your green filling should cover the whole white layer. It basically serves as the closed eyelid.
Plus, if you want the blink to look more like this (see the top), a simple fix would be to squash the eyelashes.
Go to "Move & Transform" and the Grow / Shrink button, separate height from width, and add diamonds in the same spots as the eyelashes' movements.
Use the middle diamond to "squash" the eyelash as flat as you'd like, and use the same pre-set graphs for the animation.
(By the way I take forever to get to the Chroma Key part, sorry)
Now the eye should look like it's blinking in a more 3D way.
Kind of? Maybe?
And just like in the last tutorial, feel free to move the dot anywhere. (Again, I suggest that dot movements are fast, but that's just how I animate it)
"Sigh. Hey, my past self, can we get to the Chroma Key part already? My viewers will get confused if you keep improvising like this."
"Nah, I'm having too much fun here lol"
If you want to add even more flare to the eye, you can squash the white layer as well! Using what we've learned in the last videos, select the white layer and move its pivot point to its center.
Again, you must put your diamonds at the beginning, middle, and end. And use the same graphs that you've used before.
Preview! (This preview has the results of my detours, including eyelash squash, eye dot movement, and white layer squash)
(Fastforwarding, I'm just tweaking things)
We are almost done! Select all of your layers (by pressing and holding one of them, then clicking the rest).
And click this button up here. Now we have a group!
Select the group and click "Effects." Now add an effect.
Chroma Key should be one of the featured effects on the top of the screen. Go ahead and select it, then choose any of these three. (It won't matter since we'll choose the screen color ourselves)
I chose the green screen, so it automatically removed all green from the layer! But I want to make sure it's exactly the same green as in the layer.
Regardless of what button you clicked, select "Key Color" and use the eye dropper to select your filling color. (If you can't see the filling color, select a different color first.)
After doing that, go to "Threshold" and bring its value up. We want to make sure there are no more traces of the filling.
The best time to stop bringing up the threshold value is when you see other colors getting affected by it.
Wow, I think we finished it!
Then, I realized that this eye doesn't have an eyebrow. A quick fix would be to make a separate layer for an eyebrow and move it with the whole eye, using the same graphs and diamonds
I can't believe it, I finally finished another tutorial. I miss this.
By the way, I just want to let you guys know that I do see your fan art! Thank you guys, you are amazing!
Thank you for watching!
I hope you learned something from this tutorial. Happy animating! Have a clip of me playing Project Sekai (Hatsune Miku game)
(How is this video 14 minutes?!)
(Captions by ZumoZumo. Auto-translated. Sorry if it's hard to understand.)