• Home
  • Personal
  • Gallery

How I make a hand-drawn style animation

12/24/2018

Comments

 
Picture
There are many different ways of creating animations. But today I am going to write about how I make hand-drawn style 2D animations.

Most of my animations are digitally created although I make storyboards and sketches on my drawing book. I used to use adobe illustrator to create vector objects for my animations. But as I have created different animations and come across diverse creative animations on social media channels, I have been more attracted to hand drawn animations. 

I like the imperfect zigzaggy lines and shapes that can only be created by human hands. Since then I started creating more objects with my hands and photoshop; Personally, I think, photoshop has broader brush options than illustrator.

Step 1. Create storyboards

Picture
This is the initial storyboards I made.

I came up with this idea of a broken heart. But, the main story I tried to convey was the heart was mended by itself.
Picture
Then, a question popped up in my head.
'How did the heart get broken?'

To answer this question, I added details to the initial storyboards.
A lightning hit the heart then it got broken.

Also, at the stage, I roughly coloured the characters with my coloured pencils to see how I want it to look.

Step 2. Design character, props and backgrounds

Picture
I tried out different brushes on photoshop then decided the charcoal large smear has similar texture to coloured pencils I used; Therefore, I drew each object using charcoal large smear but the brush size varies. 

Occasionally, I added the chalk brush to finished objects because the rough brush stroke of chalk makes objects look more hand-drawn.

First, I drew the heart on the canvas then added arms, eyes, legs and lips on different layers. 

Then, I additionally drew other props (i.e. raindrops, lightning, buds) on different layers as I need to animate them separately on after effects.
​
Picture
After drawing all the assets I need for the animation, I made final storyboards to refer for the animation. 


Picture
Picture

Step 3. Add Jittery effects to the animation

I know I probably gave more details how I animated them on after effects, but the title of this blog is "How I make a hand-drawn style animation", so rather than going through each step to animate objects I am going to focus how I added jittery effects to give an hand-drawn animation impression. 

There are many YouTube tutorials to show how to give a jittery effect to your animation on After Effects, but this is the tutorial I found most helpful.
If you prefer written tutorials, read this. I wrote it down every step in the tutorial.

This tutorial is based on the assumption that you have already finished your animation. ​
​

  1. How to add Jittery Effects to your animation

    ​Step 1. Create an adjustment layer
    Step 2. Create a solid layer on top of the adjustment layer.
    Step 3. Add displacement map to the adjustment layer.

    then change the values on effect control like the Image II.

Picture
layer orders
Picture
Image II. Displacement Map Values
           Step 4. Pre-compose the solid layer you just created and choose move all attributes into....
Picture
           Step 5. Double-click the pre-composition you just created. 
​                         Add Fractal Noise to the solid layer in the pre-composition.
                         Then, change the values on effect control like the Image III.
 
Picture
           Step 6. Alt Click the watch icon and add expression time*24
Picture
           Step 7. Precomse the solid layer and choose move all attributes into... again
           Step 8. Add Posterize Time to the pre-composition you just created.
           Step 9. Change the value on effect control from 5 to 12. (it varies how jittery you want your                           animation to be. I chose 12)
           Step 10. Go back to the original composition and switched off the eye of precomposition                                   above the adjustment layer. 


Ta Daa! Your animation is all good to go!
.
​.
​.
(I don't think I will ever forget how to make a jittery effects to my animation)
Comments
    Picture
    Picture

    Archives

    December 2018
    November 2018

    Categories

    All
    Illustration
    Korea Travel Guide
    Tutorials

Picture
  • Home
  • Personal
  • Gallery