Transcripts
1. Introduction: Hi. My name is Hongshu, and I'm a motion designer
based in Toronto, Canada. I have been animating in Adobe After Effects for more
than six years now. Currently, I'm working in an advertising agency
for clients like Adidas, PayPal, Walmart, and many more. I'm excited to be here today
to host a live session. Today, we're going
to be working on a very simple and fun
animation together. It's about eight-second long. I'm going to teach
you how to work within the Adobe After Effects, the workflow between Adobe Illustrator
and After Effects, some tips and tricks, and also some
keyboard shortcuts. This class was recorded
live so I got to interact with students while I was working on this project. Without further ado,
let's jump right into it.
2. Preparing Your Illustrator File: My name is Tiffany. I work on Skillshare's
community team. I am the lucky host of today's live class with
top teacher Hung Shu Quo. We're super excited to have
Hung Shu with us today. He's going to walk
us through some easy and fun motion graphics. Without further ado,
let's get started. Hung Shu, we're super excited
to have you here today. Will you please
tell us a bit about who you are and what you do. Hi, everyone. Welcome.
My name is Hung Shu. I'm a Motion Designer
based in Toronto, Canada. I have been animating in Adobe After Effects for
more than six years now. Currently working in
an advertising agency for clients like adidas, PayPal. Very excited to be here today to show you how to do a
fun motion graphics. I joined Skillshare a couple years ago when I first
started as a student, and I really like the community. I learned a lot of things
on Skillshare as well. I started teaching on
Skillshare last year, and it's really a great
creative community that people are very
encouraging, so it's great. We'd love to hear a little
bit more about what you are planning to
share with us today? First of all, I'm just going
to show you how to prepare this Illustrator file before you can bring it into After
Effects for animation. If you have the file ready, let's open it in
Adobe Illustrator. This is what I have here. As you can see here, I've got all these
layers separated. Most of the cases, when you have a illustration like this, you're going to have
some of these elements separated when you're
doing it, which is great. But the thing is, when we bring this file into After Effects, it's not going to be separated. All of these layers is
going to be combined into one flat illustration which you can't really do
anything about it. What we need to
do first is go to this right corner here,
click on this Layer. If you don't have Layer, you can go on top of this
menu bar here, go to Window. Then down here, you can
actually see the Layer panel. Click on that, and then we have the Layer panel open on
the right-hand side, and you can see everything
is on just one single layer. If you click on this arrow here, drop-down arrow, you can see all these different elements
inside this one layer. There's just one simple
thing that we need to do is just click
on this Layer 2, and then go to this right-hand
side drop-down menu, this button here, click on it, and then go to Release
to Layers Sequence. Once I click on that, you can see all these elements. I can toggle the eye
icon in front of the layer to make it invisible and visible
on the art board. All of these layers
are not separated. Next, what we need to do is
just select all of them. The one that's inside Layer 2, select all of them, and then drag it
outside of Layer 2. After we drive them all outside, Layer 2 is going to be
empty so we can delete it. In this case, we have all our layers separated
from each other, and that's how we
can bring it into After Effects to animate
individual layers.
3. Organizing After Effects Project: Next, what we can do is we can bring this file
into After Effects, organize it and start animating. If you have your
After Effects open, let's go into Adobe
After Effects. We can create a new project. If you have this panel here, just click on New Composition. Then we can rename this
composition to Main Comp. Let's make the width
to 1920 by 1080. Frame rate we can keep it
at 25 frames per seconds, and then the duration, we can just leave it at 15
seconds, which is good. Hit on "Okay." Now we have this panel
here, all these. I'm trying to go to
the Windows on top. Can you guys see the Window menu on my
screen at the very top? Yes. There it is. Yeah, because I
also have my Zoom controls on top [OVERLAPPING]. Yes. It's confusing. [LAUGHTER] Yeah, it's messing
up with my clicking. If you go to Windows and then
you can choose Workspace, just set it to Standard. You're going to see
the same layouts in the After Effects as
what I have right now. If you still don't see it, you can reset Standard
to Saved Layout, it's going to reset to the
default standard layout. This is what we have when we first open Adobe After Effects. First, we need to bring
in the Illustrator file. We go to the top left panel
here which says, project, and then easy way is just
double-click on this panel, any empty space, double-click. It's going to pop up
the Finder window and then let's navigate to our file here. You know what? [LAUGHTER] I forgot one thing, I forgot to save the file. [LAUGHTER] Before
you do anything, make sure you save this file, otherwise it won't have
all the layers separated. Just make sure you
save this so that it has all the layers here, and then let's go back
to After Effects. Double-click on this
project panel here. Let's navigate to the
Illustrator file that we have. Before you click on anything, make sure you import it as a Composition -
Retain Layer Sizes instead of footage because
if you do it as a footage, it's also going to
flatten everything out into one single layer
which you can't animate, so you need to choose this Composition -
Retain Layer Sizes. Then make sure you don't click on these two,
because some people, without realizing they have this Illustrator sequence open. If you have this checked, it's going to be very
hard to fix it later on, so you have to re-import it. This is very important. Then hit on "Open." Now in the project panel we have
two extra things here, one is a folder that contains all the layers of our
Illustrator file, and the other one
is a composition. If I double-click on
this composition, you can actually see I've got this artwork imported
into After Effects. All of these layers are
separated. That's very good. Now I'm just showing you how to organize the files before
we start animating. First of all, let's
create a folder in the project panel and
let's call it Assets. Good. Then we are going to need another folder that's
called precomp. For those of you who are
new to Adobe After Effects, precomps are like folders
in Adobe After Effects. It can help you
organize stuff and then it can group
layers together. That's what we call a
precomp in After Effects. Now to make this project
panel organized, I can just drop this folder into the Assets and then this is considered a precomp because
you can see the icon here. This is a precomp icon. We can put it into the precomps. Now we have three things. These are the three
things we need. We're going to have
the main comp, which is the working space. This is the only comp that we're going to
be animating in. We have a folder that
has all the assets, and then we have
a precomp folder we're going to need later on. To get started, we
can copy all of our Adobe Illustrator layers, just Command A on the
keyboard and Command C, copy, and go back
to the main comp, paste it in into our main comp. This is going to be
the comp that we're going to be animating in. Now we can close this one. Next, I just want to
organize these layers and rename them so that
it's easy and clear. Right now you can see the
filename here that says CC.ai, which is not what we want. If I click on this
source name here, this little icon or name here, it can switch between
source name to layer name. Source name is named
after the source file, which is pretty long,
that's not what we want. We click on this, it's going
to show our layer name, which is layer 3-12. That's not very helpful as well. What we need to do is just see what they
are and rename them. This one should be
the background. I'm just trying to figure
out which one is which. First of all, I want to
get the background layer. Now you can see layer 7, layer 10, and layer 12. If I toggle the eye icon, these three layers
are the background. We need to group these three
layers into one precomp. The shortcut to that is Command Shift C. You can
also see on my screen here. Let's name it Background. Click on "Okay." Now we have a precomp that
says background, and you can see in
the project panel we have an extra precomp, so we need to drop this
all the way down into the precomp folder to make
it organized and clean. This is a background and
then we're going to have the two circle here.
That's our circle. Let's precomp it again, Command Shift C, call it Circle. Now we have a circle here. We can drop this one
into the precomp. Now we have three precomps
inside the precomp folder. This one is this building here, and then we have this building,
we have this building. The three layers in the middle are the three
background buildings. I want to click on this color
icon here in the front and change it to yellow color so that it's easier to recognize. Let's just rename this
one to maybe Scene 3, let's call this one Scene 1. The last one I want
it to be the second, so this is going
to be the Scene 2. One, 2, 3, three scenes. Then the last two is going
to be the train we have. Then this one is going
to be the bushes. That's how we organize layers and organize the
project panel inside Adobe After Effects so
that everything is clear and organized before
we start animating.
4. Starting Your Animation: The next section is going
to be all about animation. First of all, I want to
animate the three scenes, the background scenes first. How we do that, we just
go into this first scene here and we can hit on
the P on the keyboard. There is a position property. The main idea is
we're going to have these three scenes going from the right-hand side
to the left-hand side. They're going to come
from the right to the left, one by one. From the right to the
left, something like this. I need to add a keyframe. At zero second, I want this first scene to be
starting from around here. Let's add a keyframe here. Then going forward maybe
to the three-second mark, as you can see on
the timeline here, let's drag this
position property all the way to the left
so that it's moving. If you would hit on Spacebar to preview
the animation here, this is what we have now. Then if I turn off
these two to be clear, we can only see this one now. We're going to apply
this simple animation to all three scenes so that
they have similar animation, but then we can stagger them
later on so that they come up one by one so that they
don't clash into each other. This one here we're
going to have this one move from
the right to left. Then let's have
the scene 2 here. Hit on P on the
position property. We can add a keyframe here. From the third second to the
probably the six second, we can have this scene
here moving to the left. Then let's turn on the Scene 3. P on the keyboard for position and then we're going
to add a keyframe here. When it first
started, I wanted to start from somewhere
around here and then go forward to
the eight second. For the last one, I don't want it to move all
the way to the left because, in the last second, I still want some background
in my circle instead of if I move it all the way
when the animation ends, there's going to
be nothing inside. That's not what we want. We want this to stay inside
when the animation ends, so I'm going to put it
over here in the center. This is going to be
our animation for now. That's our background
scene animation. After we have this one in place, what we can do is we
can animate the train. The train is going to be also the position property changes, which is very simple. Let's just hit on
P on the keyboard. At the beginning of
the animation here, for this one, I want to
try something different. I want to right-click on position property and then
hit on separate dimensions. This way you can
manually change the x and y position individually instead of all at the same time. Since the train is only
moving horizontally, only moving on the exposition, so we are only going to change the
exposition on the train. At zero second, we want
the train to start from the left somewhere around here. Then say the animation is going to last
for eight seconds. At the last second, I want the train to move
somewhere around here. Pay attention to
my timeline here. If I hit N on the keyboard, you can see this
preview range changes. This is called the
preview range. If my timeline indicator
is at eight second, if I hit N, it's going
to cut it from here. I'm only previewing everything between zero second
to eight second. Let's take a look at
our animation for now. The problem right now is for the train is moving too slow. I want the train to
already inside the circle, maybe around 1.5
second so I need to speed up the train a
little bit more over here. Then it's just going to
slowly going forward. Let's preview this and
see the difference. The train is moving a bit
faster in the front end from zero second to
1.5 second and then it's moving slowly in the middle so that we
see all the action over here and then
around eight seconds, it's going to stop there.
5. Creating a Parallax Effect: The next thing we want to do is we want to
animate the bushes. We want to create
this parallax effect. We want the building at
the back to move slowly, which they already do. They're moving pretty
slowly at the back. Then we want this bushes
to move pretty quick, pretty fast to create
this parallax effect and to make you feel like the
train is moving fast. Although as you can see, our train is moving
pretty slowly without any context but if
we add the bush in, it's going to create an illusion that the train is moving fast. What we need to do is we
need to zoom in, command. You can see the shortcut
on my screen here. We need to zoom in and then we need to go
to our bush layers. This is our bush layers. Let's turn off the eye
icon on the train. Just hide it for now so we're
only focusing on these. This part is going to be a bit hard to understand
but bear with me. We're going to make
it. First of all, we need to turn on our ruler, Command R. You can see there's
a ruler on my screen here. If I drag from this part here, it's going to drag out a ruler. I just want to have a ruler
at the tip of this bush here. At the tip over here, you can see it's almost touching this first
tree over here. Then what I want to do is I
want to duplicate two bushes. I'm going to Command D, duplicate one and then Command D again,
duplicate another one. So I have three layers. The first bush is going
to be the center one that we have and
then we're going to drag one to the left. Then the third one, we're going to drag
one to the right. We're going to
extend the length of this bushes so that when we're moving it
from right to left, we can move it pretty fast. You see this part, it
has a problem here. These trees here, I want to put the bush 2 under the bush 1, which is the central
one to cover those sections as intersecting. The next thing we want to do is just remember this line here. This line is touching the
very first tree on the left. Next thing we want to do, we want to parent the left and right trees
to the center one. We need to go to the bush 3, and then drag this pick whip
button. This is parenting. If you're not familiar
with parenting, what it does is that after I parent these two
bushes to the middle one, when I move the middle one, let's say if I hit on "P" on the position property
and then drag, the two is going to move
with the middle one. Something like this. I only
need to animate the middle one and I don't need to animate all three
at the same time. It's going to make
the workflow faster. Now, what I need to do is add a key frame on the position. Sorry, I think the position
changed, one second. Over here, you can
see my bush 1. This line is touching this
tree here, which is good. Then what we need to
do is we need to add a position property on the
bush in the center here. Drag it all the way
to the right so the bush is going to
start animating from here and then maybe
within two seconds, it's going to move all
the way to the left. Now I need to zoom in. What I'm trying to do here, I'm trying to
create a loop here. If I turn off this bush 1, I just need to see
that my last bush, the bush 3, this tree is touching this line. That's why I can create a seamless loop so that when
I'm looping this animation, you won't notice any difference. It's just going to continuously moving from the
right to the left. This one, all I need
to do I just offset attach because we are going to have this tree at the beginning. We need to have this tree touch this line here
and then at the end, this tree is almost touching the line so that we
can create a loop.
6. Creating A Looped Animation: All we need to do is we need to duplicate
these three layers. But before we do that, I want to create a pre-comp, Command Shift C. Now I want to cut this layer here. Next thing I want
to just Command D. If I preview this, you can see it's
actually looping inside the circle there. But it's hard to tell, because I don't
have a mask on yet. The next thing I need to do
is create a mask to only show the center circle area
instead of the whole thing. I just need to duplicate
this loop here. Then what I need to do
is I need to create another composition that compose all these four animations, a bigger group to host
all these four layers. Command Shift C, Bush. Now we have this one layer. Next, I just need
to drag a mask. Go on top here, go
to Ellipse tool. Just draw a mask on this
layer and you can hold down Shift to make sure it's a
perfect circle and then hold down Spacebar
to move the mask. I'm holding down Shift and also Spacebar to move the mask, to make sure it perfectly
align with the circle. I'm trying to align this with
circle here. That's good. Now if we look at
this animation here, we can see the bush
moving. That's good. Then we have the background, but we haven't created a
mask for the background yet, so you're already seeing
everything outside. The next thing,
what we want to do, we want to do the same thing. Just pre-compose
the three scenes. Command Shift C.
Let's call it Scenes, and now we can just draw a mask. Make sure you have the
scene layer selected, and then just draw a mask. Hold down Shift to make
sure it's a perfect circle, and then you can hold
down Spacebar to move the mask around so that you can align
everything perfectly. That's good. Then let's
zoom out and take a look. Another thing is we
can just turn on our train layers now. You can see the train.
7. Adding a Track Matte: For the train, I want to
introduce another idea. We did the mask
for the bushes and the scenes so that you're only seeing
this middle section. But for the train, I want to add what we call track mattes. How we do that is we go
to layer, we go to new, and then we create a
solid layer. Hit on Okay. Then we still need to draw a
circle on this solid layer. Make sure I hit on
Shift and then use spacebar to move
around. That's good. The next thing is I
want this circle, let's rename this
to a track mattes. I want this circle to be a
track matte for the train. The only thing we need to do is make sure this track matte
is on top of the layer that you wanted to select and then go on the train
and click on here, there's a track matte function. Make sure you set
it to Alpha matte. You can see this layer is
turned off automatically. If you don't see the
track matte here, you can click on
this second icon on the left corner over here, and it's going to show this
column that you can select. What happens is that whenever
this top circle is visible, the layer beneath it is
going to be visible. As we can see, we have
the circle in the center. Whenever the train enters, the circle is going
to become visible. When the train is
outside the circle, is going to be invisible. That's how a track matte works. When the train enters
the circle on top of it, it's going to be
visible just like this, but everything
outside the circle, you cannot see it. Now, what I want
to do is I want to change this because I don't want the train to be cut off
from the head here. I just want to click on this anchor points on the
mask of the track mattes, and then drag this over
a little bit more so that when the train travels
outside the circle, it's still showing up. Drag it even more. If I move
it inside, you can see. If it's outside the
circle, you cannot see. Let's just make sure it's
around this area here. Drag it all the way outside. The train is always visible. I can still see a little bit
the head of the train here. I need to make sure
the exposition is moved to the left a bit more. Let's preview this
animation here.
8. Adding Other Elements: First of all, I want to add
a pop-up at the beginning, a transition saying to
reveal this animation. I don't want this to stay on
the screening all the time. The way we do that is, let's just go to the
top here and click on this Ellipse Tool and just double-click on
the Ellipse Tool. It's creating an
oval shape here. Right now I only have a stroke
here I don't have a fill, so I need to create
a fill color. Make sure you click on this and then select the yellow color. I already have this
yellow color here. You can use the Eyedropper Tool to select any color you want. Let's cancel. Just click on "Okay" I have this fill color and
then I can turn off the Stroke by just holding
down option on my keyboard. I left-click a couple of times, it's going to turn off. Now let's go to this oval shape. Click on this drop-down, click on this Ellipse Path and you can see there's a size. Let's unlink the
size of proportion so that we can change this
oval shape into a circle. Let's change it to 1080 by 1080 and that's how we
get a perfect circle. I want to make this circle a bit smaller, something like that. The next thing we want
to do is we want to add another mask on
top of this circle. I want to click on
this Ellipse Tool and then make sure you click
on this Mask Tool here. If you don't click
on this mask on top, it's going to draw another
shape within this layer. That's not what we want,
we want to draw a mask within this layer so
click on the Mask. Another thing is when
you are drawing a mask, you can start from
the perfect center and then when you draw
it make sure you hit on Shift on the keyboard and then hit on Command
on the keyboard. If you hit on Command
on the keyboard, it's going to draw the
circle from the center. You see that, when
I hit Command on the keyboard it's drawing
the mask from the center. Now I just need to go
down to the mask and animate one of the properties which is the Mask Expansion. If I toggle around
this Mask Expansion, you can see my mask is
growing in and out. I want to hit this clock
here to add a keyframe and then drag this keyframe
forward a little bit and make sure the mask does
not exist at the beginning. Drag it all the way
to negative 369. As long as it disappear
I should be okay. Then if I toggle the timeline, the circle is just going
to come up like this. Next, I just want
to add Easy Ease. Select the two keyframes, right-click and then
Keyframe Assistant, Easy Ease, just
adding the easing. Then go to the
graph editor here, you can click on this
fig graph to view. Just make sure to manipulate this graph a little bit so
that it's got more energy. The circle is going to pop
out like that. That's good. Next, we want to duplicate
this mask, Command D, duplicate this mask and then change this mask
mode to subtract. This is a trick
that we always do. We change the mask
to subtract and then offset the keyframes. You can see the effect
we're going to get. Duplicated mask change it to subtract and then
offset the keyframes. That's the effect
we're going to get after the two mask that
we add on the circle. We can also manipulate the
timing however we like. But right now I feel
like the circle is not in the center, so we can just move this whole layer to make sure
it's right in the center. That works. Now all I
need to do is to delay the animation of all
the layers beneath it. Just select all these animation that we did before except
for the background and then drag the layers a couple of frames ahead so that they're not visible on the
screen at the beginning. Maybe drag it all the way here. I want the circle to
pop off first and then reveal the animation. Look at that. That's good. Then the next thing we want
to do is we want to add some speech trails just as
if the train is moving fast. The way we do that is we need
to go on top here to select this Pen Tool and then zoom in. Let's draw two points. Draw a line like this
and then go on top here, make sure we have
the Fill turned off, hold on option on the keyboard. Click on the "Fill" three times and then go to the Stroke, make sure it's in white color. Now we have this white line here but I still need to
make the line thicker, something like that to change
the stroke of the line to nine points and then change
the Butt Cap to a Round Cap. Now we have a line here. Next what we need to do is
we need to add a trim path. Go to this line
that we just drew, this layer, and then on here
there's the Add button. You can click on that, we
can add a Trim Path effect. It added a Trim
Path effect here. If I toggle the end and
start's percentage here, you can see the line is
actually drawing on and off. Around here this second, we need to maybe just
around half second, click on the clock
here to put down two keyframes and change the ending value
to zero as well, so 00, both starting
at zero and then go forward 10 frames. Command Shift right arrow, so that's how you go forward 10 frames and change all
the value to 100 percent. Next, we can select all of them, Keyframe Assistant, right-click
and then Easy Ease. Go to the Graph Editor, the same thing as we did before. Just drag these curves to make
sure it's got more energy. Next what we need to do is
just offset the keyframe. After we did that, this is the effect
we're going to get. You see the lines almost
like a speed trail. Right now it's moving too fast, so I need to drag the
two keyframe at the end maybe a bit further so
that it's got more time. I need to offset these
two key from even more. Just however you like it, but I think right now it
works pretty well like that. That's cool and now we
just need to add more. The easiest way is to
duplicate this layer, Command D. Then just make sure you're back
on the Select Tool, otherwise you're going to keep drawing with your Pen Tool. Go back to this
Select Tool and then you can change the position of it and maybe put it down here. But we don't want them to
come on at the same time, so we can offset the
frame a little bit. You can hit on U
on the keyboard to show the keyframe and
then we can drag this one forward a little
bit so that they are happening at different second. That's good. Then we can
duplicate another one, drag it all the way on top. But then over here I want this to be shorter
instead of this long. I need to go back to the
Pen Tool and then click on this one end of the line and pull it back a little bit so that
this line is shorter. If we preview, this is
what we're going to get. We have two long lines and then one short lines.
Something like that. Now, since we have
three already in place to make things faster, we can duplicate three
together Command D and then drag all of them forward so that
there are repeating. But whatever you want to do, you can change it to
different places, change the length of it since your animation
is already on there. You don't need to change
anything else just the position and the length of
the speed line. Let's zoom out and take
a look at our animation.
9. Adding Reflection Layer: Last thing we want to do is, we want to add a Sheen Effect or you can call it a
reflection on the train. As if the train is reflecting lights from
the sun or something. The way to do that
is first of all, I need to go to my layer, and then create a new solid. Let's create a solid layer, and then I want to
go to the Pen tool. I want to draw some shapes here. Just draw some shape that
looks like a reflection. Maybe one thicker one, and then one thinner one. This one is going to be here. This is going to
be our reflection. Then we're going to peep on the keyboard
position properly. Right-click "Separate
Dimensions", so when the train
moves around here, I want this to move from
the right-hand side to the left. Just going to pass through
the train. That's good. Then I want to
duplicate another one, and modify it slightly, so that when the train's
moving these two is going to pass through the train,
something like that. This is going to
be our reflection. Let's just pre-comp it. Command Shift C. This is
called a sheen effect. The next thing we want to do, just like the track matte
that we talked about before, I want to use the train as
the track matte so that whenever the train is visible, this reflection is
going to be visible. I need to duplicate this
train layer, Command D, and then put it all the way
on top of this sheen layer, and then set the track matte on the sheen layer
to alpha matte. Now, you can see whenever
this train is visible, the sheen is visible. The next thing we want to do, I just put these two layers
on top of our train layer. Let's try to set it
different blending mode. Let's set it to soft light. If we set it to soft light blending mode on
the sheen layer, this is what you have, and you can still see a
little bit yellowish color. That's up to your choice. You can also change it
to white if you want. That's the effect
we're going to get. Let's preview the animation. It's very subtle,
but it's effective. It's going to help
with the storytelling, and make it more realistic. Right now, you can still see the sheen
effect outside of the circle. Another thing we need to do, we might need to pre
compose this one again, the train and the sheen, Command Shift C. Pre compose
to the sheen effects, and then change this layer
blending mode to soft light. Let's draw another
mask on top of this sheen effect to make sure it only appears
within the circle. If we hide the ruler, that's our final animation. You can still see
the speed line and the reflection on the train, and then we have the
background moving, and we have the bushes moving. After we have this
animation ready, we can export it to a GIF, and share it on the Internet. The way we do that is, let's go to the composition
menu on top here, and then let's add it to
Adobe Media Encoder queue. To export a GIF, we need to have this Adobe Media Encoder,
another software. Normally, when we export to
mp4 format or GIF format, we always use this
because it's pretty fast, and when it's rendering, you can still keep on working other stuff in After Effects. You don't have to
stop your work. It's rendering
completely outside of After Effects in a different
software from Adobe, which is working pretty well. I don't know why it's verifying. Come on. Just one last
step to export the GIF, and it's failing me. Things always seem
to go not how they usually go when
people are watching. Yeah. Well, this has been awesome. While we wait for it
to export and hit that final step maybe I can
pass along a question or two? Yeah, for sure. Cool. There's actually a ton of really awesome
questions coming in just around the life of a motion graphic
designer and animator, how you get started, etc. Wondering if you could share
a little bit about how you got started in the industry, have you noticed any
patterns and what skillsets are most in demand or that people
are looking for, any suggestions on how to build a portfolio or a demo reel just about that getting
started process? Yeah, definitely. When I was in college, my major is graphic
design but we also had motion graphics but we're
only learning the basics, foundations of animation and also some of the after effects. After I graduated, I worked as a graphic
designer for a couple years. At the same time I was also learning online
because I really like motion graphics and I was doing a bunch of
tutorials online, I went to Skillshare to learn, there's YouTube tutorials
everywhere and there's also like other site that can teach you how to
do motion graphics. While I was doing my daytime
like graphic design work, like after work I always go
back home and then started my own project like
doing things here and there so that's how I put
together my portfolio. I just mimic what other people are doing in their
tutorial because like the good thing is for
demo reel you don't have to show the full
piece most of the time, you only show a couple of
seconds that's awesome and then with all the
information online you can actually
create something that's awesome for
a couple of seconds and then move on to
the next project and then have a bunch of awesome pieces put together maybe like a minute demo reel. So that's how I
kick-started my demo reel and I just keep learning
online courses. After like three years doing my daytime job doing
graphic design, I feel like I'm confident with my after effects
skills so I just quit my job and go out and look for a
motion graphic jobs, something that's tidal like
motion graphic designer. Luckily for me there was
this advertising agency, they loved my work, they didn't even say
anything because for us designers or artists like sometimes degree or
university doesn't matter, wherever you graduate from doesn't matter as
long as you have good work and then you
are friendly to people. Most of the companies when
they're hiring they care about the thinking process
of your work and also how good you are doing, how good is your craft? My suggestion to
whoever is just getting started is I guess just keep practicing
because these things, sometimes it's
simple things like this animation I can
probably if I'm not teaching I can do it maybe in
like 20 minutes but then it takes time to practice to be able
to do it for 20 minutes, it takes years of practice and sometimes you learn
a technique and then you feel like you know it but then
the next time when you are actually needing it and
you need to do it you forgot. I find the most rewarding thing is just like not only watching tutorials or classes
but actually doing it and then maybe put
on my own flair, customize it like whatever
they're teaching, maybe they have a storyboard, you customize it, you make another set of
animation that's your own and you can put
it on your demo reel. That's what I find
most benefiting, did I miss any of the points that you said before? That was great so great.
Thank you so much. It was really interesting
to hear how you got started as a student yourself on Skillshare and
how you made it happen. Have that last step go. Do we need to try it again? Yeah, I was trying to
because I think it closed on itself so I already clicked it again, try to open it. Fingers crossed. Yeah, let's just add
it to the queue again. How long does this
step usually take? Normally it just takes seconds but I just seem to
have a hard time opening the software itself because
if you have it open, it should be taking no
second to render it out. Is there any other
questions that you'd like me to answer? Sure. So one of our
students wants to know, do you plan to release more
classes on explainer videos like how to add music or sound effects to
explainer videos? Yeah, I'm planning on another explainer
video right now and it should be out like
in a month or two hopefully because I have
a couple of projects, like different
classes going on at the same time so
yeah, definitely. For special effects
it's two areas. One is special effects, the other one is
motion graphics. They intersect each other
for sure but for me, I don't consider myself to
be a special effects guy. It takes a whole different skill set to learn special effects, it's really hard, I find this really hard. But if you're into it you can
probably find other teacher who are teaching special
effects on the Internet, I myself is not very
good at it to be honest. I mostly just focus
my classes on motion graphics and
especially for beginners to get started so that's how I felt when I first
got started it's hard to find classes
that teach you how to do real projects and how to systematic teach you how to
do the real-world project. That's beneficial
for me when I first started to find even a single class on Skillshare to be able to work on
real-world projects.
10. Final Thoughts: Just make sure to share your project in the
Project Gallery below, so that you can get feedbacks
and encourage each other.
Hongshu Guo, Motion Designer
