All language subtitles for 19 Finalizing Your Animation

If you want to turn off the subtitles,
click [setting]-[tooltips]-[‘on’ for PC, ‘close’ for mobile]

Hello, everyone.

Havtza here.

And this is the final lesson

in the animation production sections.

Basically, after this, you're going to have your complete animation.

This is also the last step in the animation pipeline,

at least on the production side of things, and this is the compositing.

This part is very technical

and it's highly dependent

on which software you're using.

In fact, one of the biggest changes between different animation software

are the compositing features that they have in them.

In that department, the iPad is somewhat lacking

and it's pretty much less effective

than some other software

that you have on the market,

especially in computer software.

But I will be showing you

how you can make

some different approaches

and use different softwares

and different ways

to composite your animation using the iPad.

This type of animation techniques

will work for every software that you try

as long as you have your layer mode

and the clipping mask.

And actually, one of the bigger reason why I use FlipaClip

as my go to animation software on the iPad

is because it does

have some compositing features built in.

But even so, sometimes you want to have

something more serious for compositing,

in which case I will be using Procreate.

And I will be showing you

how to composite using both of them

as well as how to export and import between them.

If you're using a different software

with this video, that's still fine.

You can follow along with your own features

in your own software.

And if you have some automatic features,

then that's all the better for you.

Still, it's good to know how

this things works

so you can

create them in any type of software,

even if you don't have automatic features.

Let us begin.

First, let's talk about what is compositing exactly.

So the compositing stage in production

is where you put all of the shots

elements together

to create your final image

for each frame.

In this stage, you make sure

that everything works together

and that it looks like

it's really part of the same environment.

This is usually where you're going

to add your parallax effect

and your camera movement.

If you have a software

with automatic features

which allows for built in camera movement,

but for our purposes,

this is going to be the place

where we only adding the lighting

as well as compositing

any overlays that we need to have

in the environment,

depending on which type of scenes we're having.

Compositing includes the technical

putting together of the scene,

things like making sure

that all the layers are at the collect order

with overlays covering each other and your character

at the correct position.

As well as the environment elements

that make the scene look good,

such as shadows or textures that need to be added.

You will use compositing to add character

shading and highlights

onto your character itself,

environmental lighting effects

that make the character

fully part of the scene

and interactive lighting that affects the environment,

such as shadows between the characters and the environment

or changing light sources,

which again creates different shadows

depending on their location and if they're moving.

You will also use effects

that enhance your image,

like color shift, gradients and textures

that can't be drawn consistently by hand.

This is usually more for the artistic

looking types of animations,

where you want to have textures

within your brushes,

or where you want to have a good gradients

which are not included in the FlipaClip software.

Depending on your software features

and especially on Procreate

you can take advantage

of the artistic features in the software,

such as using texture brushes, the glow, blur and pixelation

or chromatic aberration effects.

There are many softwares that

you can use for compositing on the computer.

On the iPad, our options are more limited

especially since some effect

require drawing new elements

directly in the compositing software itself.

So for this reason,

I tend to use Procreate

and some features and FlipaClip

because they allow me

to have greater control on the look of each frame.

And I will be explaining my thought process

for when I composite and plan

my compositing in the test frame,

because this is the place

where we get to be creative

and inventive in our approaches to animation,

depending on what compositing we want to have in each scene.

You will need to make changes

depending on your software limitations

and define the looks that you want

to give to your frames.

So this is less about the technical

aspects of what you can do

with your software and more about

how you can find solution to problems

and push the boundaries of your software

to create the look that you want.

Up until now,

we've seen pretty standard compositing.

Basically, I only concern myself about the lighting

both the direct character lighting

and the environmental lighting.

But because we are using Procreate

as our compositing software,

we have many more options to get very creative.

We've our compositing

because we are using

an illustration software and not a traditional compositing software.

We have a lot more freedom

and options for us to choose

when it comes to artistic effects,

but we also have many more limitations

because of the layer limit

and the fact that we have to add

every single detail

by hand for every single frame.

This is where your test frame is really going

to help you to get organized at the beginning.

But for each effect

and things that you trying to make,

you need to be very creative

and test to see how you can get the effect

that you want in the most efficient way.

Here you see some examples of the compositing groups

that they have to many of my animations.

For example,

you can see that simply by adding

some texture to a very simple animation,

I can give it more details

and make it seem more artistic.

By using the built in brushes

to give textures to the lines,

and use a combination of texture

brushes and clipping mask

to give more details to the characters,

I can create a more interesting effect.

In some other examples,

you can see that I can create very interesting lighting

by using a combination

of add, multiply and overlay layers.

This way I can play around

with both saturation and brightness

between different layers,

which can really affect the glow of the environment

in a much more interesting way

than simply turning on the glow effect or the bloom effect

in a traditional software.

You can also see some examples of shots

where I have more complicated compositing,

where I have many different layers

that create many different effects

in different part of the character animation.

You can see it in the video of the woman

with the transparent black dress,

where the different parts of the characters

have lower opacity

and you can actually see the different layers,

one behind the other.

And this is without all the lighting

and gradient layers that are made

on top of each individual layer

and the additional lighting textures

on the glowing palettes as well.

When you're having shots,

we’ve a lot of compositing in them,

you need to make sure

that you actually have enough frames

to create the entire effect that you're aiming for,

and if you know that you have

too many frames for the entire shot,

maybe you should actually divide it

between two different projects

and later edit them together

to a single shot.

Sometimes you will have shots

with interactive environmental lighting.

This is where the lighting

in the environment itself has to move,

But you cannot physically

draw them with the brushes in FlipaClip.

Oh, you might not be able to draw them

with the brushes in Procreate as well,

while keeping consistency.

For this, you will have to use assets

that we've made in advance in the test frames.

You can see here with this sea example

that they have many different layers

that compose the lighting in the scene.

Some of them are hand-drawn and manipulated

between individual frames in Procreate

and some of them are just assets that I copy and paste,

while moving them between flames.

Again, same as before,

You need to make sure

that you have enough frames in your project

to create all of the effects.

If you can, it's a good idea to merge down your layers,

once you know that you

placed all of your compositing correctly

to make more room

to more compositing with more layers.

When you're adding your environmental lighting using either

assets or hands drawing palettes,

you need to make sure that they interact

correctly with both the environment and your character.

So if you're using a copy paste asset,

you need to have a standard base

that you place correctly on the environment,

and then you can erase or change it

in accordance to your character movement

in any individual frame.

You can see this here

with this dragon example

where the amount of compositing layers

on the environment changes

depending on the presence of the dragon

on the scene and its location.

You can also see that the human character

has different shadows between frames,

depending on the dragon location on the screen.

In general, for each type of compositing

that you're making, be it interactive lighting,

complex compositing,

or just simple compositing with a twist,

you need to think about the overall

look that you're aiming for

and find the most efficient way

to get to it.

You will want to experiment and strike a balance

between the limitation of your software,

the look that your're aiming for and the amount of work that it requires.

My best advice about this is to time yourself

when you're making the compositing of your test frame.

This will allow you to estimate

the actual amount of work and time

that you're going to put

into the compositing stage of your animation.

This will also give you an estimation

on the number of frames

that your animation is going to take

because, you know the number of frames

in the actual animation of each shot,

and you can multiply it by the amount

of additional layers that you put into your test frames.

Whenever you're trying to composite a scene,

there are basically three lighting elements

that you need to keep in mind.

This is your character lighting,

your background lighting,

where your character interacts with it,

and your environmental lighting.

The easiest and most important one

is your character lighting.

If your animation is simple enough

and doesn't require any specialized environmental elements

after adding your character lighting,

you can basically finish your animation.

Your character lighting is both the highlights and shading

that you add to your character

with either a hard or soft brush.

This lighting basically exist to add to the volume of your character

and put it firmly in the environment.

This stage can be performed

directly in Filpaclip and shading by itself

can be enough to give your project

a finished looked if you do it correctly.

By matching the lighting to the environment,

we have both the twin goals

of defining the volumes of your character

and making it look a lot more like

it's part of the environment.

In animation, the shading is added to give a more 3D

look to your character

so it will follow your character volume.

You have to keep it consistent between frames,

otherwise your movement will look messy and jittery,

but to do that, we need to understand lighting itself.

So there are two approaches

to lighting an object in animation.

First is adding shade and the second is adding light

which is pretty self-explanatory.

These approaches refer to the way that we choose

where to place the lighting on the character.

You can choose either one or you can combine

both of them to give you a lighting,

a more complex and detailed look,

but this will take more time

and might need more compositing layers

to complete depending on the layer more choice,

so your approach will depend

on your overall project, budget and schedule.

Each method will depend on the lighting in the scene,

so when your scene is bright

it's more efficient

to use the shading method

and just add shading to the bright based color.

And when your scene is dark, it's more efficient to add

lighting onto the dark based color.

Basically, you need to make a distinction

on where you will add less color to your character.

If you already know that your entire character

is going to be light

and that the shaded area

is going to be pretty small,

then use the shading methods.

But if you know

that your entire character

is going to be dark

and the areas that are going to be hit by the light are pretty small,

then just add light.

If you know you're going to have a mid-range lighting,

you can go with either one, or you can just add

both of them at the same time

because using the shade method gives you more definition

to each individual part

of your character volumes

because we're only going to shade

the areas that are really close to each other.

But the editing light method is better to define

the overall volume of your character

and the lighting sources in the environment.

Since we already made the base color choice of character

during the test frame stage,

we can look at the color itself

to know which approach we will be using.

Basically, if your colors are dark, use the light method

and if your color of the light is the shade method.

First, we need to identify

the light sources in the scene.

This part is again

already decided in the background

and storyboard stages.

From these sources we find the angle

from which the light hits the objects.

Now there are actually

two types of lighting

that can hits your character.

First is direct lighting,

which is when we are going to be using

the hard brushes

because the light will directly

affect the clothing of your character.

And the second is soft lighting or bounce lighting.

This is where lighting hits another objects

close to your character and reflects onto it.

Usually it will have an added color to it

because it reflects a different object.

So, it wouldn't be the harsh and bright light that you're going to have

with the direct lighting.

In this cases, we’re going to have to use

a different compositing layer to FlipaClip

because it does not have a very good gradient brush.

In either case, you can have multiple light sources

hitting your characters at once,

some will be direct and some will be bounce lights

and this is why we plan them in advance using the test frames.

After we know our light sources,

the next stage is to find the volume

of your character.

Again, this was already done

within the animation and cleanup stages,

if we've done them correctly.

By combining both the light direction

and the volume of your character,

we know which part of the character will be hit by the light.

Basically, you just need to draw a line that follows

the volume of your character,

which is going to separate

between the shade and the light area.

When we are trying for the light adding approach,

we will find where the light directly hits the character

and add only small spots of light to give the definition and separation

from a dark environment,

which is where the light source

is directly behind the character

only illuminated in edges.

When going through this method,

the key thing to think about

is to make sure that each volume

and each part of your character is clearly seen

because usually in scenes like this,

you will have dark characters on dark background

and you want to make sure

that they are not hidden within it.

For the shade adding approach, we try and find areas

where the light cannot hit at all.

Basically, this will be mostly because of close

overlapping of the character details,

so this is a way to give

localized volumes to layers

that would otherwise look flat.

Usually you're going to see this in areas

such as your characters chins, armpits

and some clothing details

as a way to really give them definition.

Again, if we've done our character lines correctly,

your characters are going to have volumes

and definitions by themselves,

but it does help to have this additional shading,

and it can be essential

if you're going for lineless look.

Now, if you understand your lighting situation and character volumes correctly,

you can try adding the lighting

directly onto your character drawings

without using Onion Skin to check

if it's location and size all consistent.

This can save quite a lot of time

for your actual compositing process,

as we're going to see later on.

In these cases, I either just draw the lighting directly in Procreate

using a clipping mask like you're going to see.

Oh, sometimes I just use the line out layer

duplicate it, and add the lighting directly on top of it

later to be composited in Procreate

or by using the compositing layers in FlipaClip.

Make sure that when you created your test frames

you have your correct lighting

base colors and highlight or shading colors

because if one of them is incorrect,

you're going to have a different effect

than what you were planing for.

Also, because FlipaClip does not have all of the compositing

layer features options that Procreate has,

you need to make sure

that you're choosing an option

which actually exists

if you want to composite it

directly in FlipaClip. For the next step in compositing,

we will be moving to Procreate.

This is where we're going to

add our environmental lighting, our character bounce light,

and interactive light elements.

A lot of the times for these elements,

you will need some artistic looking brushes

and object transformation features

that does not exist in a FlipaClip.

To composite in Procreate,

we need to add every effect layer individually

to every frame by hand.

This can take quite a while,

so having good organization

and planning skills is important to make the process efficient.

So, whenever you're trying to plan your test frames

try use the smallest amount of compositing layers that you can

to get the effects that you want.

And a lot of the time to keep the task easier,

you can even just directly

import your lighting assets from your test frames

as a layer group to your new project

and just duplicate it and add the necessary layers to add your characters

and environments into the frame.

You can also take advantage of FlipaClip with its in software

compositing features by just adding your assets as transparent images

using the image import options directly in it,

but in that case, you wouldn't be able to use clipping mask,

so your lighting and assets

are going to affect the entire scene.

It can still give you pretty results but the effect is quite limited.

The step to actual compositing in FlipaClip

are actually quite simple.

First, make sure that you have your line layer

and your color layer separated.

This will allow you to use

the actual line layer as a base to block out your lighting details,

the same way that we've done

with the coloring details in the last lesson.

But don't use the actual line layer

because you want to keep it clean and put it on top

as to not damage the actual line out by coloring over it.

So just duplicate your line out

layer and set it to the correct layer

blending mode for your lighting.

This will be the layer we're going to use to edit

the lighting on top of your character.

The order of your layers should be color

on the bottom

lighting in the middle and the line out on top.

Once you have your layer set,

save or screenshot the lighting reference

from your test frames that we've made in the previous lesson,

then imported into FlipaClip

using the photo import feature

and use the color picker

to save the right colors for your blending mode.

Now you have two options

when creating your lighting

in your lighting layer.

First, you can use thin lines

and just sketch the correct volume of your lighting

right in your line out.

This is very useful

when trying to block out big shapes

because you will only need to

block out the shape and not color

each individual part of it by hand.

You can use the bucket feature.

But if you know that you have a very thin lighting or very small areas

that you need to add details to,

you can also use the pressure brush

to make things easier and more efficient.

Be careful when using the pressure brush though,

because it might take a while to control it.

And if you're trying to add small details

closer to the edges of your character

or your character body part

you might go over the lines

Here, you can see that by using the blending mode in FlipaClip

you don't need to concern yourself

with picking up the different colors

for the shaded and light

parts of your character coloring.

And you don't need to worry

about mismatching the lighting areas

of the different colors.

You won't to be using different lines in different colors,

which has to connect perfectly for your lighting effect,

but only using one line

which automatically transforms

to the different colors.

Honestly, this feature is the reason

why I chose FlipaClip as my main animation

software in the iPad, even with its many drawbacks.

In general, by having good organization and understanding

of the features of your software, be it the ones that I'm demonstrating here

or whichever software you are using,

you can probably achieve products

with much higher quality

than you would anticipate

by the price or quality of your software.

I encourage you to try and test your software features

and see if there are any ways

that your organization can allow you to have more options

when it comes to your creation process.

Now that we finished

adding the lighting to our animation in FlipaClip

you want to prepare it for the exportation

into Procreate for additional editing.

Because we have a limit to how many layers

we can have in a Procreate project,

we might want to break down

the animation into

multiple small little files.

To do that, you can actually

copy and paste your animation

between different project directly in FlipaClip.

By copying the entire frame in the actual frame the window

and then pasting them

into a new project

with the correct number of layers

already open in the new project.

You can exactly copy your frames

into the new project

with all of the layers and information,

which makes it much easier

to export the different layers

that you need for the compositing in Procreate.

Of course, you can finish the compositing stage already in FlipaClip

if you're satisfied with the result,

but there are some features

that cannot be done in FlipaClip

and this is why we want to have

additional compositing in Procreate.

Also some effects such as glow

are not quite as flexible in FlipaClip

like they are in Procreate.

So, to composite using Procreate,

first, we need to import the video into it.

I start by importing the base

background layer as a video.

This helps me make sure that they have

all of the frames in the correct order

when I open my file in Procreate.

If you want to make the Procreate import in higher quality,

you need to save the video as a file

instead of to your album

and imported into Procreate

using the file options

instead of the photo options.

This will let you open the video as individual frames

which will be represented by different layers

and they will be automatically numbered

so it's pretty easy to keep track,

on the correct order of your layers

and to which layers we need to add which frame.

So, next we'll import the different layers of your scene,

such as your character layers or any additional lighting layers

separately into Procreate.

By using the PNG export option,

you will have a folder containing each frame

as a separate image with transparent background

in the correct order and also numbered.

Now you just need to import the images

into your scene in Procreate using the add file option.

By importing the background as video,

you're going to have your layers automatically numbered

so it's really easy to match them together.

The way Procreate treats each layer as a frame makes it so that you can't

easily have multiple layers in a single frame

the same way that the layer features

allow us to do in FlipaClip.

Basically, if you want to have multiple different layers

within each frames,

you need to make the entire frame into a layer group.

You can add additional details

and effects to a specific layer

in your group by using clipping mask.

Otherwise, it's going to affect the entire frame

the same way that FlipaClip does.

It's very helpful when you want to add special lighting

and coloring effects to your characters

because by duplicating your assets between groups,

you can have consistent textures and effects.

Also by using the combination of layer groups and clipping mask,

you can also take advantage of Procreate capabilities

as an illustration software

and adds texture using brushes and features that are not normally seen

in conventional animation software

such as denoise, chromatic aberration,

and some texture filters that Procreate have.

This is actually half of the reason

why some of my animations look so unique.

It's because the compositing elements

themselves are not very common

in the industry.

Moving on to the actual environmental the lighting,

these are used to bring the elements of your shots together

so you will want to add effects

the change both of your character

and the environment lighting.

By using these types of connecting elements,

you will create the illusion of the environment

affecting everything in it equally.

For these types of effects,

I use layer modes which affect the line out

or have effects with opacity

because changing the amount of contrast

between the character elements themselves,

such as your coloring and your lines and your details

gives them more depth and also makes it

so that they really get into the environment

because the lines are affected in the same way as everything around them.

You will also want to consider how the character

being in the environment affects the environment itself.

You will need to add shadows to the areas the character interacts with

or change your lighting situation

if they are moving light sources in your scene.

In these cases, you need to make sure

that your lighting in the background itself

is done on a separate layer

because you wouldn't want to have a duplication of your shading,

if your character is going from a light to shaded area.

This is also where the selection transformation tool comes in handy

because in Procreate you have the option

of transforming your selected elements

on different planes which allows you

to use your consistent assets from your test frame

and then shift them around the environment

with the correct perspective

depending on where they are in the background.

Of course, you can try and draw them

correctly for each frame,

but this is more difficult

and usually will have less consistent results.

If you plan your test frames well,

you will have all the elements

that you need to have those changes.

And this is why when having scenes

with interactive lighting,

you need to have a blank and modified

versions of your lighting assets

because they will be hard to duplicate between frames

without having a base version.

The last feature which are very useful

to putting your character in the environment,

are the glow and blur effects.

These are under the category

of modifications in the Procreate features.

When using the modification effects in Procreate,

be it the glow, color correction, or blur,

take into consideration that they need to be consistent between frames.

So, basically when you create your initial modification

in the test frame,

take note on the percentages

by which you've adjusted your image

and use them for each frames

in your actual compositing stage.

Otherwise, the shifts between frames will be very noticeable

and will create a lot of jittering effects.

That being said, some effects don't affect your entire image equally,

some of them affects different areas of the screen,

depending on variations in the image itself,

such as distance from the middle point

you can see this

with chromatic aberration or perspective blur,

and others depend on the contrast between the colors

such as bloom or curves.

When there is a large change in your character movement

that affects the application of the effect,

you need to modify it to look better,

but still take note on the adjustment

and try to keep them

with as little change as possible between frames

because then you will still have flickering.

Finally, this is the last exercise

and you simply need

to just finished animations

that we've been working on.

Make sure that you have the correct character

and background design

as well as correct character movement

and that the animation is smooth

and the characters are being kept on model.

For this exercise, all you need to do is to match the lighting

to your test frame to create the final product.

Of course, the difficulty of this step

is going to be determined

by the test frames that you've

made in the previous lesson.

But if you see that

you've added too many effects,

you can just simplify

your compositing stage to one element

and practice only editing it.

But of course, you would need to add all the elements

to get to your final product

as you envisioned it.

To recap,

today, we learned how to add

lighting to your characters

by either adding lighting, or shading to your character,

depending on the entire situation in the environment,

as well as how to import your files

between Procreate and FlipaClip

and add special effects

to different layers of your frame.

We learned about environmental lighting

interactive lighting and character lighting,

both direct and indirect.

Finally, we learned how to apply

some universal corrections

using the modifications tools in Procreate.

And now we know how to make a

complete animation from start to finish.

Thank you so much for watching

and see you next time for the conclusion.

Bye.