Transcripts
1. Introductory Video: These faceless pages
are blowing up because their content is
beautiful and insightful. But what if you learned how
to do exactly the same. The problem with motion graphic
design is that everyone keeps just making it so
unnecessarily difficult. GPT ascocret, revise the script, go to 11 labs, pay for 11 labs, by a voice that doesn't
sound like this. Then storyboard the entire edit, getting to illustrate or
recreate all of the assets, then import everything
in after effects, and then the actual
editing and animating of the motion graphics isn't even
considered that important. That's why in this
course, without spending more than two lessons on the introduction. We're
going to recreate three entire animation, and I'll show you how to recreate
the move from scratch. For assets, we'll use
Freepik and Canva, which are two websites
from where you can get assets for free and we'll
recreate these three videos. By rolling in this course, you'll also get all
of the projects and assets that I've
used in this course. We'll start with a small
introduction on the course. Then I'll go on a bit of an explanation on
why I've chosen exactly these three
videos that we're going to recreate and
why did it so good. After that, we'll get straight. We're going to recreate this animation in the third lesson, this animation in the
fourth and fifth lesson, and this animation on
the 67 and eight lesson. The animations will
get progressively arter and at the
end of the course, there is a specific bolus
lesson on how to do advanced keyframe animations
which look super smooth. I'll see in the first lesson.
2. After Effects introduction and Class Project: Welcome to this course. In
this lesson, I'll go over, I'll to install all the
creative cloud apps with less than one quarter
of the price that Adobe usually asks you to pay. I'll give you the class project. We'll quickly set up
after effects together, and we'll also go through all of the basic fundamentals which are required for this course. There are not going to be
many, don't worry about it, but I'll go over a bit of motion graphics theory
and what is required. The next lesson, we are going
to view three videos that went super viral on Instagram
using motion graphics. And from the third lesson, we'll start actually editing and recreating those projects. By the end of this course, you'll know exactly how to make super professional
looking motion graphics from the easiest ones
to the hardest ones. Let's go ahead and start by
downloading after effects. You just go ahead and search
on Google, Creative Cloud. Once you search it, you
have a bunch of options. Meanwhile, this is
the official side. You should always click
on 46 of A Apps plan. You click this, and
you're going to have, as you can see a lot of special offers that
you can use for Adobe. The ones we're going
to use is this one, which is going to
as you can see, save us 50% upfront from what we would
have normally to pay. So you're going to click here. Before doing that, if you want to know what you're
actually buying, you can just search for
Creative Cloud again, and you can just
click the first link, and then you can go
view plans and pricing. And here as you can see, you'll find all of the
plans that you have. If you're a student or teacher, you should absolutely
go for this one. If you're not, you can just use this one that I've
shown you right now. And once you have bought it, you can off the
price once again, and I'll show you
how to do that. I'll go ahead and sign in. As you can see, I'm now
signed in with my account, so I'll click on view account. And as you can see here, I have my billing
and my next payment. And what you're going to do
is you go on manage plan, and you can go ahead
and cancel your plan. And as you can see, it's
going to tell you this. You can click on continue because as you can
see it's step 14. And then it says, We're sorry to see you go.
What's the problem? You can go ahead and
click it's too expensive, click Continue, and then
you can click on No Tanks. And then as you can see, it's going to give you some offers. And here, for example,
I'm going to get two months free
and save 73 heros, so I'll go ahead and click that. As you can see, I've
just accepted the offer, and now I'll be charged
$0 for 60 days. Sometimes Adobe will
offer you a 50% discount. It depends on what they're
offering at the moment, but you can save a bunch
of money by doing this. Now you're going to click X, and now I have two free months
of Adobe Creative Cloud. Now, once you've
done this, you can go back to the Creative Cloud, as you can see this is what you have, and you can download it. Going to download
the Creative Cloud, and once it's downloaded, it's going to look like this. As you can see, this
is the Creative Cloud, and you'll have a bunch of apps right here
on the shortcuts. If you don't have them,
you can go on Apps and you can go ahead and search for premiere pro or photoshop. In this case, we
want after effects. So that's what you
should go ahead and click Install right here. You can't find it, you can
just search it right here. You search for Aftereffects, and you can just click Install. And once you have done that,
you will be on Aftereffects. Now, this is how
Aftereffects looks like. If it doesn't look like this, that means that it's because
you are on the own page. If you are on the own page, what you should do is go ahead
and click on new project. That is going to
open this interface. In this interface, before
even starting with anything, I want to tell you how to
optimize it so that you won't crush every 5 minutes
of using after effects. The first thing you know is
that you should go and edit, preferences, and the first thing you should click on is
media and this cache. If you've watched
my previous course, you can skip these steps because I've already
explained them there. If you didn't, you should create a folder for your dis cache. In my case, it's called
Aftereffects cache, and then once you have
created it and chosen it, you're going to go
ahead and increase this number as much as possible. Usually over one K it's
useless because you will not have more than one terabytes
of art disc space. I usually leave it around here. Once you've done this, you'll have to go right
here and click on MTDs cache quite often depending on your
artwor capabilities. This is going to
allow your after effects to run smoother
and not crash. Another super important thing to do is go on memory
and performance. This is going to
manage your RAM usage. Here you can see how much ram do you have on your hardware, and here you can see how
much is reserved for other applications which
are not after effects, and how much is reserved
for after effects. You will probably have
either 48, 16 or 32. You should lower this number as low as possible,
unless you have 32. If you have 32 gigabytes of ram, you can lift this a
bit higher so that your other apps can run better. But as a general rule, unless you have 32 or 64, you should give as much
space as possible to after effects because it's
going to consume a lot of ram. Now that we've gone over these, let's quickly talk about
the class project. Now, the class project
is going to be a nine by 16 aspect ratio video, and what I'm asking you
is to recreate one of the videos that we are
going to create together. We're going to
create three videos. I'll show them in
the next lesson, and we'll do the
easiest one first, and we'll slowly increase
the intensity of the course. You can go ahead and
replicate all of the Just make sure to send them in the class project section
so that I can review them. I'll repeat it once again. You just need to make one video. If you want to make all
three, it's an extra. I will review every
single video you send, so don't worry about it, and I'll show you how to make
these videos step by step. I encourage you to send one of the videos that we're
going to recreate because just consuming the course is not going to be
as effective as it could be if you're going to consume and act on the
content right away. Before starting, we'll need
two plugins installed. These are going to make the globe effects that we're going to use and some
animations way easier, and I suggest you to
download them right away. The first one is
animation composer that you can find at
this website right here. You can download it for windows right here or for
Mac right here. This is going to
give you a bunch of animation presets and a bunch of text presets and
all of the stuff. But the main thing
that we're going to use is the Anchor Point mover, which is this thing right here. We'll find it by going on window and then
Anchor Point mover. You have installed
animation composer t, and that's going to allow you to move anchor points way better. Don't worry if you don't know
what an anchor point is, I'll explain it
later in lessons. It just super important
for you to have an anchor point
mover right here. There are other plugins as well. I just use this one
for the Anchor Point. The other plug in is from Videoco pilot and it's called Saber. You
can just search for Saber plug in online and
you're going to find it. You can also see the
introduction video. It's pretty pretty cool. And this is going to
allow you to make the first motion graphic project that we're
going to create. And you can download
for Windows or Apple. It's super simple to use. Once you have installed
it, you're going to find it by looking for
Saber right here as you can see it's from
videoco pilot and you can just drag it on top of the
clips that we will use later. These are the only two
plugins that you will need. Let's go ahead and create
a new composition. Let's make sure that the
aspect ratio is nine by 16. Let's go for 180 by 1920. L et's make it 30 PS. And as you can see,
there is also a preset, which is social
media portrait HD. Perfect. And we're going to call this first motion
graphic project. I'll go here on the
Zoom and click on Fit. And now we have our full project displaying in the player panel. Now, what you should
do now is go ahead and get a bit familiar
with the interface. So here there is
the player panel, and here you have a
bunch of windows. Can go ahead and use mine. These are the main ones
that we will ever use. And to choose which
windows we have here, you can go in window and unselect the ones that
you have selected. So for example, paint,
we'll narrow use paint, you can just close
it, and then we have motional tracking which
we won't actually use. But then we have align
which is super useful, effects super useful,
character super useful. So just keep this in mind. So without further to do, let's go in the next
lesson where I'll show you the projects that
we're going to create, why they went viral. How to find unique
subjects to make viral motion graphic videos as well completely new by yourself. I'll see you in the next lesson.
3. Viral reels analysis: Let's go ahead and go
with the first freel. This is gotten over
100,000 views, and that's what we're going to recreate in the next lesson, which is when we're
going to start editing, and I'll show it first and
then we'll analyze it. Yesterday is history. Tomorrow, is a mystery. But today, it's a gift. That is why it is
called the press. As you can see,
it's pretty simple. In the first scene, we have
a feather, we have a scroll, and we have the text, and then it moves into
a question mark, which appears like this
with the text once again, and then we have the gift, and then gift unfolds, and then there is written
present that comes up, and then there is the CTA, which we're not
going to recreate. Why did this video do so good? It did super good because
it's a really famous quote. It's a famous quote from Kufa Panda, a really
famous movie. Yesterday is history. Tomorrow is a mystery, but today is a gift. That is why it is
called the present. So he did not invent a quote. The quote was already
known by a lot of people, but it's really, really deep, and it makes people reflect. Now, the two things
that he could have done here would have been take the udo from the actual
coupo panda scene or recreate itself, and he recreated himself
by doing a voiceover. You can choose
whatever you prefer. But as a general rule, you should get quotes
which are deep and make the person that
are listening reflect. Then you should pack
it up with editing, which is super self explanatory. By super self
explanatory, I mean, this is a scroll and there
is a feather 100 years ago. This we used to
write 400 years ago, and this represents the past. That's why yesterday is history. Now, if we go ahead
tomorrow is a mystery, there is a question mark because a question mark
represents a mystery. When it says, Today is a gift. As you can see, there is a gift. It's nothing too
hard to comprehend. Is just showing what
he's talking about. Editing is super simple, and there is just
subtitles and a bit of text here to depict that
it's called present. Here we have our second video that we're going to talk about. So let's go ahead and
quickly watch this. As you can see, it's a mouse button clicking
a specific box. And then as you can see
the letters unfold, they change color, and they become finding another
inspiring lesson. So what actually fails mean, and then they go back into their place and
the realy starts. The reason this vita did
so well is because it is talking about another
way to view failure, which is usually seen
as something negative, and as you can see, it's talking about hit being something
positive actually. I also explains it further in as you can see
caption right here. That's why this reel performed
well because it's giving a new perspective to something considered
usually negative. It's going to make people curious when they're
watching it. Here we have our last reel. This last reel performed once
again really really well, it's a comparison
between being young, an adult and being hold. And the real in itself, it's really really simple. So it starts like this with a young
person, as you can see. There is text here and some bars moving and changing colors,
so nothing complicated. Then we have young
here and it's going to change as the person
gets old or adult. And behind here, we have an object which is going
to appear which is, as you can see, in
this case, money, because the young person
does not have money. When it comes to the dult, it's going to be an hour glass because the adult
doesn't have time. And when it comes
to the old person, as you can see, it's
going to be a grave. The ardest part
about this video is not the squares or
anything moving here. It's mostly the animation
of the person right here, which are going to
do later in Papeto. This is going to be the most complicated motion graphic
that we're going to do. That's why we're
going to do it at the end. But do not worry. I'll show you how
to do it. I'll see the next lesson where we start
with the video like this. We're going to get
the assets on MVA, and we're going to
create this in after effects by using
the saber plugging. Make sure that you
have it installed because it's going to
be vital. I'll see you.
4. 1st Reel: Kung fu panda quote: We're now going to go ahead
and recreate this video. As you can see, I've tracked
it into the timeline, and what happens is there
is the text and the scroll and I'm not going
to go any further because we have analyzed
this in the last lesson. What we're going to do now
is start recreating this, and we'll actually start from
the actual motion graphics. We'll do the text later
because it's the easiest part. Before doing that, as you
can see here have the Video that have downloaded
from the actual page, and as you can see
it 720 by 28 pixels, which is a nine by
16 aspect ratio. You can either use that or the one that we are
using right now. Our settings right now, you can see them by right clicking here and going
on composition settings. As you can see they
are 1080 by 1920. What I'll do is I'll
reduce the duration of the composition to 10 seconds
so that as you can see, we will land right here. So what we now need to do is go ahead and first
get the assets. So we'll need a
scroll, a feather, a question mark, and
we'll also need a gift. These are the four
assets that we need. What I've done is I've
just gone into Canva, created a new design
and we are now going to use this to get the four
motion graphics that we need. The first one is a scroll. I'll go ahead and type scroll, and I'll also type outline because I want the
scroll to be empty. As you can see, we have
a scroll right here. Let's look for something more similar to
what we had before. We have this, which is similar. This is also pretty good. I will copy this actually
and go on free pick. Which is a super good
website, which is free, and I will click on icons and they should be
able to find something good. As you can see. I think this one looks really, really good. I'll download it.
Perfect. Then I'll look for the second graphic,
which is a feather. I'll actually look
for feather outline, and this looks
really, really good. I'll bring this in
and I will flip it horizontally so that It's going to be similar to the
one in our video, I'll make it a bit bigger, and then I will go
ahead and share, download transparent
background and download. The next graphic that we need is going to be a question mark. So the entire question
mark outline. And now that we have
our question mark, I'll once again go on download, transparent, and only
this page and download. The last graphic that
I need is a gift. So I'll go ahead and look
for present outline. What I want to look
for now is a gift, but I do not want
this middle line. Which probably wasn't used by the creators as well because I'll need to divide the part on the top from the
part on the bottom. Keep scrolling down until I
can find something divided. I'll actually end up choosing this one because
I've just thought about a good way to mask it and make it look
like it's separated, so it's going to be no problem. I'll go ahead and download
it once again, background. Free. We have finally
got our assets. A quick thing that I want to
mention before we start is that when whenever
I'll use a shortcut, you will be able to see
right here below if I'm clicking T or Control S, or whatever I'm doing, you
can see it down there. Just keep an eye
on that, if I do something and I
maybe don't see it. You can see it
down there. I have clicked something
and as you can see, something has happened
on the screen. Now, what I want to do
is go ahead and import our assets into our project and we can start editing that. Can see they're all
of different colors. It does not matter. Now, before proceeding
with the animation, we just need to do a quick
modification to the present. So I'll go ahead and all of the other layers by
removing this eye thing. Then I'll go on effects and preset and search for
an effect called tint so that I can quickly color it all in white so that I can
actually see the gift. What I want to do is
I want to zoom in by holding alt and
using the scroll wheel, and then click the layer, click on the Pentool, and then create a mask just like so. Make sure to shape so that
the mask is straight, and then just go
right here like so. And as you can see, we're going
to split the present off. Then I'll go ahead and duplicate the layer by clicking Control D, and then I'll go on the
mask and click on invert. So then now I have
two different parts of the same gift,
as you can see. This is going to allow us
to animate that later on. So now I'll re enable
all of the layers. And what I want to do is now go ahead and start
with the animation. So to start with the animation, we will need the saber effect, which you have previously
downloaded right here, and we will need all of these
layers to become masks. To do that, there are two ways. The first one is just mask manually everything
with a pen tool, and that's not what I suggest. It's going to be extremely
slow and painful. Or the second way is just
selecting all of the layers. And then go on layer and click
on Auto trace and click. This is going to
create, as you can see, all of the layers as masks. As you can see here, there
is a mask on the scroll. Same here on the question mark. It's all masked out.
Now, what I want to do now that I have
everything auto traced, is go ahead and create
a new solid layer. Doesn't matter the color, and I'll just leave it here. The reason is I will
now go ahead and take each masks singularly. So for example, this
one, I'll click on, and then I'll just copy all
of the masks with Control C, and then I'll place
them here with Control V. As you can see, we'll
have a red scroll. And now I can remove this one. The reason I will
transfer all of the masks to a new solid layer
is because sometimes the globe gets messed up if I just do it on
normal autotrace layer. So that's the reason I go
ahead and do it like so. Now I'll do the same with
the feather, I'll copy, create a new solid layer, and then paste it there. I'll do the same with
lp of the present, and then the other
Alpha of the present. And now, as you can see, I have everything on a red solid layer. Now, once again, the color doesn't matter, we'll
change it later. So what I'll do now is just
to organize myself better. I'll rename everything by
clicking on rename right here. And I'll do this for
each solid layer. Now that I've created
all of this stuff, I can simply remove
the original assets because I will not need them. What we need to do
now is go ahead and start timing our animations. Right here as you
can see is where the animation from
the scroll starts. I'll drag my scroll
exactly here. Then I'll go forward and look for when the feather
appears, which is here. So I'll get my feather, and I'll drag it exactly here, and then I'll move forward
until they both disappear, which is exactly here, as you can see, they disappear. So I'll go ahead and
drag this just like so, and this just like so as well. I'll make sure to be precise. Which means that here is where
the question mark starts. So I'll drag it below and
I'll drag it exactly here, and then I'll go
forward until here, which is where the questo mark
stops and the gift starts. So I'll go ahead and select both and track them until here. And then I'll make sure to see when does the opening start? It starts right here. So we'll make sure to mark where it starts by cutting this layer. And then, as you can see,
it is going to happen, and text layer is going
to appear from here. So I'll go ahead and create a text layer and
type in present, and I will just time it
from here to exactly here, which is where it's
going to stop moving, so I'll cut it by
clicking control shifty. Now I have everything timed up. I'll do this text
later by the way. Let's go ahead and start
with the animation. The first one is the scroll. Let's go ahead and
bring the scroll. The first thing that
we want to do is check how is this animated. This is just a simple
saber animation. I'll go ahead and drag it. I'll go on effect saber and drag it on top
of my scroll layer. I'll activate it actually. Here, I need to modify
a couple of settings. First, the globe
color must be white. Secondly, I need to go
on render settings, click on composite settings, and click on transparent so that there is not a black
box under the saber. Then what I need to do is
go on customized score, and here instead of Saber, I'll click layer masks. Now we have our scroll. Now, it's too bright,
there is too much glow, so I'll just go ahead and reduce this to
something like ten. As you can see it's
starting to take shape now. I'll reduce the spread
to something like 0.2, and then I'll reduce
the core size a bit. Something like this
should be good. Now what I need to do
is, as you can see, our reference is
moller, and flipped. So I'll go right here on
the scale parameter in the transform settings and
then I will click this button, and then I will
put a minus here. This is going to flip the image horizontally, as you can see. What I've just done is I have unlinked the
scale properties, and then I flip them by changing the first
value with a negative. I'll then link them again, and then I'll just
make them smaller, just like in reference. Now let's go ahead and animate
it just like in reference. So let's go ahead and play with our saber
effect once again. Let's go right here, and let's look for the end offset value. We're going to put
this down to zero, e a keyframe and then
go forward until the actual animation ends so that we can time
them properly. It looks like it's
ending exactly here. So I'll go ahead and put the ends offset
once again to 100. And as you can see what we have, if I slow our scroll layer,
this is what we have. As you can see, the scroll
is slowly creating. Now, we will fix the key frames later and we'll ease them later. For now, let's just do
the basic animation. Now it's time for the feaer. So let's look right
here at the feather. As you can see, it's
super big, super red. We need to change
a bunch of stuff. First, let's go on the scale properties once
again and let's reduce this until it's somewhat the size of the
feather in the video. Let's move its position. Let's make it smaller, taller, think a bit smaller. Something like this
should be good. Maybe a bit more. I
think we're good now. I'll actually make
it a bit bigger, 23. 25 maybe, like this. We'll bring it a pick down. Nice. Now, what we want to do is create a movement keyframe. So it's going to start from
here, position keyframe, and then I'll go
forward when it stops, which is exactly here, and I'll move it just like so. So as you can see if we now
sol our feather and scroll, our feather is
moving just like so. Now, what I also want to
do is create keyframes on opacity because if you look at our reference
video right here, the feather is lowly fading in From the start until here. What I'll do is I'll
eat a key fmnopasity here and a key fra
monopasity here on zero. Then now let's look at
our animation once again, we have the feather
appearing and moving, just like in the video
from the reference. Now, we only need to make this white because in the
reference video, there was no low as you can see. What I'll do is I'll simply not even use the saber
effect this time, but just use a simple tint
effect and just make it white. Now I'll once again
sold these layers. As you can see, this
is what we have, the scroll creating and
the feather moving there. Now it's time for
the question mark. As you can see it
animates just like so. I'll go ahead and enable it, I'll sold this layer, and then I'll go ahead
and go on the scroll, copy the saber effect by using control C
and paste it here, that as you can
see, we have all of our animation already done with the globe and all of that. Now, what we need to
change is as you can see, there are two lines
in our question mark. Meanwhile, in the
reference video, there is only one.
It's not doubled. If we want to recreate that, what we need to do is
go on the mask section, And as you can see,
there are four masks. So what we can do is remove the first mask and
remove the third mask. And as you can see, it's
going to be just like so. We need the internal
masks created, and we do not have the external
ones as we did before. So I'll keep it
like this, and now we have our animation,
which is perfect. We need to create another
animation, though, because as you can see,
this question mark starts big and becomes small. So it starts from here, and then it has a key frame
on the scale property. Right here when it stops. So I'll put another
key frame right here, and I will also modify
the saber key frame, so I'll search for
it there we go, and I'll make sure that it
ends here with the scale. Perfect. So now I'll disable
this and enable ours, and I'll go on the
scale property, which is exactly here. And I will make sure that
at the end it's way molar. So let's go with
something like 60. And now as you can see, we
have our animation once again. Perfect. Now, let's go ahead and look at the next animation. This one is with the gift. So for the gift, I will need
to apply the same movement to the top and the
bottom of our gift. As you can see, they move
at the same exact speed. And I can do this
in multiple ways. I can create a transform effect. The transform effect
basically will encapsulate all of your movement and then you can copy
and paste the effect. Or the best way is to
create a new null object. I'll put it right
here, and I will now enable all of my layers
the ones I need, and I will link them with
this pi wip icon to the u. Now, if I do
anything to the ule, as you can see, the whole gift
is going to move together. It's a super simple thing, which allows you to
control the movement of multiple objects
at the same time without having to copy
paste the effect. Every single time
you make a change. So I Ali suggested to do this. I will call the
new gift animator so that I know that it's
animating the gift, and I will reduce
it until it's of a similar size as the one
I saw in my reference. Perfect. And now what
I'll do is I will go at the end of the
animation, which is here, e a keyframe on P for position and put it exactly
where it is right here. I will actually scale
it down a bit more, and I will P for position,
move it up down. Perfect. Then I will go at the start right here
and check where it is. So it's exactly
here at the moment. So I'll put it here. Perfect. Now as you can see, we will have our movement just
as in the reference video. Now, what we want to do is recreate that Saber
effect once again. So I'll go right here
on the question mark. I will copy the Saber effect and paste it exactly
here and also here. As you can see now,
our animation is going to happen at the same
time as the reference. What I want to do is make
sure that our keyframe here ends at the same time as our position
keyframe right here. To do that, I'll click on U, which is going to show all of the keyframes on this layer. As you can see here, I
have my caber keyframe and I'll drag it exactly here. I'll do the same on
the bottom present and I will drag the
keyframe exactly here. They should end exactly here and they are a bit
of set actually, so I'll move them once again. Now they're ending at
the exact same time as the position keyframe,
which is perfect. As you can see, I'll
now have this pen. Now, there is a
small problem here because this layer does
not have the saber effect. So what I'll do is I'll just
remove this and expand this, and now everything
should be good. The animation is happening,
which is perfect. What I want to happen now is I want the top
present to open. As you see right here, if I enable our reference layer, from exactly here, the top
present is going to open. So to recreate that animation, I'll go exactly where
the animation starts, and I'll click some keyframes on rotation, position,
and capacity. These are all of the
keyframes that I'll need. So from here, as you can see the animation and exactly here. So I'll eat once
again keyframes, and I will also enable my top present layer so that
I can copy the movement. So as you can see, have this
animation to replicate. Let's first replicate the fade because it's the easiest
part to replicate. From here, as you can
see, it starts fading. I'll eat a keyframe on
opacity and then I'll go this one at the end
and make it on zero. So that now if I re
enable my layer, as you can see, they're going to disappear at the same time. I'll replay this once again,
they're disappearing. They're lacking the movement,
but they're disappearing. Now to recreate that movement, we don't actually need
position keyframes, but we need to set
up our anchor point. So I'll quickly explain how
does an anchor point work. As you can see right here, my anchor point is
set right here. This is my anchor point. And if I now go ahead
and rotate my gift, it's going to rotate
around this anchor point. That's going to stand
still every time I rotate. And what we want to do to
replicate that movement is actually move the anchor point on the bottom right right here. This is going to allow
us to as you can see rotate and recreate
the animation effect, which was used by
the reference video. So what I'll do now is I'll enable my bottom As you can see. Now, the problem with changing
the anchor point is that it's going to slightly
change the position as well. So what we need
to do is go ahead and change the position
and realign everything. So I'll zoom in to make sure
that everything is aligned. You can use control to move the handles slightly
and have more control. Now it's perfectly
aligned once again. And if I check the
animation from the start, everything should
be good once again. And now I can finally
do the rotation. So I'll do it just like so. It will end up at
something like this. And then I'll simply move the key frame where it actually should be,
which is at the end. Now, I'll toggle
the original layer, and let's compare
the two animations. So as you can see, we
have our gift moving, and then it opens as
in the reference. So if I go ahead and show
what we have until now, this is what we're going to see. There is the scroll,
the feather, and then there is
the question mark, same as reference, and the gift, and then the gift
opens, as you can see. What we need to do now is go ahead and create the present. The present is going
to look just like so. I'll have to, as you can see, make it appears lowly. I'll go ahead and go on
the transform properties, click a keyframe on opacity, put it down to zero, and then move forward
until around here, which is to 100. Then I will also have to move the position from here to here. Now, I'll toggle my layer and make sure that I'm
doing something good. I'll disable my original one
and just look at mine now. I want to make sure
that my present is somewhere around here in
position at the start, so I'll drag it here, and then it's somewhere around here, maybe a bit lower once it ends. I'll also go on properties
and customize my text a bit. Let's try with Alphatica now
and also make this all cups, and now I think
we're looking good. I want to space it a bit more. I look for the spacing right here and space
this a bit more. Now this is the
animation that we have, as you can see, we have
the scroll, question mark, and our gift with the present
coming up from there, which is absolutely perfect. Now we only need to
make a couple of modifications to make sure that this project is completed. The first one is going to
be adding the text on top. And the second one
is going to be finalizing the animations
and making them smooth. Now, I'll go ahead
and type here, but before doing that,
I want to remove the old cups and
remove the spacing. And then I'll type yesterday, his history and then I will zoom in and actually
make this bigger. I will center the anchor point. Now what I want to
do is I want to make sure that it's
at the same height. I will reduce its size to
something like 30 at a coma, and then I'll go on
the Align function and click on Align to make sure that it's centered horizontally. You can also put it in
center of the screen, but it's going to go
over our animations, which I don't like. So
I'll just keep it there. After yesterday's
history, I'll cut it exactly here
with control shift. I will type tomorrow
is a mystery, but today is a gift
at another coma, and then I'll check
when does that end, which is exactly here. I'll actually check
frame by frame here. I'll cut it, remove this one so that I can actually see
what I'm doing and type. That's why it's called
present, full stop. Now if I look at what I have
is yesterday's history, tomorrow is a mystery, but today is a gift, That's why it's called present. As you can see now,
we have finally, our video almost finished. We just need to
ease the keyframes, but as you can see, it's looking pretty pretty good
at the moment. What I'll do now is I will
go on the scroll and I will make sure that the
keyframes are eased. So I'll go and click you so that I can see all
of the keyframes, and as you can see here, we
have our saber keyframes. I'll highlight them both
and click on F nine. Which is also the equivalent of right clicking on them and clicking on Keyframe Assistant
and clicking Easy Es. This allows us to have
smoother keyframe animation, as you can see, which
goes low at the start, fast in the middle and low
at the end once again. I will do the same
with my feather. I will click you to
see the keyframes, go on the position, and pacity keyframes
and click on F nine. As you can see now, the movement is going to be way smoother. I'll do the same on
the question mark once again, highlight F nine. And now as you can
see it's smoother. I'll go on the top present. I will go on all of the keyframes that I
have and click F nine, and I'll do the same with
the bottom present by clicking F nine once
again and ds easing them, and I'll do the same on
the ul by clicking F nine. And I'll also do the
same on the present. Is super important because it's going to make
everything smoother. I'll go ahead and let you
listen to this with the audio. Yesterday is history. Morrow, is a mystery. But today it's a gift. That is why it is
called the present. So I want to congratulate
with you because you have just recreated a viral video, which has gotten
over 230 k views at the time of recording. And I know that this style
is not easy to make, and it can be a
bit overwhelming. But that's because it's the highest quality work you can do as a video editor
or as a theme page. This is motion graphic design. This is supposed to be one of the most advanced
topics of all time. And in fact, the owner of that page which we have just
recreated the video for, which has over 1
million followers. Sells a course on how to
animate like him for over $150, we have just recreated a superral video in
something like 30 minutes. The best part is that this is just the first project
that we're going to make, and we're going to go over more complex and even
better projects in the next two lessons
that are going to make you improve massively
in motion graphic design. I truly think you should
stick around and I can't wait to see your beautiful work in the class projects as well. So I'll see you in
the next lesson, we're going to go over
the second animation, the failure one. A.
5. 2nd Reel: recreating assets in AE: Time to create the second
Motion graphic project. Let's go ahead and create a
new composition once again. I'll go with the same preset, social media port trade
30 FPS, 180 by 1920. This time, I'll
make the iteration 15 because I might
need a bit more space, and I'll call this second
motion graphic project. I'll now go ahead and click, and as you can see, it's
going to create the comp. I'll go ahead and
import my real, which are going to recreate. You can see is what
the real looks like. There is the reveal and everything that happens,
as you can see. To deconstruct this
property, first, It's 5 seconds long. What I'll do is I'll
actually reduce the composition
settings to zero, 05. There we go. Now we'll need the fail, so these are rounded squares. We'll need a rounded rectangle, and we will need
some water marks. I'm going to divide this
project into two lessons. In the first one,
we are going to recreate all of the assets, and in the second one, we're
going to animate everything. So let's go ahead and start by creating the reveal square. What you do is you go here on
the square rectangle tool. If you don't have
this, you can hold your left click and choose
the one that you want. You can choose this
one or this one. It doesn't matter.
And we're going to zoom in by using old and Zoom, and we're going to recreate
something like this. Perfect. Once you
have done this, you want to go right here in
the rectangle section and then click on rectangle path
and choose the roundness. Now, I'll go with something like this because I
think it's appropriate. And then I'll go ahead
and change the feel. To change the feel,
I want it to be a steel color, so just a green. I'll go up here where
there's frit and feel And instead of
clicking on the Color, I'll click on the actual feel, and I will choose linear color. Once I've done this, I'll
go on the field color, and I'll choose a
green of my choice. Let's go with
something like this. Then I will click on the stroke, not on the color on the stroke, and click on the stroke. As you can see, we now
have our rectangle, which is exactly where
the other one was. And actually, what I can do is put it like so,
click on the color, and then just click on
this Pi quip and click on the green right
here so that I copy the exact green that
was used by this guy. Once I've done this,
I have created this. So let's go ahead and
create the fail letters. Now, for the fail letters,
we'll need to once again, use the rectangle
tool and create it just like so. I will click V for the selection tool. You can also click criteria, and then we can go ahead and shape this as we want,
something like this. Then I'll go rectangle
rectangle path and round it as much as I like. Something like this
should be good. Perfect. Now I'll
go on the color, feel, use this little thing
and choose the red one. I can also choose any
red on my choice, but I'll just choose this one because I think it's better. I'll click on k. Then
what I will do is I will actually go ahead
and start renaming this. This is what I'll call F, and this is what
I'll call reveal. For duplicating and
aligning everything, you want to make sure to click the anchor point at the
center of the image. The reason for that is because
it's going to be super helpful once we will
start animating later. Otherwise, everything would get messed up with the movement. Just keep in mind,
choose the anchor point. Now, what we want to do is go
ahead and click Control D, so that we duplicate this layer, and then we can go
into position settings and move it just like so. Then we can rename this
by clicking Enter, and then I'll duplicate
we Control D, rename this to I, and then click P four position
and move it right here. I'll do this once
again, Control D, enter L, and then click on P four position and
move it just like so. Now, as you can see,
we have reveal and then we have veil
written right here. Now what we want to do is go
ahead and create the text. We go on text right here and
we start by creating the F. I'll go ahead and click F. I'll make sure that the anchor point is
set up properly, and I'll drag it around here. It doesn't matter if
it's perfect or not. What I want to do is just choose a font which isn't too thick. I like this one. A bit bigger. Let's see if it's centered. It should be good now. Perfect. What I will do now is I click this layer, and
then by holding control, I'll also click this one. I'll go on align, and there should be written
selection here, and I'll align both
vertically and horizontally, just to make sure that
it's in the middle. Then I'll eat control
D, and this time, I'll modify these and call it A. Actually, let's make
sure it's capital. And then I'll go on P for
position and move it around here. Now it's not
quite centered. I'll go ahead and click on A and this A by holding control. Align, align. Then once again, I'll
control D, call this I, and once I've called this I, I will move it with the P
four position. Move it here. I actually forgot to modify
the text. I'll call it I. Now as you can see, it's
not really centered, I'll try and do my best myself, and then I'll go ahead and eat this and then
this with control, and then align just like so. Then I'll go ahead
and duplicate this. Call this L, and then I will e p for position
and just move it. I haven't actually called it capital L. There we
go. Now it's good. And I'll just make sure
that it's like this. And now I will click it, click the L right here, and align it to selection. And now we should be good. We have our fail text. Perfect. What I will do is
I will create another text. I will need the text tool again, and I will do like so
and call it trivial. I will need to make this smaller so that
everything can fit. I will now eat P four
position and move it lower. I'll eat anchor point
just to be precise. Now what I'll do is
I'll highlight this and this at the same time,
align everything together. Perfect. Actually,
since I want this to be centered to the middle of
the actual composition, I'll select composition here. So that it's perfectly
in the center. Now that's perfect. Now what we want to create is,
as you can see, as we move forward,
everything moves, and there is the
text that appears, which is finding another
inspiring lesson. To do that, I'll go ahead
and create it here, and I will call it ending. I will move it down
to around here. I'll go on properties, and I will increase
the size just like so. I will also make sure to
click and drag this like so so that all the text
fits in the textbox. Then I'll go back to
my selection tool and just move this around. I think something like
this looking pretty good. I wanted to make
a closer though. So what I'll do now is I
will duplicate this text, that will call it another, and I will click on P for
position and move it down. I will make sure that
it's big enough. I will also finish typing
because I forgot two letters, and then I'll go
ahead and disable the original one
to just make sure that it's like so perfect, and now I'll go ahead
and create inspiring. So Control D once again and this time, I'll
type inspiring. I will actually make sure to cut the first letter and I'll
track it down just like so. Also realize that I have to remove the first
letter here as well. So this should be good now, and I'll actually reposition
this so that it's better. Now I need to create
a lesson here, so I'll type simply
lesson. There we go. Of course, we don't need the
first letter of the word because it's going to
be in the fail letter. Once you have done this, if
we disable the original one, as you can see we have finding
another inspiring lesson. To align all of these texts, what I'll do is I will go
and go on the align section, selection, and I will click on align left so that
as you can see, they're all perfectly
aligned on the left side. Once I've done this, I'm
almost ready to animate. What I need is to add some glow, as you can see to the squares. I'll do that, and then I'll also need to customize the text. But first, let's go
ahead and add some glow. To the glow effect, we're
now going to add an effect, which is called
ahem Bler to that, I will first duplicate layer
by clicking Control D, and then I will precompose
it just like so, and I will add ahem bl. And now as you can see, I can
create this kind of effect, which is basically a glow. I can choose how much
I want to space, how much I want it to be
clos and all of that stuff. I can also duplicate
this with Control D to create a more announced
effect if I want to. I will also go ahead and take
all of these three squares, click Control C, and then
copy them in the comp. This is going to allow
to, as you can see, create all of this glow. I'll remove this text so
you can see it better. As you can see, we
now have the globe. And not only that, I can also go ahead and click on reveal, which is the square
below the reveal. Click Control C, go into the compounds again
and click Control V, and now I'll have a glow
right there as well. Perfect. If I look at the
original thing that we had, we now are only lacking the
mouse icon and also the logo. What I'll do is I'll
show you how to add a watermark and how
to add Moe icon. Now, what we want to
do now is go ahead and look for a mouse icon, and to do that, I'll
simply search for a mouse icon on freepi Here, I can find tons of them. I'll go ahead and look on icons, and I think this one is
looking pretty good. I'll just strike it in, and
let's see how this looks. Let's go ahead and choose a
tint to make this look white. Perfect. I also think
I want to fill it in. So to fill it in, I'll simply go right here
on the pent too, and by doing that,
as you can see, I can create new solids. And what I'll do is I'll simply just create a rough solid, which is going to be the
feel of my mouse icon. As you can see, I'll just
keep dragging points, and now it should be good. I'll now simply just
change the feel to white, and as you can see,
it's now full. I'll also go ahead and nilate them both and precompose them. So then now I have my cursor. So what I'll do now
is I'll scale it down because that's what
was done in the video. I'll position it
somewhere around here. I'll actually scale
it down a bit more. There we go, position
it a bit higher, and I'll animate it later. What we need to know
is that it's going to go over our box. What we need to do
is customize it so that you can distinguish
it from the box. To do that, we'll
use a drop shadow. As you can see, it
can greatly increase the visibility when
it comes to the box. As you can see, there
is this black thing, which is basically a shadow, and it's super useful. You can also increase
the opacity, and it's going to be
something like this. I'll rename this
mas icon actually. Now I should be good. Actually, I want
it a bit smaller. Okay. Now, the only
thing that I am missing then is just to
customize this text, especially the one in fail. To do that, I will go
ahead and use some of my favorite text effects. And one of them is actually
a simple drop shadow. I want it to be really
subtle, something like this, which as you can see
allows you to see the text way better because it
pops thanks to it, but it's not too evident. And then I'll also look for this effect called Bevel Alpha. This is going to create
this kind of three D edge, if you can call it like that. Super good. Once I've done that, I'll look for D L right here. Click on the drop shadow, and while holding control, I'll click on Bavel Control C, and then I will highlight
all of the text which is here and Control V.
As you can see right here, the watermarks used
by this guy are two, one here and one here. Let's go ahead and say that we want to use the Vos and logo. I've taken this one
from the Internet, pretty simple logo.
From a tem page. So what I'll do is I'll
actually just mask this roughly around the edges. And now what I'll
do is I will tug it below everything
just like so. Then I will position
it upwards so that it's going to be
directly behind the text. And then I will reduce
its opacity by a lot. Let's try 50. I would do even less, something like 20, and
then I can duplicate it. And this time, I can
make it 80 opacity, but I'll make it way smaller
by using the scale function, and I will move it
below just like so. So that as you can see, you
can have a double watermark. One here and one here, just like in the original video where there is
watermark watermark. You can just do watermark
watermark. It's pretty simple. That's how it works.
I'll see you in the next lesson where we
will animate everything.
6. 2nd Reel: Animating and final touches: So here's basically where
we left off last lesson. What we'll do right now is go ahead and animate everything. Something that I've quickly
done is removing all of the watermarks because they
are not my watermarks, and I just don't want
to use them. That's it. So what I'll do now is we'll go ahead and recreate this
animation right here. And to do that, the
first thing that we'll need to do
to recreate all of the animations is
go ahead and merge the letter F with
is related box. So I would click on the F, click on the Other F
by holding control, and then precompose them. Then I will also rename this two F. As you can see
now, I have my F, and whenever I move it by
using the position value, everything is going to move. Both the F and the square, this is going to make the
whole animating way easier. I'll go ahead and do
the same for the A. And as you can see now, we have our fail, and if I go ahead and
click on the position, as you can see,
move them together. We are not moving the
globe, but it's fine. We'll fix that later. So what we want to do now
is go ahead and click on the original animation and click on Solo so that we can actually take it as a reference, and we'll see when
they start moving, which is exactly here. Will go click on the L, click on the F by holding shift, click on P, and select a
keyframe on the position. Once I've done that, I'll go forward when the
animation stops, which is exactly here, and I'll click another
keyframe on position, so then now I have
everything set up. What I can do now is
I can remove the slo. And start to move my squares. The first thing that I'll
do is I'll move the F, and I'll make sure that
they match perfect. And then I'll do the same with
the A. I'll move the A up, and I'll move the A
just like so perfect. And then I'll do the same on
the I by going like this. And then I will
do it lastly with the L, move it sideways. As you can see, we
now have finding another inspiring lesson
on our animation as well. So if I go ahead
and replay this, you're going to see that this is what happens. As you can see. The fil is moving just like so. Like in the reference video. Once again, we'll ease
everything later on, Let's not worry about that yet. Now, what we want to do is we want the fail to change color, because as you can see, in
the original animation, it changes color
and becomes screen. So what I'll do is I'll
actually go ahead and click. Let's start with the L. I'll double click on it and it's
going to open the pre com. As you can see, there
is my letter and my box that I can stretch
and do whatever I want. What I want to do
specifically is go on the L. Click
the dropdown menu, go on contents,
rectangle, and feel. I will click a keyframe on
the color, as you can see. And then I will go forward
until exactly here. And I will go back
in my pre comp, and I will change
the color to green. I'll go with a green,
something like this. Now, to get the specific
green that I want, what I'll do is I will
actually remove the solo, go right here on the reveal, the textbox, which is reveal. And what I'll look for is, I'll go on the properties,
contents, rectangle, feel. I will click on the color, and I will copy
this color code by clicking Control C.
And once I click Okay, I can go back in my pre
comp and copy paste here. With control VD at color. Perfect. Now what I'll
do is I will go in the contents and rectangle
and feel of the I once again. I will actually make sure to go at the start of the animation, and I will go back in the I, it a keyframe and color, go at the end, and
then once again, make sure that I'm
using the right color, control C, and paste right here and it's going to automatically create a keyframe. I'll do that once
again, I'll go in the A, contents, rectangle feel. I will eat a keyframe, and then I'll
actually go backwards and another key frame
because I forgot, and then I'll go forward and
change the color once again. And I'll do it lastly for the
F. So I'll go right here, contents, rectangle, feel,
and I'll eat a keyframe. And then I will go
forward exactly here, and I will create another
keyframe with the right color. So now, if we disable this and we only
look at our animation, we're going to find that our fil is changing
color just like so. Which is perfect.
Now, as you can see, our main problem is
that the globe is not following our animation and
it's not changing color. We can fix this with a
really simple, simple trick, and we'll go at the
start of the animation, we'll click on the L,
and while holding shift, we'll click on the F, and we'll eat Control
C. By doing this, we have just copied all
of these compositions, and then we can just go in the composition which
we used for the globe. If you remember, we
have copied all of our original boxes inside here, and then we have used some Gauchm blur to create the globe. As you can see, and what we
are going to do now is going Paste all of our
fail, as you can see, and we'll remove the
original fail that we had. Now as you can see,
the globe is going to simply follow our animation. The reason for that
is because we have just copypasted the
whole textboxes, and we have also copy
pasted the whole keyframes. As you can see, it's going directly in place
and changing color. We have just completed
our fail animation. Now we are basically down with this animation
from the fail. What we need to do
is animate the text. So to animate the
text, as you can see, the effect used
by the creator of this video is a
typewriter effect, and sometimes the
words become green. Now, let's go ahead and start by creating the normal
typewriter effect, and then I'll show you how
to make the letter screen. So what I'll do is I will go ahead the start of the finding, which is exactly here. And I'll drag a typewriter
effect right here. It's in the effects
and precept panel. Once you've done that,
you can scroll down and look for the
animator range selector, and these two
keyframes are going to control how fast the
typewriter effect is. So if I now go ahead and
untoggle this and only toggle my layer and
show you my keyframes, as you can see now,
it's going to be a pretty fast typewriter effect. I drag it criteria, it's going to be super slow, and if I drag it super close, it's going to be, of
course, super fast. Now, the way I'll use this is I'll simply just sold layer, and then I'll check
where it ends, which is exactly here, and I'll drag the keyframe. Once I've done that, I'll check where does the
second effect start, which is exactly here.
I'll drag in either typewriter effect. By
clicking on your layer, you can instantly
access the keyframes. And then you can see that it ends exactly here.
I'll drag it here. And then I'll go
for the inspiring, which starts exactly here. I'll drag the
typewriter, click you, and then I'll check
where it ends, which is exactly here. I'll drag it just like so. And then I'll go
ahead and look where does the lesson
start, which is here. I'll drag a
typewriter, click you, and I will go where it ends, which is here, and
I'll drag my effect. So that now, if we go ahead
and just show our animation, this is what we have
as of right now. Fail, finding another inspiring
lesson. That's perfect. Now, quick thing that
I want to do before moving forward is select
all of this layer, click on P for position, and move it a p to the right because I
think they're too close. Just wanted to do this
as an extra thing. Now, let's go ahead and create the green effect to
finish this effect off. As you can see, there
is this green effect. Let's go ahead and
create this first with the ending part,
the first text. I'll do is I'll click Control
D to duplicate this text. As you can see if I click U for the keyframes here
and on the one below, as you can see, they're
exactly identical because they are the
exact same text. What we want to do
is color this green. Before doing that, I'll
actually hide this so that we can actually
see our animation, and now we're going
to have the ending. What I'll do now is
I will need to color the text which is above green. To do that, I'll quickly
enable the reference text. I will get this
small color picker and click it right here. If I now enable this,
as you can see, we have our nding, which is colored
of the same green, which is what we wanted. What you want to do now
is go ahead and make sure that as a new
letter appears, the old one disappears. To do that, you can simply
pre comp this layer, and we're going to
play with masks. Let's go ahead and locate the point where the
second letter starts, which is here, and we're going
to go ahead and mask this. You can either go
for a rectangle mask and draw it like
this, or if you want, you can go ahead and draw
a pen mask just like this. I suggest to use the
rectangle because that's going to have
straight lines, as you can see, a divider. Now, what we want to do is go ahead and create a huge mask, something really really
long, something like this. I'll do it around the i, and then I'll go
right here and click on inverted, as you can see. What we want to do
now is go ahead and make sure that at the start, the I is not selected. As you can see here at
piers, but it's wide. And we do not want that. What I'll do is I'll go mask, mask path and click
on a key frame. And then by clicking
on the selection tool, I'll simply move the
mask, as you can see. What I'll do now is
I'll go frame by frame until a new letter appears,
which is exactly here. Once this happens, I'll
go back one frame, eat a keyframe on the mask path, and then go forward and move the mask. I'll
do this once again. I'll go frame, frame, as you can see here,
another letter appears, frame backwards, key frame, and then frame forward and move the mask.
I'll do it once again. Frame forward, forward,
another letter appeared, so backwards, key frame, forward, and then
mask. I'll keep going. Another frame, I'll go back, frame, go forward, and mask. I'll do it once again,
key frame, forward, mask. And then I'll go
two frames forward, key frame, forward, mask. The reason we needed a
long mask is because we needed to include a bunch
of letters, as you can see. Now this is the
effect that we have. As you can see, the
typewriter effect moves super fast as the
new letter appears. If you want us lower typewriter, which is green, we can
do it on the next text. We'll go ahead and
do that. I'll go ahead and click Control
D to duplicate. I'll click U to see the
keyframes here and here. It starts exactly here, and then I will go
on this another. I'll click on the feel and I'll copy the
color from there. And as you can see, we
now have our green text. Now I'll go ahead and
precompose once again. I will go forward. Until the first letter
appears, which is here. Go ahead and create
a rectangle mask, which is really, really
long, just like so. Let's go ahead and
invert the mask, we're going to see
that there are now two letters which are green, I'll go ahead and
need a keyframe. I'll move forward and actually it's here when
the next letter appears. What I'll do is I'll
simply move this, and then I'll go
forward forward. As you can see here,
the H appears. I'll go one frame
backwards, key frame, one frame forward, and remove the from the green and make
sure that the O is white. I'll go forward forward. As you can see the E appears. So I'll go back one
frame, key frame, forward, and the T now
is going to disappear. And then I want to
zoom in to make sure that I'm precise, perfect. Then I'll go one, two frame
forward, one frame backward, key frame, one frame forwards, and move this just like so. Then I'll go one frame forward, key frame, one frame forward, and remove the E, one frame forward, key
frame, one frame forward. Now we have this
effect, which is a bit slower, as you can see. Compared to the top
one because it has two letters which are green
at the same time every time. Now let's go ahead and
do it for the inspiring. This time, I'll do
it so that there are three letters that are always
green at the same time. So I'll duplicate this, copy the color from
the green here, and then I will pre
compete just like so. And then we go here where there is three letters
at the same time. I will you also on the bottom layers so that I can see what's
actually happening. And then I'll go right here, create the rectangle as usual, and I'll go ahead and
make it just like so, and I'll invert it as usual. And then I'll go
forward forward. As you can see, here, the I appears, so I'll
go one frame backwards, and I'll quick on key
frame, one frame forward, and I will just move
the mask just like so. And I'll go forward. As you can see,
here, the R appears, I'll go one frame backwards, keyframe, one frame
forward and move the mask. And then here the i appears. So one frame
backwards, keyframe, one frame forward,
and the PDs appear. And then I'll go one
frame forward keyframe, another one and
just remove the i. And I'll do the same
thing again here. As you can see, this
is what we have. Here, we have a one
letter typewriter, here we have a two
letter typewriter, and here we have a three
letter typewriter, as you can see. I think this a
really cool effect. Now I'll do it for
the lesson as well, but I won't show you because
it's always the same thing. As you can see, we
have finally did this. If we look at this
from the start, we are going to see that we are doing really good
with this animation. We have the fail which moves and we have finding
another inspiring lesson. Now we only need to animate the mouse icon and the reveal. Button, which is the
last thing that we need. So let's go ahead and
look for the reveal, which is here and here. I'll drag them together. And let's go ahead
and look at what is the effect created by the video. So as you can see
the reveal shrinks and becomes big once again
as the mouse clicks, and then it becomes great. So it's going to
be super simple. Let's go ahead and tie
it with the click. So it's exactly here where
the scaling happens. So what I'll do is I'll
go ahead and create a new null object and
I'll drag it below. So that I can control both of these things just by using the P quip and
dragging it here, and I'll call this
reveal animator. So once I've done
that, I'll go on the transform and
scaling options, and I'll go forward until here, and then I'll reduce this to, let's say 90, and then
it becomes big once again to 100% until here. So let's go ahead and
give this a look, and let's see how
this looks like. Becomes small and big once
again, as you can see. I might actually want
to make this like 90 T. Let's go ahead
and look at this again. A bit bigger. Let's go in 95. Let's go ahead and play
these. I really like that. Perfect. Now that
I've done that, I'll go ahead and reenable
my original animation, and then it starts to
fade exactly here. From here, the color
starts to become gray. I'll go right here and
as we have done before, I'll go here,
contents, rectangle, Feel color, and then I'll go forward and just
wait until it ends, which is here, and then just change the
color to this one. And now, if I go ahead and look at my animation right here, we're going to see that
this is what happens. It gets clicked and
then becomes created. Perfect. Now, there's still a
couple of things to change. The first one is
that we want to move everything of this
up above the globe. Otherwise, as you can see, you
can't tally read the text. And now you can way better. I'll zoom in to show this is
before and this is after. You can read it way better because the globe
was on top of it. Now what we want to do
is also go at the start, Control C is reveal, and then I will actually
rename this to glow. Otherwise, I'm just
getting confused. I'll go into the globe comp
and I'll paste it here. I'll move it down.
I'll remove this. And as you can see now the
globe is going to follow our color change and it's going to disappear, which is perfect. So now the last thing that
we need is the mouse icon. So first thing they'll
do is I'll go ahead and scale it down because
it's a bit too big. And then I'll check
the movement, which is done by this guy. So let's go ahead
and as you can see it starts I'll click on R and I'll rotate it
like he it and I'll also put it in the same
position as he did, which is exactly
here, just like so. Then I'll start when
it starts to move, which is at the start of the video. I'll
click on position. Then I'll move forward
until exactly here, and I'll just move it by end. Perfect. I want to
rotate it a bit more. There we go. So now as you can
see, we have our movement. And then here it
starts to click. When you click, it
becomes smaller. So keyframe on scale. I'll go forward and
click a keyframe at, let's say eight, and then
one, two, three, four, five, it becomes
bigger once again. So if I now look at my
animation only, as you can see, this is what happens,
the click is super good, and we are basically done. Let's go ahead and give
this a look once again. I'll put it to 50%. Let's
go ahead and play this. As you can see, there
is the mouse icon, the reveal, the fail, finding another
inspiring lesson. Perfect. So now, the last
thing that we need to do is to ease the key frames and
make the animation smoother. That's the only
thing we're missing. To do that, we're going to
start with the fail movement. The fad movement,
as you can see, becomes orange and
almost green right away, and we want to avoid this. We want this to be slower. To do that, I'll go ahead and
go in the F, for example, I'll click F nine to Easy es, and then I'll click
here to see the graph. I'll make sure to
change this so that most of the stuff
pens towards the end. As you can see, this is how
much the color is changing, and here is changing a lot. And instead at the start, it's not changing much. Let's go ahead and
make this just like so where the
peak is around 730. As you can see now,
the fil is going to move color way towards the end. I'll go ahead and do
the same with the A. I'll highlight both F nine, I'll go on the graph, and I'll just move this to
around 70, like we did before. I'll do the same on the
I once again, F nine, and then I'll just move
the graph to around 70, and I'll do the same
right here on the L, F nine, and just move
the graph once again. If you cannot find
my specific graph, it's because you are
on the value graph, which is this one. Just make sure to go
on the speed graph so that you can modify the
handles like adjusted. Now as you can see
the colors are going to move slower, perfect. What we want to do is also
to smooth out the movement. To smooth out the movement,
we're going to click on for the keyframes right here, and we're going to
click on F nine. I'll actually do the same with all of these other
keyframes as well, just clicking F nine. Now the movement is going to feel way smoother,
as you can see. Do the same with
the reveal button. The reveal button
is exactly here. I have my scaling keyframes,
I'll F nine them. I'll do the same
with the mouse icon, the position keyframes of my
mouse icon by clicking P, and I will do the same with
the color of the reveal, which is exactly here. F nine. Now this is the final result. I think it looks
super smooth and now you know how to make
motion graphic shorts. I'll see you in the next lesson, we're going to talk about
the most difficult project in this course. It's not going to be easy, but I can guarantee you that
if you get through that, you'll be a fantastic motion
graphic video editor. I'll see you in the next lesson.
7. 3rd Reel: Gathering and Recreating assets: Here we are on the final
project of this course. We're going to recreate this complicated
animation, as you can see. The most complicated part
is actually demand moving, changing from young to old
and all of that stuff, which is not going
to be too easy. That's why it's going to be
on a whole separate lesson. For now in this lesson, we're going to gather the assets of the money, the hour glass, and the grave, as you can see, and we're going to also recreate this bar and basically
just gather the assets. Once you have done that,
in the next lesson, we're going to go ahead
and animate everything, and then we're going to dedicate a whole
lesson to these man in the middle because
it's going to be the most advanced part yet. So without further to do, let's analyze all the
assets that we need. They're just a pile of
money in our glass, and as you can see,
the crave here. We'll recreate everything
here in the actual software. So let's go ahead and
start by going on Google, and we're going to look on
our two favorite websites, which are Free Pick and Canva. So what I'll start with is, I'll go on Free Pick and type coin pile. And as you can see, we're already starting to have some stuff in the icon sections. I'll look for
something like this. As you can see it's
three piles of coins. I'll search it here
on Canva as well. And I think I like this
one, maybe even this one. Actually, I think I found it. I think I really like
this pile rate here. So I'll go open a new page and drag it here.
And then I will make it a bit bigger. And now I have my coin pile, I'll go ahead and
download it just like so. And then we need an outer class. So let's go ahead and look here. Let's look for, something
like this I really like. Maybe this is even better. Okay, I'm getting
some good results. I think I'll choose this one. So I'll go ahead and
download it as a Ping. And then we need a grave. Let's try and look for it here. We have actually these, which we could use or
something like this. Let's go ahead and look
on free pick as well. I think this one looks
really, really good. So I'll go ahead
and download it. So now, I'll just
drug it just like so. I'll disable my main thing here. And then it will actually
create a new solid layer which is red so that I can
actually see what do I have? And we have our coins, our grave, and our our glass. Perfect. So I'll go ahead and
look for the tint effect, drug it on top of, let's say, this one first, and I'll
make sure to choose a gray. And as you can see,
we now have a gray. And I'll copy the
tint effect with control C and paste
it here and here. And as you can see, we now
have our assets right here. I'll go ahead and scale them up a bit and place them
around here, just like so. Then I'll simply add them because we don't
need them for now. What we need now is go ahead and recreate these bars right here. T recreate the
bars, I'll zoom in, click on the rectangle
tool and simply throw a rectangle just like so. I'll actually make it a
bit bigger just like so. Perfect. Once I've
created rectangle, I'll rename this time rectangle, and that's because it's a rectangle related
to time function. I'll go ahead and
change the color by clicking on feel and
choosing a gray, something like this,
to replicate this one. Then I'll duplicate this one, and I'll change the field color to something like this green. I'll click Okay.
Now as you can see, I have a double rectangle. Now let's go ahead and recreate
this rectangle for also these two other functions here. So I'll go ahead and
copy the time rectangle. I'll drag it above,
and this time, I'll call it moni rectangle, and then I'll simply
duplicate it, and this is going to
be mon rectangle two. And then I will do
the duplicate this, drag it above position, drag it here on the
red one, energy, And I'll call this
energy rectangle, and then I'll duplicate it and change the field color to green. We'll need to change
these colors with key frames as we have done before, but
we'll do that later. It's not a problem for now. So now what we have is
the time rectangle, the mono rectangle, and
the energy rectangle. If I show them alone,
as you can see, We have the double rectangle, which is green and gray, as you can see,
which is perfect. What we'll do now
is go ahead and create the time,
money, and energy. So I'll go ahead and create a new text layer right here
and I'll simply type in time. I'll make sure that it's white, and then I will
simply drag it here. Then I'll duplicate it, drag it below and
call this money, just like so, and then
I'll duplicate this drag it below and I
call this energy. Now once I've done this, I can hide my original animation, and as you can see, we have
time, money and energy. Now what we want to
do is go ahead and make sure that time is perfectly aligned in the center of this
rectangle and that money, energy, and time are both aligned on the same
invisible line. So the first thing that we'll
do is I will actually I All three of these,
and I will go on align and click this thing so that as you can see,
they're perfectly aligned. I could also align them
center wise if I wanted to. You can do whatever you prefer. I actually preferred this one,
so I'll keep it like this. Now what we want to do is
go ahead and make sure that time is in the
center vertically. What I'll do is
I'll click on time, click on T rectangle, time rectangle, and
click Align vertically. I'll go on money rectangle
and do the same with money. And I'll do the same on energy
rectangle, just like so. And now everything is
aligned vertically and horizontally everywhere,
which is perfect. So now, before animating and adding glows and
all of that stuff, let's go ahead and
do this quick thing that the reference is done, which is adding our
watermark right here. To do that is super simple. We just create a text layer. So I'll just take
a text layer and I'll just throw it
just like this, and I'll type my
user name in it. Now, it doesn't allow me
to type the e symbol. So to do that, what I always
do is I go in chrome, I type it right here, and then I just copy it with Control C. And then I go
back in after effects, and I just paste it, and that allows me to enter the symbol. Otherwise, it just
doesn't let me type it. So what I'll do is I'll
just drag it here. And then I will go ahead and choose my text
and customize it. I will make the font
Monsa because I like it. I'll make it semi bold, and then I'll reduce the
size to something like ten. Actually, maybe 15 looks good. I can maybe go over 17.
Yeah, I like this more. I'll space it a bit by
clicking here, just like so. And then what I'll do is
I have to center this. So the first thing that
I'll do is I'll click on P four position and try and center to the best
of my ability. Once I've done that, I'll
click on this energy, energy Rtangle,
and energy tangle, go on align and
align vertically. So now everything is once
again centered perfect. I'll go ahead and
click Control D here, position, drag it
above on the money. You can see, I'll
center it to the best of my ability once again. Now I'll just click on here, My money rectangles, align
vertically, and I'll do that. Once again, I'll duplicate
this, P for position, trike this above so that
it's on the time rectangle. And I'll just highlight time, time, time, align vertically. So what I'll do is I'll
make sure to drag these in between my rectangles
just like so, so that as you can see, they're
going to be revealed once the green rectangle
disappears, just like so. And I will id this money rectangle and I'll
check how much do I need to lower the
opacity so that it's not something too relevant. I do something like 20. I think 20 is good so
that you can see it, but it's not a problem. Perfect. So I'll go ahead
and re enable this layer. And now we have our
bottom part set up. Now, what we want to do is go ahead and create the top text, which is young, adult, and old. I'll go ahead and get a text
layer and type here young. Now, what I want to do is, I want to go on properties and make sure to select
my whole text here. And then just make sure
that it's all cups, and I'll go line,
align center wise. And I will try to go with a
bit of a boulder font here. Let's try and do lvtica, and let's only show our text. I think it looks pretty good. So I'll drag it a bit lower. And now, if we look
at our thing here, as you can see, we can make
this a bit bigger as well, drag it a bit higher,
and that's perfect. Nice. Once you have done
this, I'll duplicate this, and then I'll duplicate once
again and call this old. I'll just now go ahead and make sure to time them properly. So I will only show
the original video, as you can see, and I'll
check when does the young N, which is exactly here. So I'll go my young and I'll cut it by clicking
Control shift. And then I'll check
when does the Adult N, which is around here. Let's find the
perfect moment here. So I'll cut it, and
I'll remove this part. And then I will
drag the old here. And the adult here. Now, if I only enable my layer, you're going to see
that everything is starting to come together. We have young adult
old, we have the bars. So before ending this last son, the last thing that
I'll do is go ahead and place these things properly. So T time these things, I'll firstly rename these
two coin and this one to our glass so that as you can
see, I know what I'm doing. And then what I'll do
is I'll simply go right here where the things which is, and I'll drag the hour
glass, as you can see, I'll drag it because
it's going to start from here and
it's going to end here. I'll cut it the extra part, and then I'll just struck
the old ult right here and cut it in the end
of my thing here. So if I now go ahead
and enable my thing, I will have young, and then it's going
to change to adult, and it's going to change
to old, which is perfect. What I want to do
is I want to go ahead and resize everything. So I'll bring this below, go P, drag it just like so and
then do the same here. On the grave, I'll reduce it, go on P for position and
just drag it just like so. Then now as you can see,
what they have is the coins, the **** glass, and the grave. I actually want to
move the **** glass a bit to the right and
same with the grave here, something like this, and I'll also move
everything a bit higher. And now we have the coins, the adult with the hour glass, and the old with the grave. Perfect. Last thing they need to do is reduce the opacity a bit. So I'll go on T and bring this to around 50,
as you can see, and I'll do the same right here, T 50, T 50. Now if I play full screen, you can see that
we have the coins, the hour glass, and the grave, which are absolutely perfect. So I'll go ahead and see you in the next lesson where we're
going to animate everything. We're going to add some
opacity keyframes here. We're going to add a glow and
some movement right here. And in the last lesson, we'll go over the
puppet tool animation of the guy. So I'll see you.
8. 3rd Reel: Animating everything: In this lesson,
what we're going to do is finish every animation, except the guy in the middle. Let's go ahead and
get started by clicking these
three texts on top. These texts are already done. They don't need any
fades or anything. What I'll do is I'll
just prec them, call them above text so that I don't have to worry
about them ever again. They're just going to
change every 2 seconds. Perfect. Now, what
we'll do is we're going to go ahead
and change the coin, aber glass, and grave animation by making it fade
in and fade out. We're going to start
by counting the frame. So I'm going to first start by clicking a keyframe on opacity, and then I'll go
forward one frame at a time and see when
does the fade stop, and I think it's exactly
here after ten frames. I'll click another frame, and I'll go ahead and
place a keyframe, and I'll go frames backwards until the coins are
perfectly appeared, and I think they appear
in ten frames, at 1:20. So frame. Now what I'll do is I
will simply put zero on the first and
the last keyframe. Then now, if I enable
my coin, only, as you can see here, this
is what's going to happen, it's going to fade and fade out. Now, to make it smoother,
what I'll do is I'll simply late everything
and click F nine, as we have already done. As you can see, it's going
to be a Smoother fade. Then I'll go ahead and copy these keyframes by
clicking Control C. I'll go at the start of the hour glass and click Control V, and then I'll go at
the start of the grave and click Control V. Now, as you can see, this
is what we have, Fades fades fades and
fades once again, which is exactly what we want. Now, once we have done that, we need to animate the bars. To animate the bars
and add the globe, we'll first animate and then add the globe
with some gaucha blur. To modify like it was modified
by the reference video, what we need to do is go in
the transformed settings and disable the scale
constraint proportion. This scale feature
allows you to basically, as you can see, scale the
rectangle in a uniform manner. So both dimensions expand
or become smaller. To give you an
example, if I expand one side is going to expand
the other side as well. Now, what we want to
do is disable this. If I now modify one of these
endles as you can see, the image is going to shrink towards the anchor
point, which is what we want. Now, to make this effective, what we need to do
is go ahead and click the anchor point
on the left side. So that now, as you can see, this is what's happening. So what I'll do is
I'll lift this on 100, I'll go at the start,
eat a keyframe, and then I'll go forward, I'll disable this so
that I can see when this ends and these ends
moving exactly here, and I'll eat another keyframe. And I'll make sure
that they are synced, so they should be exactly here. Meanwhile, at the start, It should be around here. I'll make sure to be as
precise as possible. And as you can see
what happens if I now only show our animation, it's going to move just like so. Now, once this happens, the energy rectangle is
going to stay the same until around the
end, which is here. So from here as you can
see if I disable it, I'll e a keyframe as well. Now, if I go forward, the energy is going to
go down once again, and I want to catch the
perfect moment where it stops, which is here, and I'll
eat another key frame. This time, I'll enable
it and I'll just make sure that it ends in the
same spot as the red one. Now, if we go ahead
and replay this, we're going to see
that they expand at the same time and that they
restrict at the same time. Now the problem
is that they have different speeds,
as you can see. What we'll do now, I'll
go ahead and click on the keyframe
animation right here, and I'll make sure that it moves really fast at the start. And slow at the end. And to do that, I simply need to track this endle just like so. And as you can see, we're going to have a similar movement. If I want to enhance this, I'll move even this
endle like so, and now I'll get the
same exact movement. I'll move the layer down just to show you that the
speed is exactly the same, as you can see,
which is perfect. Now, I'll drag it back up, and then I'll do the same here. So here towards the end, it's going to move really fast at the start, just like so. So it's going to move fast and
slow down towards the end. So I'll just drug all of
the end also the max, and now we have a
good animation. So let's go ahead and hide
our not original layer, and let's go ahead and
look at our animation. So as you can see, we
have our bar moving, and then it's going to move down towards the
end, just like so. Now, what we need to do is go ahead and do the same thing, to all the other rectangles. And to do that, I can simply
just copy the key frames, this ones, control C, and then I'll go on the
rectangle, for example, and I'll make sure
that the scale is paired and I'll
copy the key frames. And then I will make sure
that the scale is not paired. I will click this anchor point
just like so and just copy the key frames so that I'll
have the same exact movement. Now, what I want to do is enable my original layer and check when does the
mon rectangle move. The moni rectangle is going
to move from exactly here. I'll drag this here, and instead, it's going
to move from the start. These key frames should be here. Now if we look at them
at the same time, we're going to see
that they move and they move once again. Perfect. We'll go ahead and
play with the color later. For now, let's go ahead and
finish the time rectangle. I'll go ahead disable this, disable this, time rectangle,
going to transform, unpair this, anchor point
on the left, control V, and now we'll enable this once again and we'll check
when does the time move. The time starts
moving from here. I'll try this like so, it moves, and then it moves
from here, just like so. Perfect. Now I'll go ahead
and play my animation, as you can see,
There is everything which is moving,
moving, and moving. Now, let's go ahead and
play with the color. To play with the color, let's actually start with
the energy one. Great here, and then go
at the end and click on color and do the same
also here and here. What I'll do is I will
f nine the keyframes, and then I'll actually change
the color because I forgot. So I'll enable this layer, and then I'll go forward
and actually sol this layer so that I can now
go in my energy rectangle, and copy the color here, and then copy the color here. Now, if I go ahead and
play my animation, you're going to see that the
color changes just like so, and then it will change
towards the end. What I want to do is I want the color to
be faster, though. So I'll go right
here on the color, go on the keyframe
animation, and once again, I'll drag this to the start as I have done before,
so that as you can see, it's going to be
super fast changing, and I'll do the same
here as well, like so. As you can see,
changes super faster. Then I'll go ahead and
copy these key frames. Close these, go on
the moni rectangle, go on the fiel, and I will go at the start, go on color, and paste them. And now I'll just make
sure to time them. So here it should be red. So I'll track these
ones just like so, and here, that's where
these ones should go. Actually, they are
a bit missed time. Let's check a bit
more. There we go. So now, as you can see, it changes color and
then changes color. And then I'll go on to
time rectangle, color, go at the start, paste, and I'll just make
sure to time them. These ones should be here. And these ones should be here. Let's go ahead and center them. Perfect. Now it's
time to add the glow. Let's go ahead and start
with the energy one. What I'll do is I'll click
Control D to duplicate. I'll go on the one below and
search for some Ca blur. I'll add it to around ten, and I'll remove this edge pixel and I'll actually make
it a bit more maybe 20. Now as you can see,
there is that small glow around my as you
can see, rectangle. I can even go ahead and
increase it if I want. Let's go with something
like 40, maybe. And now I have that, as you can see,
which is perfect. So what I'll do
is I'll simply go ahead and copy this
caution blur effect. I will duplicate
the money rectangle by clicking Control D, and then I'll go on the
one below and add that. As you can see, we
have the globe now. Once again, Control V, and then go on the one below Control V. Now if I go
ahead and play this, as you can see, we
have our animation, which is moody playing out with the watermark,
time, money, energy, rectangles
moving, the hour glass, the coins, all of that
stuff, which is perfect. I'll see you in the next lesson, where we're going to
talk about the man, and how we're going
to animate that guy. Before leaving, I want
to give you a quick tip. You can also try and go ahead
and enable motion blur, as you can see, it's
going to create that effect around the globe. Which is more soft, as you can see, especially
during the movement. You can do that on
the rectangles, which have motion blur
on, as you can see, and you could also theoretically d to the actual rectangles, which is going to
smooth them out. However, I don't
really like that in reference video
as in Tuesday, as well as you can see. Lines are straight,
not smooth and out. Motion bluer is usually
better either for close, or if you have some objects such as balls or characters
that are moving. I'll go ahead and
see you in the next lesson where we're going to talk about this band and now it is moving and that
will do the same. Last thing before you leave, make sure to go on
edit preferences, medium this cache, and go ahead and empty your
this cache folder. It's going to have
a lot of data here, and if you don't do that,
often you might crash. You might have even
crashed already in this course while
creating these projects. Make sure to do that
really really often.
9. 3rd Reel: Animating the stickman (Most difficult part): So now that you've created
the first part of dimation, we will need to
recreate the man, which is, as you can see, moving, which is
the hardest part. Now, one of the most
important parts about this is going to get
the assets first. For the assets, we
will need this $0, which we can create with a
simple text layer, the pocket, which we can create by creating a shape with our pen
tool, as you can see. And then if we go forward, we have this watch, which
I have taken already. It's this one right here, and we will use it in a second, and we'll need to animate
the ticks so that they move. And then we have a cane, which I have taken right
here, as you can see. And then we need the stickmen, of course, the stickmen
in the middle. So to be precise, the best thing you
could do is go ahead and recreate
an entire stickmen. In Adobe Illustrator. That would be the
perfect setting to get the best asset possible. However, I'm not going to go
ahead and do that because it's time expensive and
requires a lot of work. So what we'll do is I'll simply download a stickan,
just like this one. I'll go ahead and get
a tint effect right here so that you will be able to see the sticken,
and how it looks like. As you can see it's a sticken
with his ends on his eps. However, there is
a small problem which makes it so that part
of his arm is missing, which does not
allow us to freely move our arm just like
here, as you can see, the touches the
arm from the body, and we cannot do it if
we just use our sticken, because part of the final part of the arm, it's not there. So what we'll do is we
will mask out the body, and we will recreate our
arms with some shape layers. It's just going to be
a couple of shapes. So the first thing
that we will do is go ahead and duplicate this, and I will hide one layer, I will hide everything else. And then I will go
onto the pen tool. I will zoom in and make sure
to mask out the entire body. I do not want to take the arm, so I will need to do
something like this, basically, but without
taking the arms. So what I'll do is I will
go when the arm ends, which is here, precisely, and I'll go up by holding shift. Holding shift makes sure that I am going
straight upwards. As you can see, even
if a click right here, if I have held shift, it's going to create
a point here. And that's because
shift basically corrects every mistake
you might possibly do. So now what I want to do is go ahead and be precise
here as well, and I'll need a point
somewhere around here. And to create that point
and he'd be straight, what I'll need to
do is go on view. Show rulers, and then I'll go ahead and drag
a guide from here, exactly where I want
everything to end. And then I'll go upwards. And since I want
everything to end here, I'll click shift and click this. As you can see, it's going
to be a straight line. Then I'll go below somewhere
around here, Olding shift. And then I want to be
precise here as well. So I'll drag this, and then I'll click here by Olding shift, and it has created a line below. And now we can simply close
the mask just like so. And now we have
our perfect body. Now that I've created my mask, I'm going to hide this layer
and only show this one. And what I'll do this
time is first off, remove these guides right
here and remove the rulers. And now what I'll do is
I'll create my arms. So let's go ahead and
create the first one by clicking on rectangle tool and
just throwing a rectangle, which is long,
something like this. Should be good. I'll change the color so that we can
actually distinguish it from the actual r. And now
the first thing that I want to do is go
ahead and rotate this, so I'll center the
anchor point and just modify the rotation
to something like this. Then I'll go right
here on the contents, and I will have to do
some modifications. First one is, if
I go right here, I will unlink this and make this s limer
something like this, maybe a bit more, actually, something like I think is good, and I'll make it longer. Okay, and then I'll round the corners to
something like 50. I want to make it a bit longer. Something like this
should be good. And then I'll rotate a bit more and I'll make
it a bit wider. We now have our first
part of the arm. And what I want to do is
just duplicate this layer, and then change the rotation to something like this
and put it here. I will make this blue so that I can distinguish
it once again. I'll change all of
the colors later. I just want to make sure that
I'm doing a good job here. I want to make it smaller, so that it looks more like the actual reference,
something like this. Make it a bit wider. Think we got here. I think this is looking
really, really good. So what I'll do is I'll
call the bottom of the arm. And then I will call this
other thing top of the arm. And now what I will do is I
will make them both white. And then what I will do is
I will disable this one and enable my original layer
and see how they merge. They look super good. What I will do is simply go ahead and late
them both and then precompose them and call this left arm because it's the arm that is on the
left side of everything. Once I've done this,
what I'll do is I will go into the
composition, copy them both. And then paste them here, and then I will precompose
them as right arm. And what they will do now is
I will go on to transform unlink the scale so that I can flip this
horizontally and boom. We have our right arm. I have simply just flip this horizontally,
and as you can see, that's just gone from here, to the other side
in a flipped way. And now I have my other arm. This has happened
because my stickn was in the exact center of the frame. That's
why this happened. Otherwise, I would have had to move it manually, of course. So what we want to do now is go ahead and
create this sort of, as you can see, superman
body, as I call it. And as you can see, the body doesn't go straight, but it goes sideways. And the reason it
goes sideways is because it's going to wide
some movement from the arm, which otherwise wouldn't
really look natural. So what I'll do is I will keep this enabled and
keep this enabled. And actually, I'll move I'll
enable everything and move everything upwards by
clicking PM moving upwards. And now what I'll do
is I'll highlight everything and scale
everything up so that it meets the size of our original animation right
here, something like this. My right harm has gone
something like this, and the reason for that is because this number
was messed up, I'll fix it by copying it. And now everything is going
to go back to normal. So now, as you can see, we have our things almost
perfectly matching. So what I want to do is go ahead and enable only the reference, just like so and go on the
rulers and drug some guide. So as you can see, it's going to end the superman
thing right here, and it's going to end right here from argits and same here. And now that I have
my guidelines, as you can see this
square in the middle, What I'll do is I'll
highlight my stick maan. I'll take the pen tool, just make sure that no layer is selected so that I can
create a shape layer. And then I'll just go from
here to exactly here, and then I'll click shift, and then I'll just close it
here and close it like so. And now we have our super
Manufact as you can see. I'll go ahead and
actually center the anchor point and scale
it a bit down and then enable the stroke And the
reason I'm enbing the stroke is because I will want to round the corners
of this thing. So I'll round it to
something like this, and then I'll actually go
ahead and round the stroke. So I'll go on stroke, and here I'll click on round cap and round join
so that as you can see, everything is now rounded,
which is perfect. Then I will call this
something like superman body, and I'll just drug it right here below everything
below the arms. Now, we can go ahead
and start animating. Now, if you want to be
a real perfectionist, maybe you could go ahead and add the superman
logo right here. But it's almost
completely irrelevant, and we can just start animating. So I'll go ahead and
remove all of the guides. And now that we have
our sticken here, what we'll go ahead
and do is start animating with the
first pocket animation. So I've already gone ahead and place the
markers right here. To place markers, you
just click the asterik, as you can see right here
below on the bottom left. And I've placed a marker when the animation starts and
when it ends right here. And then when it restarts
once again and where it ends. And then here the other
animation is going to start, and then it's going
to keep going. And then here we have a simple animation of the arm moving, and then the arm is going
to go back to its place, as you can see, and the
canine is going to dissolve. So let's go ahead
and start with the first one with the
pocket animation. Now, the pocket animation
is pretty simple. What we're going to
go ahead and do is some arm movement so that the arm moves upwards
and the pocket appears, and the text appears. So let's start with the
arm moving upwards. So the first thing to do is go ahead and click the
left arm right here, go on the anchor point mover, and then move the
anchor point of the animation exactly here. And then go here, rotation
and ita keyframe as well. And also here, we need to move the anchor
point exactly here. And then we'll go at the
end of the animation Enable this one to see
how much do we need to open our arms.
Something like this. Now we will simply rotate, and as you can see, the arm is going to rotate just like so. Keep in mind that if we didn't have the superman
body right here, we would see
something like this, which is really really ugly. And that's why we have added
the superman body and why the original animation
has added it as well so that it doesn't
look too terrib. Once we have done this,
I'll open this up to, let's say 30 degrees
and I'll do the same here -30 degrees because it's on the other
side, of course. Now that we have done
this, I'll go here, I'll eat another keyframe on 30, and then I'll eat another
keyframe on zero on both. As you can see, we
have our animation of the arm opening and
then the arm closing. Perfect. For the pocket, we want to draw a shape
with the pen tool, which is going to
start from here, go until here in a curved line, and then end around here with the same
curve, as you can see. We want this to have zero stroke so that we have
maximum control on this, and I will go on the S four scale and
scale this up a bit. Just like so looks good to me. Now, what I'll do is I will to move the
anchor point here, and I will move it
to the right side. So if you've got in the plug
in that I told you about, you have no problem, you
can just click this button. If you didn't, you to do it manually with this tool,
whatever it works. The important part
is that you move it there so that you can now go at the start
of the animation, it a keyframe on scale, and then go right here and
another keyframe on scale. And when you go
back to the start, you left something like zero, so that as you can see, the
pocket is going to grow as your arm moves
out, as you can see. And then I'm going
to go right here, eat another keyframe, go
right here and back to zero. I'll call this pocket. Now, to move this pocket on
the other side right here, what I'll do is I'll simply Go ahead and
duplicate this layer, precompose this to right pocket, and then I will go on scale, link this, and once again, I'll flip this, so that as
you can see it's there. And now the animation
is going to happen just like so,
which is perfect. The key frames are inside
of this thing right here, as you can see, so I don't
even have keyframes here. Amazing. Now it's
time for the text. For the text, I will
simply create a textbox, which is $0, and I will add it in the center
of my pocket. I will actually rotate it a bit, just a bit to make sure that
it's the same as the pocket. And then it will need
to animate this. To animate this, once again, lights, anchor point
on the right side, and then we go on scale, it a keyframe here, go right here, and
we put this on zero. As you can see, it's going
to generate just like so. However, Not only that, I might move the
anchor point even further so that now
as you can see, it moves exactly with my
textbox, as you can see. I will also want to go on T for opacity and make this on
zero and then go one, two, three, four,
five key frames forward and add another
key frame here. And as you can see, we will have our animation pen really
smoothly just like so. And then I'll click you
to see my keyframes, and I'll go a copy this keyframe here and
copy this keyframe here. Copy this key frame here, and then copy these key frames, five frames before
the animation ends, so that now our animation
is looking like this, as you can see,
which is perfect. Now it's time for
the other side. This time, I cannot just pre compete
because as you can see, if I now go ahead and do it, and then just flip the scale, everything is going
to be flipped, which is not what
we want for text. So what I'll do is
duplicate this text, go on P four position
and move it on the other side right here. I will change the rotation to instead of minus 37, just 37, I'll put the anchor point here, and I'll move this here and I'll actually modify the
anchor point a bit more. And then I will simply copy
these keyframes exactly here. Now, if we go ahead
and play this, you're going to see
that the animation is the exact same one
as the other side. So we have successfully created the first
animation of the pocket. We will now go ahead and
ease the key frames. So I'll go ahead and
highlight everything, click F nine to easy ease
all of the movements. And then I'll go ahead and need to do this with the
pocket as well. So F nine, and also here F
nine on the right pocket. And then left arm and right arm. I will also need to F
nine, all of this stuff. Now if I go ahead and play this, you're going to see that
everything looks way smoother. Which is perfect. So here we have completed
the first animation. Let's go ahead and
create the second one. So let's go ahead and look
at what we have here. We have the right arm which
stands completely steel. We will not touch that, and
we have the ticking watch, as you can see, not
r to do at all. So let's go ahead and start
with the clock movement. The reason we start
with the clock movement is because we'll need to then later synchronize our arm
with the clock movement. Therefore, it's better
to move our watch first. So what I'll do is I will
scale it down firstly. Something like this, and then we rotate it so that it is like so, and then we'll scale it
down to let's say tree. And I will also want it to
be on top of everything, of course, even less 2%. I think this is looking good. So I'll now just change this, and this is perfect. Now, what we want to do is
actually go ahead and separate the first take from the other one so that we
can then rotate them, and you cannot do it while
the watch is super small. What I'll do is I'll control
d to duplicate this. I will go on the transform
settings and just reset them. I will just lower the scale
to something like this, something like this so that I can actually see
what I'm doing. The first thing that I'll
do is I will go ahead and create a mask for
this part right here. I'll go on the pen tool, and while having these
layers selected, I'll just go ahead and
create a mask like this, super simple, just like so. Then I'll control
d to duplicate, click M for the mask, remove it, and create a mask on this other part right
here. Just like so. Perfect. Then what
I'll do is I will create a shape layer,
a small circle. To compensate for this
small hole in the middle. It's probably not going to be noticed because it's
going to be super small. However, I'm a perfectionist,
so I'll just add that. Then I'll go ahead and
control D once again, M for the mask, remove it. And this time, I'll go ahead and highlight
everything right here, close it, and then
go and invert it. So that now I have my watch
divided into four sections, which are, as you can see, this thick crier,
this thick crier, the circle in the middle, and the whole rest of the watch. This is the whole part that
is going to stand still. Meanwhile, these two things are the ones that
are going to move. What I'll do is I will
go on the anchor point, and I will go on the
anchor point mover. And put it exactly here. And then I will do the same with this other layer by putting
the anchor point here, which is actually
where it already is. Perfect. Now I will
just be able to rotate, and as you can see,
and I will have the same ticking effect
here once again. What I'll do now is I
will show everything, and then once I've
highlighted everything, I will go ahead and
create a null object. I will link all of my
layers to the null object. And then I will go on
my original watch, this one right
here, and then just copy all of these
settings to the u. So I'll copy the scale, as you can see, so that everything is going
to be smaller. And then I will go ahead and copy this position right here, and then I will go ahead and copy this position right here. And then I will
go ahead and copy this rotation right here. And then I will go
back to the scale and put everything to 100. So as you can see, and now
I have my double watch. I have my double watch, which I will simply remove by disableling this one by
deleting it, just like so. As you can see now at my watch. I will actually move
it a bit like this and adjust it a bit,
but now it's good. Now I'll simply go ahead and do is I will go at the start
of the animation here, click on R rotation
on the right layer, which is this one,
e a key frame, and then go at the end, which is this one right here and modify this value
to, let's say, 20. And I will do the same right
here below our keyframe, we'll modify this
to, let's say ten, and modify this one to zero. Now, as you can see, I will have my ticks rotating just like so. However, I feel like
they're going too fast. So I'll modify this to
ten and this one to five. Let's go ahead and
give them a look now. I think they're still
going a B two fast, seven and this one, two, three. And now I think we have the perfect amount
of motion that we want. Then what I'll go ahead
and do is I will go on my reference and check when does the watch start to appear? So here and it ends
appearing exactly here, which is after six frames, as you can see here, and then
go right here at the end, key frame on zero, and then I'll go one, two, three, four, five, six, And I'll put this to a 100. And as you can see,
we now have our watch fading in just like
so, which is perfect. Now, what we want to do
is go ahead and create a precomposition between
the arm and watch, and that's going to
allow us to have constant movement between
the arm and watch. Otherwise, they might
move at different speeds. So what I'll do is I will go
on my right arm right here, and I will cut the layer
with control shifting, and I will highlight
everything else here as well. And create a precomposition. Just like so, I will create
it and it's exactly here. And as you can see,
this is what happens. So what I'll do is I will put the anchor point of the
precomposition here, and then I'll go
on R for rotation, go right here and
move it just like so so that as you can
see it's going up, let's do this to -40, and also let's go right here
at the start composition, a key frame, and a keyframe at the end when
it's actually higher. So that as you can
see, what we have is a full rotation just like so. I'll move it actually even
higher to something like this. I really like this rotation. And now what I'll do is I will go ahead and click on U to
see all of the keyframes, go right here,
keyframe keyframe, great here, and then zero. And then I just wanted
to go backwards. So I'll just copy this
keyframe right here. As you can see, we
have our animation doing something like this, and then this, as you can see. Then I'll highlight everything, click on F nine to easy es. And then go inside, light everything and move
everything to F nine. And then I'll go
ahead and highlight all of the keyframes here, and I will click t to only see
the ones from the opacity, and I will click F nine. I do not want to F nine, the keyframes from the rotation because I want the
rotation to be linear. If I did ease the keyframes
from the rotation, the clock would move faster in the center and slower at the end, which
is not what I want. I want the movement of
the clock to be constant. Linear. Once I've done this, we have now completed
the first two emissions, and there is only one left, which is the last one, which is, as you can see him
reaching for the cane. Now, this movement right
here, as you can see, the arm right now is
rotated in this angle, like so, and after the movement, it's rotated in
this other angle. This is the reason we needed
to make the arms on our own, because we cannot
recreate this movement if the arm ws from the original stiment that
we had at the start. So with this stigen right here, which is what we
have at the start, we could not recreate that movement and flip
the angle of the arm. That's why we needed to recreate our own arms from the stigen. So let's go at the start, and let's go ahead and
gather our assets. Firstly, I want to bring
my right arm exactly here, but I also want to
cut it exactly here. So that as you can see,
there is not a double arm. So I'll bring it to the end and then just cut it exactly here
and cut this middle piece. Because our right arm, in this specific spot
is in this composition, as you can see, and I'll
also chop it until here. Perfect. So now we only have one right arm, and
we do not have two. For the emission, let's go
ahead and drag our cane first. Let's go ahead and
drag a tint effect, which I'll find exactly here, and let's drag it on top, and let's make everything white. Now we'll go ahead
and select the cane, scale it down to
something like 50%. And I will also flip
aside by adding the minus here as we have
already done tons of times. And then I will go on R
rotation, just like so, and I'll actually reduce it once again to something like 50. So now, we want everything to move downwards
towards this cane, which is actually a bit too far. So let's go ahead and
set up this cane first. Actually, let's make
the cane straight, something like this,
and let's make it so that the arm is going
to reach for the cane. Let's go ahead and make
sure that everything is going to move
towards the cane. I'll go ahead and firstly, merge the superman body
with the actual body right here so that I will have one
body in a precomposition, which is now going to allow me to use the puppet tool on it. If I now go ahead and
click the puppet tool, I can now go ahead and place some puppet tool points to go ahead and create the movement
that I wish to have. So the first thing
that I'll do is I will lock the legs by creating
some points here. Then I will create a point
here and a point here. And I will go ahead and
actually click on for the key frames and move all of these keyframes to the start because that's where
I want them to be. Here at the end, I want the movement to be
something like this, and then this also. And then I want the harm. And then I want this left
arm to kind of follow. But before doing that, I actually wanted to go
something more like this. Okay. I like this.
And then let's go ahead and make
this left arm follow. So let's go at the start, P for position, R for rotation, and let's go here and
let's move the P, and let's move the
rotation as well. Let's move the position as well. Something like this, and
then something like this. And if we play this through, we should be able to see the
arm following pretty well. It's not following too well. It should move a
bit more towards the center and
rotate a bit more. Something like this. So let's go ahead and
play it once again. Now it's following better. To move the right arm, I will go ahead and
go at the start. I keyframes on
position, rotation. And then I will go right here. And I will need the position
to be something like this. And I will also need
the arm to be straight. So as you can see, the
position is going to go like this and actually I
want it to be a bit higher. So let's replay this. Okay, it's looking good. And then we'll go inside
this pre comp exactly here. And that's where I will
need to straighten the arm. So I will go ahead and move the anchor point of this
thing exactly here. Go on R for rotation,
e a keyframe, go forward, and then
just rotate it like so. And this should create
a straight arm. I will make sure that
it's matching perfectly. So something like this for
the rotation should be good. And then for the position, I will modify it
slightly from here to here to make sure that
it matches perfectly. As you can see, it looks like a straight arm now,
which is amazing. Now if I go ahead and play
this, as you can see, it's going to go ahead and straighten the
arm just like so. So what I want to do
is go ahead and make sure that the cane
is a bit farther. So I'll move the
position just like so. And now, what I want to do is go ahead and
copy this key frame, paste it here, copy
this key frame, and paste it here, and then
go inside of this thing, and then copy this key frame here and copy this
key frame here. I will f nine everything, and then I will f
nine everything here. I will f nine everything in the left arm as
well, just like so. And I will also do
the same on the body. So I will take everything
and F nine it, and now everything should
look way smoother. Let's go ahead and play this. As you can see, everything looks pretty smooth, which is perfect. However, there is a problem
with the comeback right here. Because I've not copied
any key frames properly. Firstly, I need to copy these
key frames and paste them here and these keyframes and
paste them right at the end. Then I need to go ahead
and make this longer. Then I'll need to go right
here on the puppet tool, copy these two key frames,
control C control. Copy these ones at the end. Now I need to go
back into the comp. And here, I have not copied
the rotation key frames. That's what I was missing. So we'll copy this,
paste it here, copy, and paste it here. And then I will click
F nine on everything. So now if I go ahead
and play this, this should look way better
now and perfectly now. Now, there's really few
things that are left to do. One of them being the
fade of the cane here, which is going to happen
for exactly 13 frames. So I'll go on the cane, t for opacity, keyframe
here. G at the start. Actually, this is the start, and then go right here
and make this zero, I'll copy this keyframe, make a keyframe here and make a keyframe here by copying
the one with zero. And then I'll F 90s. And now we should
have a full animation from the start with the pockets, and then we have to watch, and then we have our
cane right here. Now, everything is looking
a bit static here. We want to add some movement. The way movement was added
in the reference is, as you can see, the arm is
going backwards and forwards. So we'll do the same thing. I'll go right here and click a keyframe on P for
position on the cane. I'll do the same here. And then I'll do the same
on my right arm right here. So P for position is
already selected, and I'll also do the same
on the body here and here. What I'll do is I will go in the exact center of this
animation, which is here, and I will place key frames everywhere because this is
going to be a key point, and here we want the right
arm to be a bit closer, something like this,
and then I will want the cane to
be closer as well. I will want the body to
be a bit just like so, and same for the left
arm just like so. That as you can
see, what we have is this, a movement like this. However, it does not look
realistic. So to fix that. The first thing that I'll
do is I will drag these upwards a bit, just like so. And then I will also
want to go inside this, it a keyframe on both
position and rotation. And then I will go on rotation and move these just like so. By moving it like this, it
should flip exactly like this. That's what I wanted, and I will move the cane upwards
so that it follows. So if we now go
ahead and play this, as you can see, it's
going to drag the cane, the word em, and then it's going to give it
back just like so. So I'll play this for a bit
further. This is what appens. As you can see, grabs the
cane and gives it back. Perfect. I'll go ahead and f9d. I'll go ahead and f9d as well. And everything in
the precomposition should already be
F nine Perfect. Everything is easy eased. So now let's go ahead and
enable all of our layers, just like so, and
let's go ahead and make sure that everything
is on the right layer. Perfect. We have
finished this lesson, and the animation
is fully completed. I'll go ahead and show
it in full screen. In a second for a couple of
times, with the sound on. Then I'll see you
in the last lesson, where I'll give you
some final tips and some general motion graphic
rules. I'll see you there.
10. Bonus lesson: How to make advanced smooth keyframe anymations: Now, this is the last lesson, and I want to explore a bit of a different style and go a bit deeper into
keyframe animation. This is not going to
be a full project because I've already
created three, and I'm going to show you how
to kind of animate balls, as you will see in a second, and how to make their
movements move. So I'll go ahead and
start by creating an ptol as you've just seen, what you need to do
is you hold right here the left click.
You get the ipsool. And then you create your
circle and make sure to old shift so that it
becomes a perfect circle. Once you've done that, you choose your selected
anchor point, and then you go on
the ellipse path, and you can choose how
much as you can see, you want it big or small. And you can make, for example, something as small as this, you make it something
with a five stroke. And then you can go ahead and a glow to the shape,
just like so. We can increase the radius, just like so and reduce the intensity a
bit, just like so. And now as you can see
one of those circles that we see constantly
on social media, and I'll go ahead and show
you how to do smooth movement with it by doing some more
in depth keyframe animation. So what you do is
you go on transform, and let's go ahead and
say that we'll move it from there to the right
side of the screen, and then it's going to go upwards until the
top of the screen, and then it's going to go
exactly in the center. So just like so,
something like this. As you can see, the movement
would be really simple, but if you make
something like this, it's going to super random. So what we want to do is, let's say we're going to animate everything after 15 frames. So I'll just go ahead and place the key frames accordingly. As you can see these 15 frames, I'll drag this year, 2 seconds, I'll drag this ear. And now as you can see, we have more of our regular movement. But what we need to do to go ahead and ease
the key frames, is firstly highlight and EZs
as we have done until now, just by clicking on Keyframe
Assistant and ECEs. And then if we go on the graphs, we can actually see the speed
graphs of our animations. So you might be either on the speed graph or
the value graph. I suggest you to go on
the speed graph because it's way easier to animate
motion graphics in my opinion, and that's what I'll use. Basically, what you can see if zooming by using old
and the scroll wheel, that you can see the
speed of movement of the bowl in terms
of pixels per second. So as you can see here, it's moving at only
100 pixels per second, and here, the top
speed is moving at 2000 pixels per second. And as you can see, it
reflects right here, as you can see, it's way
smoother now as a movement. I'll go ahead and replay this, but as you can see, it
feels pretty smooth. Now, the key to making even smoother animations is to take the end part of
the animation and dragging it towards the
start just like so. This is going to allow you
to, as you can see now, have this super smooth movement at the start, just like so. So it goes super fast
at the start and then it slows down
towards the end. I'll zoom in and replay
this once again. As you can see, does
this, as you can see, I'll do it for all of
our movements here, just like so, and
this is going to smooth everything even further. So if I now go ahead and
play this from the start, you're going to see
that it's just like so. It feels really remove. And that's how most of the animations which involve
balls and movement are done. Now, to make this even cleaner, there is the motion blur
setting right here. What this does is
basically, I'll zoom in. As you can see,
during the movement, the circle as this
sort of Mhm blur. And if you see it from far, let's go ahead and click on fit. As you can see this is going
to look way more natural, because the human eye when it actually
watches the stuff move, it sees motion blur. If you really think about
it, try this yourself. Next time you're out,
just look at a car, and you will see that when
it's going at the totp speed, you're going to see just a
blurry version of the car. And by applying it to the ball, you're going to recreate
a similar effect which is more natural and it feels more
natural to the eye. Also, the motion blurer changes its value automatically
depending on how facts. So as you can see, at the top
speed which is around here, there is more motion
blurer than right here. Where there is less motion blur. This is already done
by after effects and calculated by after effects, so there is no manual
input on your end. After effects is already doing everything,
as you can see. And as you can see, this
animation is basically perfect. The motion blur, the movement, everything is
really, really good. So to summarize everything out, The key frame graph that
you should be looking for in the speed graph should
be something like this, where as you can see, you have dragged the handle just like so. Not all the way, because
all the way usually looks a bit too fast at
the start, as you just s. I'll replay this once again. As you can see, it looks a
bit too fast at the start. But if you make it
something like this, which is not all the way, but it's still a decent amount, where the top speed is
around 4,000 pixels. As you can see, this feels way way smoother
than a normal easy. This was just a quick lesson
on how to animate balls, how to use motion blur and how to Ess keyframes perfectly. Now, if you've listened
to all of the lessons, you are going to be able
to recreate perfectly the most viral motion graphic style animations on Instagram. If you have like this course, consider leaving our review. Also, I suggest you to
follow me on Skillshare because I'll drop more
courses in the future, especially in short
form content. And since you're
interested in the topic, I'm sure they will help you. I wish you a good day
and a good learning.
Buzz, AI Video Editor
