Basic Animation Meme Lip Sync Lesson (iOS Alight Motion & IbisPaint X)

(Auto-translated by Google Translate) Want something like this? Disclaimer: I won't be covering the whole lip sync, it's too long... This is my second Alight Motion tutorial, and it is about lip sync! (You'll need Alight Motion and IbisPaint X) In this video, I will show a part of how I did the lip sync preview. Then I will give tips so that you can do lip sync for any audio you want. I will be covering "Stretch Axis," "Head Movement," and some "Layer Parenting." (I highly recommend that you see

my previous tutorial!) Get ready to pause the video! I go fast in this tutorial, and I improvise a lot as well. Sorry... Let's begin with finding an audio... "Why are you running?" "WHY ARE YOU RUNNING?!" Perfect The first thing you want to do is know what mouth positions you need. So I made a diagram that I will show you shortly. While making your own diagram for any other audio, you can search up lip sync references for help, or say the words out loud. It's good to know whether you have dupli

cate mouth positions. That way, you can reuse them. I'm outlining similar mouth positions that I found here. Here is my finished diagram. (Pause the video if needed) I will single out the similar mouth positions for you. Then we will draw out the main mouth positions. Alright, it's time to draw! Now, we draw out the three mouth positions, each in a different layer. I put a head as well, just so I know where the mouth is on the face. Drawing the mouth positions shouldn't take too long, I think. N

ow we'll save our finished products as separate, transparent PNGs. (I also saved the head) Now, let's head into Alight Motion and import our layers. To import your layers, press the + button at the bottom right, then press Media Then, select one of your layers and repeat until you've imported them all into Alight Motion. Mildly unsettling... "WHY ARE YOU RUNNING?!" What beautiful lip sync, looks like we are finished! Just kidding Let's trim the layers so it's the same length as the audio. Using

the audio, I found the gaps between each word, just to organize things. Then I clicked on the timestamp to insert a red line. (They are like bookmarks! I find them very useful.) Okay, that timing seems pretty good! Now we will add the mouth positions to their specific times. It's good to have your reference or diagram out. I trimmed the first three mouth layers in order to complete the first word. Chances are you'll have to repeat the audio several times to get the timing right. ... Yeah. For th

e rest of the words, you'll have to make copies of the used mouth layers. You can add more mouth layers through the + button from before, and add them in accordance to the diagram. Fast forward... (Adding the other mouth layers) Result (without animation) This reminds me of how characters talk in Avatar (The Last Airbender) Now, it's time to add the animations! This may be tricky at first. Select one of your mouth layers and go to "Effects" Select "Stretch Axis." You can find it by clicking "Mov

e/Transform." We will be using two kinds of "Stretch Axis" effects for mouth positions: "Pinch" (I made up that name, by the way) "Open and close" Change the Angle from 0.0° to 90.0°. Then, create another "Stretch Axis" with just 0.0°. (Alight Motion will show you your most previous effect, so you can find it quickly.) Now, I highly recommend you click "Copy Effects." You'll need the "Stretch Axis" effects for most other layers. Let's set diamonds at the start and finish of this first layer. For

the second diamond, bring the "Scale" up to about 1.25 (a higher scale makes the mouth wider) Now let's add new diamonds, this time in "Move/Transform" (with ✥ selected) "Stretch Axis" unintentionally moved the mouth away from the center. Use ✥ to move the mouth back to the center. So far so good... Add the same "Stretch Axis" effects to the next mouth position (without the diamonds) You can do this quickly by clicking the three dots (...) and "Paste Effects." (Mine had diamonds, but it's easie

r without them) In the video, I was doing so much improvising. I'll try my best to explain what I did for the second mouth position... For the next mouth position, it is going to open, then close with gritted teeth. For this transition, I will combine two animations: Scale (grow) + "Stretch Axis" (close, 90°) = Grow, then close In order to do this, we have to bring this dot to the center of the mouth. (Click ✥ so the numbers turn blue, the move the point) Now we can go to the "Scale" button. Pla

ce diamonds at the ends of the layer. At the first diamond, make the mouth smaller. ("Scale" grow is complete) Now, let's make the mouth close with "Stretch Axis." Go to the one with 90°. With "Scale" selected, place diamonds at the beginning and the end... The first diamond should be at 1.00, and the second diamond less than 1.00 (maybe 0.70 or 0.80) I also selected this graph for the transition, just so the mouth closes more smoothly. Let's go back to ✥ and make sure the mouth stays in the sam

e spot. Put diamonds, and use the second diamond to bring the mouth down. I used the same graph as the "Stretch Axis," since "Stretch Axis" was the one that unintentionally moved the layer out of place. ("Stretch Axis" close is complete) Alright! The last mouth position I will cover is this third one. Like before, let's paste our two "Stretch Axis" effects. I deleted the "Stretch Axis" with 0°, because I didn't think I would need it. I added diamonds and made the first diamond have a higher scal

e (about 1.20) And just like before, I went to "Move & Transform" and placed diamonds to move the mouth back up. Now it looks like the mouth is closing smoothly. That was it of my in-depth tutorial! The rest of the lip sync will be a time lapse while I give some important tips. After that, I will be demonstrating the head movement using Layer Parenting, so continue watching for that. Tip #1 When animating lip sync, there are many formats... Smooth transition: - In and out transitions overlap eac

h other - Uses several effects ("Stretch Axis," Scale, Move) Easy transition: - "In" transition only - Less effects used ("Stretch Axis," Move) - Good for fast talking, where you have lesser time One-layer transition: - one layer recycled for similar sounds spoken together - good for laughing and very simple animation - not used very often, not recommended for professional animation Frame by frame (not covered in this video) - Most detailed way of lip sync - Good to use in frame-by-frame apps (

for example: FlipaClip) - Hard to do in tweening apps (for example: Alight Motion) There are probably many other ways to do lip sync that I did not cover here. Tip #2 Scale consistency is key, if you want things to be more professional. For example, when something is shrinking, it has to keep shrinking. If it suddenly grew, then the animation wouldn't look as smooth. In this case, an exception would be if it were an "out" effect. If you found this tip confusion, then don't worry! This brings me

to my next tip. Tip #3 Don't expect lip sync to be perfect. It doesn't have to be perfect! Like I said earlier, I improvise a lot when it comes to animating. Lip sync is no exception. It's up to you to tweak your lip sync if you are not satisfied. Chances are, viewers who watch lip sync won't focus too much on how accurate it is, especially if there's other cool animations along with it! Tip #4 Do you have too many mouth layers? "It's too long, ZumoZumo..." Don't be afraid to recycle layers! (Th

is might call for another tutorial...) In short, you would get the three main mouth layers and choose when they will be visible or invisible. Maybe I should make another lip sync tutorial for that... (Then again, this tutorial took me more than a week to do) What should my next Alight Motion tutorial be about? Feel free to suggest in the comments! I improvised again. See the tiny mouth layer? I made it longer and deleted the layer next to it. After that tweak... Result: The animation looks good,

but it could use more movement. So there is one more thing I want to demonstrate: head movement! I selected all of my mouth layers... (Press and hold where the arrow is.) (You can also press this button and "Select All Layers," then unselect unwanted layers. It's faster.) Once you have only all the mouth layers, click this to put them in a single "Group." When in a "Group," mouth layers are kind of "merged" in a single layer. For movement, I will start with the head. But first, I will bring the

pivot point down to where the neck of the head would be. This kinda came as a force of habit for me when I animate, since I would tween the head as well, rotate it... etc. Then, I used Layer Parenting. "What is Layer Parenting? I'm so lost!" I understand. I would be confused too Layer Parenting is when two layers are connected, and one moves in respect to the other. There will be a "Parent" layer and a "Child" layer (or "Children") What a low-quality demonstration... To do Layer Parenting, sele

ct the "Child" layer, click the Layer Parenting button, and select the child's "Parent." (In this case, the "Parent" is the head layer, and the "Child" is the mouth layer.) Once you've selected the "Parent," the button's symbol will change into this. That means the selected layer has a "Parent." Now I'm gonna analyze the lip sync, then make the head's movements compliment the lip sync. When he says the first word, I thought I would put an emphasis by making him lift his head abruptly. So, I move

d the head layer accordingly. The graph I used makes the head kinda "bounce" up (because of inertia, I guess) (I also copied the effect because I will use it on the mouth too.) You may have noticed that while the head moves, the mouth moves with it (due to Layer Parenting). But it still looks two-dimensional (like paper). So, I will do the same translation with the mouth, using the same graph. Good so far... (By the way, for free Alight Motion Users, you don't need Layer Parenting as long as you

move both layers) I think I will make the head go down again on the next part. I plan on making the head go up for emphases, and down on smaller words. "WHY are you RUNNING?" (I know not all of you speak English, so I tried to make this as understandable as possible.) The rest of my head transitions are done the same as before, except with a different graph. The graph is softer than the first one. It doesn't use Overshoot (which can be accessed through the "..." button) Result: "Why are you run

ning?" x3 Okay this joke is getting old Thanks for watching! I hope you got something out of this video, despite how messy it was. And if you watched until the end, congratulations! Now you're one of the few people who know that I'm going to have a QnA at 50k subs! (Me in Genshin Impact, my UID is confidential) (Captions by ZumoZumo and one of her friends) (And yes, my favorite character is Itto) (Okay, bye!)