All language subtitles for 6.1 Creating a Simple Animation Loop

Hey what's up guys

Nelson here

in this chapter were going to be talking

all about animation and bring things to life.

I'm going to be teaching you all

the tools to animate frame by frame in Photoshop.

Here's an overview of this chapter

creating a simple animation loop

creating more complex animations and basic damage states and effects.

For this exercise we're going to be using the background

we made all the way back in chapter 3 and creating a simple animation Loop.

This is going to be really easy and straightforward.

I want to ease you into all the tools in Photoshop first

before we start getting into more complex animations.

So we have our previous background file open.

And the first thing we're going to start with is the timeline.

Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1

I'll walk you through all the tools and get us set up first.

We can access it by going to a window timeline and clicking create video timeline.

And you'll see a bar for each layer you have

and its default play time is 5 Seconds

and that's how long our animation loop will be today.

Clicking the top right corner button

we can optimize all our settings to help us animate

First we want to set our timeline frame rates to 24 frames per second.

I find this frame rate the most optimal for animation

since it's just enough frames to create smooth movements

and also really commonly used in the industry.

Also, make sure "Loop Playback" is on

so you can infinitely watch your animations by pressing space.

We also want to go to panel options

to make sure our frames are as small as possible.

So click none out of all four options.

These buttons down here help you zoom in and out of the timeline

to get a better look at your frames.

And this timeline marker tells you what frames you're currently on

and you can drag it around in the timeline

so you can isolate a part that you want to play back.

So using the timeline, we have the luxury of working on a multi-layer system

rather than everything compressed on one layer working frame by frame.

Next up, let's quickly plan out our scene

and see what we can animate.

I definitely want the girl to be bobbing up and down

kinda like an idol motion while her eyes are blinking.

Also the air conditioning fan spinning fast would also make a good loop

The electric box's lights can be flickering every so often

and I'm thinking the scene would do well with some raindrops

dropping down from any rooftops of the main building and garage.

So what I'm planning to make an animation loop like this,

I want to think about what can be looped forever while still feeling realistic.

I think of these loops like a frozen piece of time

or a memory like a never-ending feeling

We want to select the girl.

So the girl is in the staircase layer

So you want to "merge group"

we're going to have one layer for the figure

If you want to find the figure

that we're going to have to go to "stairs"

Then the figure is right here.

It's good to keep your layers colored(color-coded)

so you know which is which. That way

That way like I know that the figure layer is purple.

So everything is going to revolve around a five second Loop

and usually I like to keep things maybe looping between

in like 2 and 1/2 seconds to 1 second.

So just intervals of

intervals of 1s or 2.5s and it'll add up to 5s in the end

So it's going to be like a perfect Loop once you play it back.

Let's just get started.

I'm going to drag the figure layer on its edges

and reduce it down to 1 second long.

I'm also going to drag the timeline marker to 1 second

meaning when you play it back it'll only play back that one second

instead of the whole thing.

I'm going to make a new video group

by pressing this film button here

and this special folder is what holds all your frames

and lets you animate on the timeline.

I'm going to call it "figure animation" for now.

So if you want to make the next frame

you duplicate it by dragging the layer to

to the "new layer" button below and a makes another frame that's 12f long.

If you just press the "new layer" button,

then they'll make a layer the size of the timeline.

For the girls animation

I want her to bob up and down by 1-2 pixels

and have her blink as well.

I'm go for subtle movement as something that can be played back over and over.

I'm just going to select her body

and transform it down by 1 pixel

and do the same thing again for the next frame

Playing it back with space

we can get a feel for the timing of it

Right now, it's on 12 frames per second.

So I want to reduce it down to 4 frames for the transition.

Basically, you have an opening and closing motion

the highest point, transition, and the lowest point

she's bobbing down, but now she needs to go back up.

So I duplicate the highest point

and the transition frame and rearrange it.

so it appears like she's going back up.

Now the figure looks like she's bobbing up and down.

So the order of the frames is high, transition, low, transition, high.

And it'll be a lot easier if you label all your frames.

And we just made our first animation

that was pretty easy, right?

I decided to make her Loop 2.5 seconds

and you'll see me make loops based on the total time of 5 seconds.

So if I want to make a loop twice in a 5s cycle

then it'll be 2.5 seconds long

if I want it to loop 5 times

then it will be 1 second long.

Okay, let's take this one step further and make her blink in this loop as well.

Since we want to keep the girl on 1 layer,

we can animate her blinking during this one

this 1 second window in the beginning.

Blinking is really easy to animate in pixel art

and it'll only be 3 different frames of the eyes closing.

So we want open, closing and closed.

I'm going to duplicate the layer and draw on top of it

first drawing the closed eyes.

I find it's much easier to draw the beginning and end frames

to get the rough idea of the movement first

before drawing in the inbetween frames to make it smoother.

And you'll see me playing back the animation every time

I change something to see if the timing looks alright,

and what will make it easier to keep track of everything is

if you name or color code your frames and name your video folders.

Right so eyes open, and close

open close, so we needed an in-between

We need an in-between frame between this and that

so let's make another layer in between that

that will be our transition frame

we'll want her eyes to be half blinking to complete the transition.

I typically will animate on 4s first

to get the general movement

and if that needs to be a bit smoother or faster.

I'll change it to 2s

that transition frame when she's closing her eyes,

it's on 2s and it will appear faster.

Now, all we have to do is select and duplicate

the frames and reverse the order so she's opening her eyes again.

Now let's test our entire loop

sometimes the playback gets a bit choppy

and it shows you how much frames per second is

playing in real time down there.

I zoom it out and it helps with the frame rate.

And now we have our figure animation done all within the 5s loop

where she's blinking and idling around.

Ah I forgot, so because it's 2.5 seconds

We want it to play for 5s

So we're going to want to copy all the layers that we just made

and then make a second loop

So then once you play it all the way

It'll loop twice and complete the 5-second range.

Subtitled by
-♪ online-courses.club ♪-
We compress knowledge for you!
https://t.me/joinchat/ailxpXoW3JVjYzQ1

So we're going to do that for all the layers that we create

now, let's work on the air conditioning unit.

It's going to be a super simple loop of 2 frames

of the fan spinning back and forth.

We're going to start by making another video group

and making your layers 2 frames long

Right, so this one is super simple.

We're going to make a 2 frame loop

We want to choose a slightly lighter color

to show the reflection of the fan.

so once we have the general shape of it done,

it's like spinning counterclockwise

So we're going to make another layer

So these ones are 2 frames only. We're going to make another layer

and we're going to want to extend this down to make it

have the illusion that it's spinning counter-clockwise.

These are two frames very subtle animation.

Let's put this to the test.

We're going to move the timeline marker to the lengths of the two frames

and play it back.

Made from only 2 frames.

We have the illusion of a fan spinning back and forth.

It's super simple yet effective.

Then we're gonna copy the frames, and keep copying them to the 1s mark

then we're going to want to copy this and copy it again

make these frames orange

so I know that there's only two frames that make up the entire Loop

that way it'll be easier to keep track

if I want to go back and fix it again.

Now we're going to animate the lights

flickering on the electrical box.

This one is also super simple to do

only having it blink once in our 5 second cycle,

we're going to select it and cut it out

and paste it back in the same place

pressing Ctrl + Shift + V. And now the light is on its own

And now the light is on its own layer.

We're going to want this to flash very briefly. Just like a little flicker of light.

So maybe it can flicker here like every 3 seconds.

We'll have it flicker.

We'll make a new video group with a light in there (called it "lights")

So now that's in there, I can make a new layer.

I'm going to have it flash for just 2 frames.

we can go to the opacity and cut it down to 14%

another one, let's do 100%, and another that's 14%

And do another one that's 100%

So let's test this out. After playing it back a couple times.

I realize that having it on 2s

is still too slow for a flickering light.

So I'm going to reduce the frames to 1s instead.

After I change it, looks a lot more believable now.

To push the light flicker one more step

We're going to make the light flicker

have a subtle glow to it.

We're going to make a new video group

and match the time frame pattern we have for the light flicker.

We're going to put our layer on "Color Dodge"

and make a subtle glow using the same green with a lower opacity brush

It's a super simple technique and really straightforward to make

After playing it back

it looks a bit too staged

because she's blinking the same time as the light flicker.

So I rearranged the timing of the flicker to be earlier.

And take out her blinking the second time to break the pattern.

Sometimes when you make these loops

you have to think about what looks natural to you.

Alright, so we're almost done

the last animation to make is the raindrops falling down.

This is probably the hardest to grasp

but it's super simple to do.

It just requires a little bit of timing.

I recommend watching raindrops falling in real life or in animations.

I'll do a quick example

when the raindrop falls down

it starts off slow and as it keeps dropping

it'll get faster and faster and in the end,

it's going to make a little splash and spray outwards.

I'll compare side-by-side with momentum

and without momentum.

these two raindrops are both taking one second to fall down,

but without momentum it feels really static

and here's how my frames look like for each raindrop.

The one on the left

starts off slower than the right one,

but it starts to cover more distance per frame

dropping down and also gets a bit longer by the end

and has like a little trail.

And it's just these little adjustments and timing that

go a long way to making a believable animation.

We're going to apply this rain drop into our scene

And the great thing is we only have to make one animation Loop.

We can duplicate the video group

and move it throughout the scene for more rain drops.

I'm going to make a new layer and take a light color

to stand out from the dark background

transforming it while holding shift and arrow keys.

We can move it a longer distance every frame.

So every frame the raindrop is going to travel a longer distance

until it finally hits the ground.

When the rain hits the ground it's going to scatter apart.

So I just want a couple pixel

separating apart from the infeccion.

Now let's put this to the test.

I really like it so far.

So because we made one raindrop animation,

we can duplicate the whole animation loop and use it elsewhere.

meaning we'd only have to animate rain falling once

and I should probably move it elsewhere on the same main building

and add a bit of typing in between

so they aren't falling at the same time.

That way it'll look just a bit more natural.

What I usually like to do is add a pause frame and

highlight it in red so I know red will mean pause

and there'll be nothing on it.

When I make a duplicate raindrop

I can transform and move the raindrop over here

remove the splash of the last two frames

and extend the pause frame.

And as I start to add more duplicates,

I can extend the pause frame for each of them to my own liking.

Right, okay so we have 4 raindrops 1,2,3,4. Nice!

Next up we're going to animate this raindrop falling onto the leaf.

We're going to copy over the first raindrop animation

we did since it was still has the splash at the end.

And then we'll have the leaf

react to the weight of the drop as well.

Every time there is action

there will be a reaction depending on what it is.

Luckily, I have a layer just for this plant itself.

Not going to do anything too crazy.

When the rain drop hits the leaf there's gonna be a delay

Making a new video group, there's going to be a small delay before the leaf reacts

In this case, the force of the raindrop will impact the leaf

and will bounce back since the leaf itself is really light.

same concept as the light flicker

We're going to match the frame timing of the raindrop

to the leaf, once the raindrop hits, the leaf will react right after.

hit, react, bounce back, and back to idle

lets see that in action now

nice!

Okay, so maybe it's a little bit too dramatic

for such a tiny raindrop

but you get the idea.

Afterwards, I basically spend the rest of my time

duplicating more raindrops throughout the scene.

On the buildings and figuring out the right

timing for every moving part.

I'm making sure that the raindrops look natural

and don't fall at the same time as other movements

like the eyes closing or lights flashing.

I have a red key frame that's blank.

and I drag it around to increase the pause time

for when the raindrops starts falling

this way I can control when the rain falls

and I can avoid them falling at the same time.

Afterwards, we can export it as a gif file through File Export Save for Web.. I leave

I leave most of the settings untouched.

All I do is set it as a gif and save it at 1920x1080 pixels and it'll upskill the animation

for you automatically to a high-quality looking animation.

If you want to export it as a video file

like an mp4, you can make a copy of the Photoshop file you have just for exporting.

Open it up and go to Image Image Size.. and change the dimensions to 1920 x 1080px

or extend to 4K if you wanted. After you

After you expand it here in the image size

You can't go back to the drawon it again

since there's more pixel density now.

Then you want to go to File Export Render Video.

Make sure you use Adobe Media Encoder with H.264 format with the settings.

You can also play around with the video dimensions here

or keep them the same as your canvas.

Make sure the range is your work area

which is whatever the timeline markers are highlighting.

And we're done!

these types of animations are my favorite to do

since they can do so much for the background

and uplift it to something so interesting to look at.

Maybe it can be used as a lofi hip hop playlist or part of a larger animation that I'm creating

In the next video, I'll be teaching you more complex

animation techniques with a couple

more challenges with one of my favorite animations I've done.

See you in the next one and take care.