The vector drawing tool is such a powerful tool that most editors do not use it at all, and those who do use it, just use it superficially. This is the exact mistake that keeps them an average editor. So, if you watch this video and master this tool, your editing knowledge will reach another level. Welcome to the sixth episode of the Editing Mastery series on mobile. By the end of this editing series, I will make you a master from a noob, that too completely for free. And if you are hearing the name of Alight Motion for the first time, then definitely watch the previous episodes. First of all, let’s understand what a vector is. Hey, although you can add shapes in Alight Motion, with the vector tool, you can create your own custom shapes. You must already know that an image’s pixels get pixelated or tear, but in the case of the vector tool, it is the reverse because vector graphics always look sharp and clean. Along with this, you can create some animations through it and also do custom masking, but that is for another video. For that, you first need to understand what the vector tool is.
So, open Alight Motion; I have imported a background for myself. You need to click on plus and open the vector drawing tool, and a cursor will appear in front of you on the screen—the kind you find on a laptop, don’t mistake it for PUBG or Free Fire! Yes, you can understand it, and below is a mouse pad that you can move. This is the cursor. Before that, click on this odd button to open the grids, and you can add grids here if you want. To help you understand better, I will add these grid lines for a minute or two. Now, just by using the mouse pad, move this cursor and randomly go anywhere. And if you click on this plus button or click on the mouse pad, your point will be added. Now you can add a second point, but if you want to make a straight line, these grids will be useful. Along with that, even if you turn off the grids, there’s no problem; as soon as you bring your cursor in a straight line with any point, you will feel your cursor snapping, and you will see a red line. Now, to add a point, you already know—just click on plus or click on the mouse pad. Now, I’ll just add some random points like this. Now, you can also change the color of the generated drawing from ‘Color & Fill’.
Wow, this looks like a Ben 10 watch! To go back there, click on ‘Edit Points’. Now your first point is selected. If you want to select the second point, there is a controller below; as you slowly slide it up, your points will keep getting selected. I mean, this side bar controls it, or you can simply click on the dot on the screen to select it. Now if you look here, there is a plus sign after the last point, which lets you add more points ahead. Like, I want to close this shape, but we won’t use that; we will press this button instead, which will connect the end point to the starting point. Since all these points are now connected to each other, if you slide the controller up, you will get stuck in an infinite loop. Now you might ask, what if a point needs to be added later or you want to expand it? Go to the point closest to where you want to add the new point. Now you will see the path between these two points; your point passes through this path. So, if you swipe a little, your new point will be added. For now, let’s delete this point from where we added it by hitting minus. Now, if you select any point and press this button, it will turn into a curve.
Along with this point, you also get two handles—or sticks, as I call them. Yes, they are called handles, but I’ll call them sticks. If you grab one stick and move it, the point will curve accordingly, and the same goes for the other stick, unless you mess with these two options. The bug inside me told me to fiddle with them, and as soon as I turned off the second option and moved the selected stick, it curved nicely, and the other stick moved with it too. But when I stretched it, only the selected one stretched because this second option strips away the stretching power of the other stick. Let me tell you something awesome: if you turn off the first option as well, the other stick loses all its power. No matter how much you move your selected stick, the other one won’t move at all, giving you a sharp line. Now, I’ll simply adjust it a bit to create a shape like this. Now, if you want to remove any line—just like we connected the end point to the start point earlier with a button—pressing that same button will make the line you are on disappear. See? But I want to delete this line instead of that one, so I’ll delete it. Now, the thing is, I’ll go to ‘Color & Fill’ and turn it off, then go to
‘Border & Shadow’ to give it a stroke. Then I’ll just add a ‘Drawing Progress’ effect, add some keyframing, and a deep glow to create a simple vector animation like this. If you are in this niche, this animation will be very useful. Now, another awesome thing in the vector drawing tool is keyframes. Before that, let me explain the layer system of the vector tool. Like, if I add two points, pull it up from the middle to curve it, and join the start and end points together. Then coming to its center, I’ll pull that down and curve it too. Now, I have added a bit of gradient to it. For example, if you click on the circle option and click on ‘Add Contour’, this becomes your new layer; ‘Add Contour’ means a new layer. Now, for example, I’ll recreate the same shape inside it. Now, I’ll click on the circle again; you can add as many contours—meaning layers—as you want. Clicking on the ‘Difference’ button will mask out what you drew, meaning that part gets deleted and the rest remains. Let’s delete this with the same button for now. Now, I created a new contour and made a shape like this. You can do this in a new vector drawing if you want; I just put it here as an example, but you should do it in a new layer. I just clicked this button to mask it as well, and after adjusting it slightly, I’ll add a circle shape. Again, I’ll add a circle, make it a bit larger, remove its color, and give it a stroke in ‘Border & Shadow’. Then, selecting the center circle, I’ll duplicate it, change its gradient color, and shrink it. Again, taking the vector drawing,
I’ll make a star-like shape, keeping its color white, duplicate it, and leave small stars around. Now you can see this forms an eye. The eye is complete now. Now, I’ll duplicate its white base and bring it to the very top. Now, I’ll select its bottom point and pull it all the way up to close it. Now, clicking on the keyframe button at the top, I’ll add a keyframe. Before adding a keyframe, make sure to check which point is selected because every point has its own keyframe. Now, moving forward a bit, I’ll close it, and moving forward again, I’ll reopen it. This creates a cool blinking animation, but it’s still incomplete. Before we look into that, know that there are double keyframes too; let’s switch to another project. Here, I’ve drawn a square using the vector drawing tool and connected it. I’ve added a bit of gradient. Now, to add double keyframes, select both keyframes on the screen using a lasso-like gesture, go to the keyframe section, and add a keyframe. You can see double keyframes here because two points are selected. Like this, I’ve added three keyframes, moving the first keyframe down and the third keyframe down as well. You can make great animations by applying keyframes; this was just an example.
Before adding a keyframe graph, ensure that both keyframes selected are the ones where you animated so that your graphs apply correctly. One more thing I didn’t tell you: if you select any point and curve it, you can remove one of its sticks from here, leaving it with just one stick to move freely. Now, let’s get back to the previous project and add a null layer. Leaving out the base and the closing eye base, parent all other layers one by one to the null layer. Don’t worry, the next mastery video is on the null layer itself. After parenting all layers to the null, come to the null layer, add a keyframe, and when the eye blinks, move forward a bit and slide it slightly to the side. There you go, I’ve just demonstrated how to create it; you can make incredibly advanced
animations with this, as this was just a simple example. If you think you’ll become a pro just by watching tutorials, you are absolutely wrong. You can gather all the knowledge about swimming from the internet, but you’ll only become a pro when you jump into the water. So, to practice, come over to Telegram where I’ve posted some assets you can recreate. The project file link is in the description. If you want more Alight Motion videos, check out this playlist, and if you want to learn thumbnail design, check out this video. I’ll see you in both videos!
