Drawing every frame in an After Effects animation | Tutorial
Articles Blog

Drawing every frame in an After Effects animation | Tutorial

September 18, 2019

I’m going to show you how to use After
Effects and a 2b pencil to create this animation my plan was to create a short looping
animation in After Effects and then redraw every frame by hand to create a
lot of charm and texture that frame-by-frame animation tends to have
and experiment with blending traditional and digital animation to create maximum
impact for the amount of work required I decided that needed to loop and be
animated at 12 frames per second so by drawing just 12 frames I could create
many seconds for the viewing I decided on this design of an eye with an iris
zooming in infinitely and lines rotating inside that I started in a 5 second long
comp that is 12 frames per second and I’ve created a circle straight in the
middle I’m gonna animate it scale by making it 0 at the very beginning and
then a few seconds later increasing its scale so it encompasses the whole
composition I’m gonna add some easing to the very first keyframe and then in the
graph editor just make that a little sharper then I’m gonna duplicate that
layer change its fill color to white and then offset it by 6 frames which will be
half about 12 second loop I’m going to select and duplicate both of these with
control D and then I’m going to drag them over and offset them by 6 frames
each again and keep doing that to fill up the comp now we’ve got our infinite
zoom I’m gonna drag my work area to be 12 frames long I’m gonna slide all these
back until they fill up the entire screen there now we’ve got our 1 second loop within these 12 frames for the rotating
lines I’ve created a new comp that’s a bit larger than our main comp and I’ve
got one line coming out from the exact center I’m gonna add a repeater I need
to add repeater give it 12 copies and change the transform on the repeater to
its position between 0 and its rotation to be 30 I’m gonna zoom in and adjust
that anchor point so it all lines up in the middle there we are I made the
rotation 30 degrees so each copy would be rotated an additional 30 degrees and
over 12 copies that would fill out a complete circle to figure out the angle you need to make a full circle, you can click into the rotation field and do some simple math in there so we can do
360 and / which means division and then the number
copies you have so we have 12 so it’s gonna calculate 360 divided by 12 which
is 30 degrees and like an absolute nerd After Effects will do all of the math for
you now let’s duplicate this line’s layer as
well add a rotation at the beginning of our work area here and then at the end
let’s rotate this by 30 degrees as well so now we’ve got a rotation that lines up
with the next line great here’s what that looks like back in our main comp to
get the warping on this comp I’m going to add the effect twirl now this is a
really fun effect I definitely recommend you just go in and play with all the
different settings I ended up with the angle of 120 and the radius of 100 so it
fills our entire comp we can easily push this angle further to get like a really
intense spiral now let’s create our eye shape by double clicking on the eclipse tool up here double clicking on the shape up here we’ll create a shape that
fills our entire comp let’s call that eye because we always label our layers and
if we toggle down to its path we need to right-click and select convert to Bezier
path so we can make some adjustments I’m gonna select my convert to vertex tool
over here and I’m just gonna click on the left and right and Bezier points and
clicking on them will remove their Bezier handles and create this nice
almond shape that we see and now if we set its blending mode to stencil alpha
will turn everything underneath it and that layers that transparent that isn’t
included within the shape so everything not in that shape becomes transparent
let’s duplicate that again and let’s change the blending mode back to normal
go back to our pen tool and I’m going to adjust this top handle and drag that
down to create a nice eyelid I’m gonna fill out with some gray and now our base
animation is complete let’s get ready for printing I duplicated that comp to
create a printer-friendly version so I didn’t waste any black ink so I made the
black fills very pale gray and then added a black stroke to some of the
circles and then made a new comp with this layer with some additional
information that I wanted to be on each printout I created these registration
marks down here which just masks over a comp with two rectangles in it so that
we just get those crosshairs and then I’ve also added a frame counter on the
top left here just so I know what order the frames are gonna be in when I import
them and scan them back in and you can add this by simply adding the time code
affect that I’ve added to an adjustment layer and then added this to the render
queue and then said as output module to be a PNG sequence which will render an
image for every frame I traced over these using this Huion A4 light pad
Huion sent me this and this was the first time I used it if you don’t have a
lightbox you can trace over your guides by either holding your paper up to a
window using some very thin paper or just drawing straight over your
printouts a good lightbox does give you more flexibility and this one feels and
works great the build quality is nice and it’s very light it just plugs into a
USB port and you’re off running and I’m gonna trace over it with standard 80 GSM A4 printing paper the light pack comes with the clip but because I’m
going to be rotating this a lot and I’m not worried about damaging the top paper
at all I use two pieces of masking tape to keep them aligned the first thing we
need to do is mark down the frame number and trace over the registration marks as
closely as possible and they’ll make aligning them in after-effects a lot
easier from here I traced over the outlines for each of the frames and once
the outlining is done we can turn the light off and start the rendering now
this is the part that takes a lot of time it took me about 15 to 20 minutes
for each frame which for 12 frames came out to just under four hours so a
perfect time to spend the afternoon catching up on podcasts or just
contemplating your existence and asking yourself Am I just a render engine made
of sentient meat? I put another piece of paper under my right hand as well to
stop me smudging it as I drew I wasn’t too careful about being precise because
the whole point of this was to make it look hand-drawn and give it some unique
texture that I couldn’t fake in after-effects towards the end I started
to fear that the way I was shading them made the dark areas look a bit like a
doughnuty sphincter so please don’t mention that in the comments I know it’s
a bit sphinctery in the middle but leave it at that once they were all done
I scanned them in and imported them into After Effects so I imported them into a
comp and then added some guides to make aligning them up a little easier but just
set the Anchor Point up into the corner here where our registration mark is and
then just kept nudging the rotation until it lined up with all the others
and this is close enough and here’s what the scanned in files look like I was
pretty happy with it it’s pretty close to what I had imagined the boil and the
texture feel really nice maybe I imagined it a
tad less sphinctery but that’s the joys of animation happy accidents I think it
kind of looks cool with the you know the boiling of the registration marks and
even with the tape as well I cleaned it up by adding a mask just around the eye
to clean up all the smudges and registration marks and all that other
stuff and then I had a take curves effect to increase the contrast and that
was pretty much it for cleaning it up I decided to play around with duplicating that comp and offsetting each one by a frame so each frame has all 12 drawings
in it this I thought looked really cool and I
was really trying to milk those frames for all they were worth just to make
myself feel a little bit better about spending so much time drawing them also
try laying them out in the circle which I thought looked kind of neat and then
rotating that circle looks kind of neat as well I landed on this square one with
12 copies being my favorite combination to put on social media it was close
enough to see that pencil textures in the eyeball but had enough copies so it
still had a bit more impact it took about six hours all up to get this
result i did learn a bunch and had some fun along the way and also we’ve got
something that I couldn’t have done just inside a computer but let me know was it
worth it I made a short playlist or some related videos that’ll think you’ll
enjoy if you’re better this far I’ll see you in the next video and please
consider subscribing if you’d like more of these videos every week subtitle: Zoe J Marriott

Only registered users can comment.

  1. Damn dude i never comment on videos but, you are legend i always get something new from your videos they are small easy to watch and very educational thanks man keep doing it and help us grow as fellow creators.

  2. thank you soo much for your tutorials . but one request from me oh not me from us that can you please make a short animated film and than show us the process including whole tutorial. please !!

  3. ouu men! I enjoy it very much! I like this hand made work is so so incredible and diferent final look is awesome! thanks for inspiration, keep it up!

  4. I quit animation to become a programmer but you make me love animation again.
    In return here is something I've applied in AE – heart shape layer ❤️
    Paste this expression on the path property of a shape layer (later you can bake it with the key assistant to have them editable):

    resolution = 60;

    cycles =(resolution/(resolution*0.19))+1;

    draw = thisComp.duration/(thisComp.duration*resolution/cycles);


    for an animated drawing of the path switch draw line above for this one

    draw = time/(thisComp.duration*resolution/cycles);


    points = [];


    a = draw*i;

    r = thisComp.height/50;

    x=r*16*Math.pow(Math.sin(a), 3);




    createPath(points, inTangents=[],outTangents=[], is_closed =false);

  5. Thank you, Ben, a lot! Thank you for sharing your brilliant ideas and knowledge. In addition I would like to mention your outstanding way of teaching, your sense of humor and lightness in your the way of speaking, really your tutorials have therapy effect even!)))

  6. Noticed you using the mouse to define your work area.

    One of those tiny tricks that ends up saving a tonne of time is the keyboard shortcuts 'b' and 'n', to set the start or end to wherever your playhead is.

    Your videos are awesome by the way.
    Really helpful and clearly presented.

  7. I like it!

    <captain obvious> For a half-way compromise between authentic-hand-drawn look and time spent, you could import the after effects reference frames into any app that has half-decent natural media brushes, e.g. photoshop or clip paint studio, and trace them by hand there, then reimport (without having to futz around with rotation and a light table)

  8. Thanks for the tutorial. How big is your lines comp? and your line in the lines comp? it cuts off when I apply the twirl effect in the main comp

  9. Wow. There are always points in your life when you think you've seen it all, or things start to stagnate within your sphere of visibility. Then, someone comes into that sphere that completely breaks changes your perspective and you're amazed. That's what this is.

  10. Another excellent video – you are an inspiration. As an optometrist looking to animate – your videos have given me ideas and have allowed me to create some unique content. Thank you.

    FYI: as an eye expert…the iris is actually a sphincter muscle – so your drawn appearance is actually quite accurate.

    Keep up the excellent work!

  11. I love these videos. Don´t worry about spending that much time because of every time you draw you get better and better. These videos are incredibly needed on Youtube!! Thanks so much for that @benmarriot

  12. Ben I swear, you're a fffing hero! I'm soo gonna give free knowledge all around the internet buddy, because we need more people like you, like us! Thanks for all

  13. Until you’ve mentioned the doughnut thing, I didn’t really see that, but now all I see are doughnuts coming my way 😂
    PS you are amazing, i love your work! Sending love from Poland 😁

  14. Hi Ben, love your tutorials. Although I have a problem with your keyboard shortcuts. Does not match mine at all. Also when looking at the keyboard shortcuts I dont have these setup like you have.
    Have you edited them or downloaded a preset somewhere?

Leave a Reply

Your email address will not be published. Required fields are marked *