How to Composite a “Front-Light / Back-Light” Shot In Adobe After Effects CS6

A few years ago, my friend Drew Christie re-introduced me to the work of John Taylor, a folk artist and sculptor from Orange County, California.  I instantly realized I’d seen his work before at the Henry Art Gallery in Seattle when I was much younger, and I remembered being enthralled by his sculptures of historic ghost ships, whales and old vehicles pieced together from scraps of wood, found objects, old computer parts and random junk.

When I started working on my Thesis film at CalArts, I began thinking about John’s ships a lot.  I remember looking them up online for inspiration and when I saw that he also lives in Southern California, I got up the courage to email him directly.  To my surprise he responded promptly with an extremely friendly email and he invited me to his home where I was able to see his workshop in person.

Later on I began to imagine the movie opening with shots of a ghost ship like John’s, but I wasn’t quite sure how I’d go about compositing something like that into the After Effects comps I’d built out of live-action footage and photo-collage.  To cut a long story short, I ended up taking another trip to visit John and to my excitement, he offered to lend me his sculpture of the Charles B. Hill, a Detroit freighter from 1906.   After that, all I had to do was figure out how to shoot it and composite into my shots.

I remembered learning about a technique for shooting stop-motion in Helder K. Sun’s Cinematography and Lighting Class at CalArts called “front-light / back-light,” which creates amazing mattes for compositing models and puppets.  However, Helder never taught us how to composite the footage once we’d shot it.  A few weeks ago, my friend Quique Rivera figured out how to work with “front-light / back-light” footage in After Effects.  After he taught me I started experimenting heavily with the technique, and I thought I’d do a blog post illustrating the process I used to composite together this shot I animated using John Taylor’s sculpture of the Charles’ B. Hill:

I made this shot on a Canon 5D Mark II with a 100mm Canon L-Series Macro Lens.  I captured all the images frame by frame in Large Raw + Large Fine JPEG using Dragon Frame, a Stop-Motion software designed and developed by Jamie Caliri, a CalArts alumni.  I then composited everything in Adobe After Effects CS6.  Both front-light and back-light exposures were set to 320 ISO with 4s shutter and an f-stop of 32.  It’s true the exposure time was painfully long, even with two 2×2 Kino-Flos placed relatively close to the ship and the screen.  But, this way I was able to achieve a deep focus at a 320 ISO, which is supposedly the sweet spot for the Canon 5D Mark II.  If you’re curious, here’s how I set up the shot in After Effects:

1.)  This is a still from the front lit footage.  As you can see, the white board looks grey when the back-light is off.  Having said that, the wheelhouse windows are bright white because I rigged two small LED lights on a piece of armature wire to shine through them.  That way the back-light matte will make the windows semi-transparent allowing me to easily composite a character inside the cockpit later.  This is something I tested out in After Effects first before making the decision to shoot it that way.

FL_BL_01

2.)  Here’s the same still from the back-light footage.  I added heavy levels and curves  to boost the contrast and kill any gray colors on the white board.

FL_BL_02

3.) Once you’ve placed the back-light footage above the front-light footage, all you have to do is choose Luma Inverted Matte, under the TrikMat drop down menu and “voila!” you have a perfect matte that moves along with your footage and doesn’t wiggle around the edges like keyed green screen or blue screen footage.

FL_BL_03

4.)  Finally, because I animated the camera movement by hand, I used Warp Stabilizer in After Effects to smooth out some of the jiggling motion.  Also, because I shot this on a 100mm Macro Canon L-Series lens on a Canon 5D Mark II body there was a slight bit of flicker due to the mechanical closing of the aperture for each photograph.  This could have been avoided by unscrewing the lens half way to disengage the connection to the camera body.  But, because the 100mm Macro is physically quite long, I was nervous about it falling off and smashing on the floor so I decided to fix the flicker  in post using Auto Levels in After Effects.  I also tested this prior to shooting and all I had to do was readjust the curves to regain the original look.

FL_BL_04

It’s a pity I didn’t take any production stills, but I finished animating this shot at 6AM and I had no energy or cell phone battery left to take photographs of the setup.  As a result, a description will have to do.  The entire shot was made with a geared tripod head screwed onto 10 foot animation slider track.  However, I only used  6 inches of it and I marked out my animation increments on a piece of paper tape stuck along the track using a miniature architects ruler.  Then, I lined up part of the model with the edge of the frame to animate the pan of the geared tripod head.  As you can see with a little Warp Stabilizer and some After Effects work I was able to achieve something almost as clean as a motion control shot.  Therefore, I feel like this could be interesting for anyone wanting to make inexpensive but smooth camera movements in stop-motion in order to take advantage of frame by frame techniques like “front-light / back-light.”

Of course, the down side to using this technique is you have to manually animate everything frame by frame and the camera movements have to be extremely precise.  The ideal way to do “front-light / back-light” is to use a Motion Control Rig with a Chauvet light controller box hooked up to a DMX box hooked up to Dragon Frame.  Then you program Dragon Frame to automate the lights and the exposures.  Most likely, very few people who are reading this will have access to any of these things let alone Motion Control.

However, the Chauvet box at CalArts has been broken for quite some time so I’ve never been able to automate the lights with the DMX box.  Therefore, I’ve always manually switched them off and on, which is time consuming, but it works fine.  I have used both Motion Control and manual animation for these kind of camera moves and both work fine.  MOCO is much faster and the movement much more precise, but renting a MOCO stage outside of CalArts would be extremely expensive and Kuper, the MS-DOS software that runs most MOCO rigs, has a pretty steep learning curve.

To set up a “front-light / back-light” shot you first light your model so it matches the scene you’d like to composite it into.  Then you blast a diffused light on a white reflector board behind the model so that it’s completely white diffused and devoid of hot-spots.  Then you animate the camera and set up Dragon Frame to take two different exposures, one with the front-light turned on and the back-light turned off, and one with the front-light turned off and the back-light turned on.  As I said earlier, if you don’t have a DMX box and a Chauvet you’ll have to manually turn the lights on and off yourself.  I suggest setting up two multi-taps / power strips right next to you and flipping the switch each time.   This is method is much safer because you won’t risk bumping your set by running around and switching on and off your lights.

The trick to getting the lighting right is to make it so there’s no spill from the white board on the model.  But, this is actually pretty forgiving because you can push the contrast of the back-light shot later on in After Effects.  As long as the black parts are black, you won’t get transparencies in the rest of the model.  If the lighting is decent and you composite these two pieces of footage using the Luma Inverted Track Matte in After Effects, the result will be much better than any green screen or blue screen key you’ve ever pulled.

Actually, I’ve found that although this whole process is extremely tedious, it’s much less time-consuming and more enjoyable on the post production end, because the matte is so perfect and instantaneous.  Even if you don’t plan on moving the camera, I feel like the setup is almost worth it for a single photograph.  “Front-light / back-light” will especially work wonders for a matte of something extremely complex like hair or fur.  After all, the thought of cutting out a single image of complex hair in Photoshop gives me a headache.

Stayed tuned and I’ll upload more “front-light / back-light” shots and production stills from future shoots.

Festival Success & Updated Links

Several weeks ago I published a blog post entitled Animation Festivals, After Effects & Amazing CalArts Films.  In the post I explored several possible reasons why my film The War Profiteers has been such a failure in the festival circuit.  Ironically enough, The War Profiteers was finally selected to screen at a major film festival earlier this week.  This particular festival has since asked me to password protect the film on Vimeo and replace it with a trailer.  You may also have noticed that several other films from my previous blog post have been password protected.  This is because those films were also selected for festival screenings.  Unfortunately, I have been asked not to reveal the name of the festival my film was selected for until after the press-release has taken place.  In the meantime, this post is meant to update my previous post, congratulate the filmmakers and further advertise their work by posting trailers for their films.

The War Profiteers Trailer:

Drifters Trailer:

Meejin Hong told me she decided to re-edit Sugarcoat so she’s password protected it in the meantime.  So, instead of posting a trailer here’s her 2011 Reel:

Calvin Frederick’s film Bermuda was also selected into a major festival and he was asked to password protect it.  However, he hasn’t made a trailer yet so I decided to post Hangin’ With Mr. Kuper instead.  Hangin’ With Mr. Kuper is an incredible Motion Control, aka MOCO, exercise he developed for the CalArts Motion Control workshop, previously taught by the legendary MOCO operator Helder K. Sun, who became too busy to teach the class at CalArts when he was hired as the Director of Photography for the animated television series Robot Chicken.  Just to see how bonkers of a camera move he could make, Calvin animated a ball on the most complicated path of an Anatex Original Roller-coaster.  The exercise is named after Kuper, the MS-DOS software that’s used to control most motion control rigs including the one at CalArts. When I first posted the photograph of my girlfriend and I sitting next to the CalArts MOCO rig on Facebook, Kirsten Lepore left a comment that just said, “Hangin’ with Mr. Kuper.”  I’m not sure who made up the phrase, but now whenever you ask a CalArts MOCO user what they’ve been doing they usually say, “Hangin’ with Mr. Kuper.”

In my previous post I mentioned Quique Rivera’s masterfully crafted new stop-motion film El Delirio Del Pez Leon.  Here’s the trailer:

Also, Drew Christie told me that his film Song of the Spindle has most likely run its course in the festival circuit and he’s uploaded it online.  It’s an awesome film and has since become a Vimeo Staff Pick.  Check it out:

Animation Festivals, After Effects & Amazing CalArts Films

Jeanette Bonds, a good friend of mine from CalArts, spent the last few months as a programmer for the 2012 Platform International Animation Film Festival that took place two weeks ago at the Redcat Theater in downtown Los Angeles.  Today she told me that animation film festivals actually check the online views of submissions during the selection process.  Apparently, the higher the online view count, the more likely the film is to be selected.  I must admit I was a bit surprised to hear this because I always thought festivals would shy away from accepting films that had premiered online out of fear that people would be less interested in seeing the film at the festival if they knew they could just watch it online.  If that was ever the case, it certainly seems to have changed.  For example, my friend Drew Christie had his film Song of the Spindle on Vimeo.  But, when it was selected into the competition at Sundance, they simply asked him to take it down and make an Official Trailer.

During my first year as an MFA in the CalArts Experimental Animation program, I finished an animated short film entitled The War ProfiteersThe film was made with hand-drawn characters that were digitally cut-out in Photoshop CS5 and composited and animated in After Effects CS5.  When I finished the film, I decided to follow in Drew’s footsteps and I made a trailer before submitting it to festivals.  At that point I was still afraid the festivals might reject it if they knew it had already premiered online, so I went ahead and submitted while keeping it password protected on Vimeo so I could show it to family and close friends.  Lo and behold, it was rejected from nearly every festival I submitted it to anyways.  At first this didn’t really come as a much of a surprise since I’d heard how difficult it can be to get into that first festival, and besides I was only submitting to the most famous international animation festivals so the competition was probably pretty steep.  But, at the same time, it still seemed strange that after 30 submissions not one decent festival would take my film.

While trying to convince myself that getting into festivals wasn’t all that important, I started thinking more and more about why the selection committees were so turned off by the film.  It went over farily well at school and was even accepted into the CalArts Experimental Animation Showcase where it had it’s first theatrical Premiere at Redcat in LA.  And, despite the film’s rather violent and racy content, this led me to believe that people were being honest with me when they said they genuinely liked it.  In fact, when I started talking to people about all the festival rejections, many faculty members, friends and fellow animators, who’d already toured the festival circuit with their own work, were surprised to learn that the film was rejected by so many festivals.  So, in order to better understand this, my girlfriend Grace Nayoon Rhee, who’s hand-drawn film View was exhibited in over 40 international festivals, sent The War Profiteers to Nobuaki Doi, a Japanese journalist, who writes extensively about world animation.  This is what he had to say about it…

“The film reminds me of the attraction of Disneyland (The Haunted Mansion) and some fantasy films made in Hollywood mainly because of the sound. For me the good thing in short animation is that you can rule everything by your own law with the maximum delicacy. The film uses so called digital cut-outs and their movements seem to be made digitally. The problem is that you can find the same rhythm of the movement in many films all around the world. This phenomenon is very strange because animation is the art of making movement and each animator and each film should have an unique rhythm. Of course there is no need to animate everything by hand (for example Phil Mulloy uses digital movement very effectively) but it would be nice to think more consciously when using digital movement. The same can be said with the camera movement, I think… It can distract the viewer’s attention because the movements are too smooth. Of course it is possible that the filmmaker didn’t put importance to such elements. So please forget it if my impression is beside the point.”

Although it pains me to do so, I must agree with Nobuaki.  As I said earlier, The War Profiteers was made almost entirely in After Effects and perhaps it’s true that the movement is too digital  and smooth.  In fact, Nobuaki’s response was one of the main reasons I created the Hand-Drawn and Organic Looks Tutorials, which share several methods for making digital animation done in After Effects and Photoshop look more analog.  However, at the same time I feel like it would be a pity if my film’s failure in the festival circuit was simply due to the quality of the movement.  I’d like to think there are other causes such as the content, the pacing and the length.

At the risk of making excuses for my work, I must admit that The War Profiteers was a huge learning experience for me as it was the first film I made entirely in After Effects.  Even though the program digitally interpolated the in-betweens from keyframe to keyframe, it still took me a year to make it and nearly a week of invading several computer labs to finish rendering the film.  I did all of my renders on over 12 6-core Mac Pro towers at a time and since the film was created in one long digital camera move I wasn’t able to render out individual shots as I finished them.  Unfortunately, I had to wait until the film was entirely finished and I rendered out chunks without changing the camera move or animation so that the pieces would fit back together. And, after I spent a week doing one full render that had some glitches in it, I was forced to go back into the labs and do it all again.

I believe it was the day after I started my second render when I noticed my friend Oliver Franklin Anderson using the Wiggler plug-in in After Effects to add a slight bit of jitter to all the keyframes in his film Hollow.  I loved the quality it gave the movement and I remember telling him, “Man I wish I’d put that on all the keyframes in my film.”  Now that I look back on it, the thought of going into my hideously complex After Effects project and adding wiggler to every group of keyframes on every single layer of every character in every comp, gives me a headache.  But, maybe Nobuaki  was right and I should have at least wiggled the camera.  Having said that, I think it’s important to mention that Oliver used Wiggler and his film has definitely been much more successful in the festival circuit than mine.

However, this brings up an interesting point.  I’ve noticed that in the art world there tends to be three kinds of people, those who believe technology is the future, those who prefer to stay “old school” and those who are able to tastefully mix the old with the new.  While interning at Adobe last summer we went to a great talk with Russell Brown, the Sr. Creative Services Manager at Adobe.  The talk was more theater than anything, and his main point was that, “You shouldn’t let technology get in the way of a great idea.”  He then proceeded to reenact his first appearance on the Today Show with stick puppets and an overhead projector just to prove that we didn’t need a computer to watch the video on youtube.  The result was hilarious and it made me rethink my creative process.  For instance, If I really wanted The War Profiteers to have natural movement, than I should’ve shot the film under a camera, or at least pushed After Effects to wiggle my keyframes for me.

Interestingly enough, another CalArts graduate and acquaintance of mine, Einar Baldvin, also animated his film Catatonic entirely in After Effects only he moved the digital cut-outs frame by frame by hand the same way you would when animating under a camera.  I love this film and the movement looks amazing.  I remember I tried an early animation test this way before starting The War Profiteers, but I thought it was too time consuming and I gave up.  I don’t know all the details of Catatonic’s festival life, but it was just in Platform Film Festival.  However, Einar told me that he isn’t really working in After Effects any more though and his latest film Baboon is entirely hand-drawn and has been accepted to several top-notch festivals including Annecy and Ottowa.

During an intermission at Platform, I also talked to a recent CalArts graduate named Kirsten Lepore to hear her opinion on submitting to festivals.  She highly encouraged me to put my film online saying that, “some films just aren’t festival films.”  Kirsten made an extremely successful film during her first year at CalArts called Bottle that now has 1.2 million plays on Vimeo and received the Vimeo Community Choice Animation award.  Since then she’s been getting tons of offers for freelance work.  In her case, I’d say she’s a perfect example of how the internet can be a venue in itself.

On another note, Bottle is a stop-motion film that’s shot entirely on location and animated by hand with very minimal digital effects or compositing.  However, if you watch the film closely you’ll notice that as the sand man is animated along the beach, the waves move like real live-action waves.  But, if the film was animated on location in stop-motion then the waves would be coming at a different timing every frame.  I’m not sure, but I’m pretty positive that Kirsten used After Effects to mask out the sand man and composite live action waves in the background as she animated her puppet along the beach.  I think this brings us back to what Russell Brown said about not letting technology get in the way of a good idea.  She used After Effects only for what she needed it for.  In other words, if we use technology for what it does best, we’ll get the best results.

So, in honor of the The War Profiteers online premiere, I’ve decided to pretend this post is my own miniature festival selection.  Here I would like to celebrate the work of my friends and colleagues by sharing some of my favorite CalArts films that I think use Adobe Software in an especially tasteful manner.

Like all her work, Grace Nayoon Rhee painstakingly animated this entire film by hand.  It was then scanned and edited in After Effects with minimal compositing.  For the last shot where it’s raining triangles I made her a really quick 3D camera move in After Effects with some solids and masks and she rotoscoped over it by hand to get the crane shot to look right.  In the end there were so many triangles to draw, I also helped her render a bunch of them in charcoal.

Kangmin Kim was an MFA3 when I was an MFA1 and we all knew that he was one of the most amazing stop-motion artists at CalArts.  His film 38 – 39° C has since received over 300,000 plays on Vimeo, become the “Vimeo Staff Pick” and remains one of my favorite stop-motion films of all time.  It was made entirely by hand with paper cut-outs and replacement animation in real 3D sets made of paper.  He then edited the film in After Effects and composited small textures, motion lines and accents on the movements.

My friend Quique Rivera Rivera made this stop-motion film before coming to CalArts for an art exhibition called “Carry on: Puerto Rico Inspected.”  It’s also animated entirely by hand, edited and composited in After Effects.  His most recent work has become even more advanced and his compositing skills have increased ten-fold.  Keep your eyes peeled for the online premiere of his newest film El Delirio del Pez Leon.

I saw The Pirate of Love at both the CalArts Showcase last year as well as the Platform International Film Festival and I was blown away during both screenings.  It’s currently in festivals now so only the trailer is available for public viewing, but I highly recommend checking this film out when it goes live on the internet.  That said, Sara Gunnarsdottir has an extremely personal and unique way of compositing her hand-drawn work using After Effects and Photoshop.

Ethan Clarke‘s work is also hand drawn, but he if I understand correctly he does it digitally using a tablet and colors his work digitally as well.  The amazing thing about Ethan’s work is that he has a tendency to push the 3D capabilities in After Effects to the next level.  For example, the trees in the forest from Drifters are incredible and his usage of the train windows to reframe the story as they’re driving through the forest give the film a totally unique graphic-novelesque quality.

Meejin Hong‘s Sugarcoat was an extremely experimental production with rhythm and editing that I love.  If I remember correctly she utilized countless different techniques including, but not limited to, hand-drawn animation, direct techniques, projection mapping, motion control, cell animation, live-action, After Effects, Photoshop and Flash.

Sean Buckelew is now an MFA2 at CalArts, but he was still working on this film as an MFA1 and I believe it’s been in production for over 2 years.  The film is over 20 minutes long, it’s entirely hand-drawn and rendered with colored pencils.  Due to festival submissions only the trailer is visible, but if you watch it closely you’ll notice heavy After Effects compositing, digital camera blurs and Photoshop work on the image sequences that make up the character animation.

Ruah Edelstein is an incredible painter and she utilizes both Photoshop and After Effects in a way that very much inspired me when I first came to CalArts.  I think she has an amazing way of making her paintings move and layering up images to create dense impressionistic atmospheres.  In this film I’m extremely taken aback by her use of photographs, which appear to be digitally painted over and altered, or possibly just digitally layered over other organic textures.  Some of the shots from this film have been very inspirational for the project I’m working on at the moment.

The Corporate Eggspert is hilarious.  I had no idea what to expect when I saw this in the 2011 CalArts Showcase last year and I remember laughing so hard I had tears in my eyes.  I knew Melissa Piekaar for two years during the times we spent working together in BB4, the stop motion building at CalArts, and her puppets were always hilarious, but I never saw any of her animation until this film.  What I love the most about it is the mixture of mediums.  It starts in live-action with heavy, made-cheesy-on-purpose After Effects work and then goes into this awesome stop-motion world where the comedic timing completely shifts from the insane live-action world.  Then in the end, the egg jumps out into an After Effects composition so kitsch and cheesy you can’t help but break down in laughter.

Jason Carpenter is possibly one of the best advocates for Photoshop and Flash productions.  His film The Renter was an entirely paperless production.  Before animating, he did a rough animatic in Flash and then created the backgrounds in Photoshop and did all the animation digitally on the computer.  To date, The Renter has won 18 awards/nominations and has screened at more than 85 film festivals worldwide.  It’s a Staff Pick on Vimeo and has 49,poo plays.

Jeanette Bonds made 14.7 psi using one photograph of stars duplicated layered and dissolved on top of itself in After Effects.  According to Michael Ashley Schulmann, “Jeanette Bond’s composition of shifting light and movement against a perfect singular droning sound wonderfully immerses the viewer in a new environment that entertains the mind by causing one to continuously guess the visualization: Are you 37,000 feet up or 1 inch away? Is it a field of stars, shifting sands, millions of people hurrying, a flurry of bubbles, a journey, a drift?”

Calvin Frederick‘s Bermuda is probably the only film I’ve listed here that utilizes absolutely no computer generated effects or compositing.  The entire film is an in-camera illusion created with, projections, mirrors and the wonderful CalArt’s motion control rig, which was used on Star Trek the Next Generation and Deep Space Nine before it was donated to CalArts.   The Motion control rig is a gigantic camera arm  designed for programming and repeating stop-motion camera moves.  It runs on DOS and once you learn it, it’s sorta of like animating a gigantic After Effects camera in real-life 3D space.  Calvin has since become a master of operating the Motion Control rig and he’s taken over teaching the workshop at CalArts.  I included this film here to back up Russell Brown’s ideas about not letting software get in the way of a good idea and also because Bermuda is ironically one of the most digital looking films I’ve posted here.

Manuel Barenboim is a close friend of mine and I was amazed as I watched this film grow during my first year at CalArts.  Here Be Dragons was animated using physical projections of digital and hand-drawn animations on landscapes and plants.  The dinosaur like creatures were rotoscoped over real footage of animals and altered in Photoshop using a Syntique tablet.  The lights that come and destroy the creatures are made of animated and colored After Effects masks and the characters are destroyed by animating displacement masks in After Effects.  This film is a true hybrid between the digital and the analog.

Moises Jimenez is a master of After Effects.  He had ways of using scripts put 2D layers together to create 3D objects back in After Effects CS5 before ray trace rendering came out.  If you look closely, you’ll notice the pack of cigarettes in the living room is animated using this technique.  When I asked Moises why chose to create this entire film in After Effects and not use a piece of 3D software he told me, “you know, you just work with what you got man.”

Rigging a Puppet Made of Image Sequences in After Effects CS6 (PART 2)

This Tutorial is part of a series.  Please read my Introduction to Hand-Drawn and Organic Looks Tutorials before proceeding.  The first part of this tutorial can be found here: Creating a Puppet Made of Image Sequences in Photoshop CS6 (PART 1).

INTRODUCTION:

This tutorial explains how to utilize the assets we exported at the end of  my last tutorial Creating a Puppet Made of Image Sequences in Photoshop CS6 (PART 1).  My goal is to teach you how to import these still images and image sequences into After Effects CS6 to rig the puppet we created in the previous Photoshop tutorial and get it ready for animation.  However, if you didn’t finish exporting all of the layers to files yet, I’ve provided all of the exported assets from the previous tutorial below.  This includes a finished After Effects Project File in case you get lost and want to check it out to see how the puppet is put together.  Please download and unzip them before you continue:

Puppet Assets for After Effects CS6

EXAMPLES:

Apparently there have been several FAQs on the Photoshop forums from parents or grandparents, who want to know how to cut out their child’s head and paste it onto another image.  I made this animation using a baby picture of mine to show that it’s also possible to cut out your child’s head and animate it in After Effects.  However, I just used this baby picture of mine as a guide.  In the end I ended up drawing over it and adding looping color and charcoal textures to give it a more hand-drawn feel.

Here’s another animation of a puppet I made using the same technique.  This one is very simple.  It’s just looping sequences of hand-drawn shapes and one digital watercolor texture parented over the face.

HOW TO RIG  A PUPPET MADE OF IMAGE SEQUENCES IN AFTER EFFECTS CS6:

[1]  First, launch After Effects and open the After Effects drop down menu in the upper left hand corner of the screen and select – Preferences – Import.  We want to make sure that the still footage we’re going to import later ends up being the same length as the composition so we don’t have to stretch it in the Timeline.  To do this, change your Import Preferences to match the screenshot below.

[2]  Now set up your workspace to match mine.  Go to Window -Workspace – Animation or change it in the Workspace drop down menu located in upper right hand corner of After Effects window.  Then, make sure that all of the panels with check marks in the Window menu are selected and docked into your workspace in the same locations as shown in the screenshot below.

[3]  Now, go to File – Import  – Multiple Files.  When the import Multiple Files window opens up, locate the unzipped assets folder you downloaded at the beginning of the tutorial and navigate to the “Image_Sequence_Exports” folder.  Inside, click the “Body” folder and click the first image of the sequence inside.  Match the settings to the screenshot below by checking “PNG Sequence” and “Force alphabetical order.”  Then click Open.  Because we selected Import – Multiple files, the import window will automatically pop up again.  Continue to import the other sequences in the same way until you get to the “Head” folder.

[4]  When you come to the “Head” folder, click and drag or hold down the Shift key to select the six solo PNG files shown in the screenshot below.  Leave both check boxes at the bottom of the window empty and click open.  Afterwards, you can continue to import the rest of the image sequences using the same settings we discussed in step 3.  When you’re done importing, click Cancel to exit the Import Multiple Files window.

[5]  Now that everything’s imported we need to interpret all of our footage.  However, we’re going to interpret the “Blink” image sequence slightly different than the rest so we’ll do that one first.  Right click on the “Blink” image sequence in the project panel and go to Interpret Footage – Main or press Option Command G on the Mac keyboard.  Make sure the frame rate is set to 24 and that it’s only set to Loop: 1 Time.  The reason for setting it to Loop: 1 Time is because that “Blink” image sequence is already an animated loop of a blink and we want to control when it blinks.  That way we won’t have the eyes blinking over and over again creating a fluttering eyelid effect.  To change this, match the settings to the screenshot below.

[6]  Next, right click on the “Body” image sequence and go to Interpret Footage – Main or press Option Command G on the Mac keyboard.  Make sure the frame rate is set to 24 and that it’s set to Loop: 1000 Times.  Because “Body” is an image sequence that we want to cycled over and over, it makes sense to set Loop number so high.  To change this, match the settings to the screenshot below.

[7]  After you’ve interpreted the “Body” image sequence, right click on it again and go to Interpret Footage – Remember Interpretation or press Option Command C on the Mac keyboard to copy the “Body” footage interpretation.  Now click and drag to select all of the image sequences except for “Blink”.  Since only image sequences can loop it won’t matter if we select the still PNGs or not.  Then right click on one of those image sequences and go to Interpret Footage – Apply Interpretation or press Option Command V as shown in the screenshot below.  This will paste the “Body” interpretation onto all of the other sequences.

[8]  Organize your project panel by going to File – New – New Folder and naming the folder “Head.”  Put all of the still PNGs inside it as well as the “Blink,” “Head_Charcoal” and “Head_Color” sequences.  Your Project panel should now be organized like the screenshot below.

[9]  Go to Composition – New Composition or press Command N on the Mac keyboard.  Then follow the corresponding directions in the screenshot below to set up your composition.

a.) Change the Composition Name to “Puppet”

b.) Set a custom width and height to match the Photoshop document we created in the previous tutorial.  This is just so we can build the puppet.  Later we’ll bring this puppet into a standard 1920 x 1080 composition, but while I’m doing the rigging I want to work in the original composition size.  Originally, I chose a 2000 x 2000 pixel aspect ratio so that if I wanted to convert my puppet into a 3D layers, for example, I could zoom in on the graphics with a camera and not have to worry about it getting too pixilated.

c.)  Change the frame rate to 24 frames per second.

d.) Set the duration to 30 seconds.  I like to work with longer durations to start with.  Then I change the beginning and end points of my work area once I’ve seen how long the animation is going to be.

[10]  Now click the “Head” folder you made and drag it onto the timeline.

[11]  Change the layer order to match the screen shot below.  If you don’t see the “Mode” or “TrkMat” columns then right click on the top bar that says “Source Name” and “Parent” and go to Columns – Modes.  If any other columns aren’t displaying like they are the in the screenshot below then right click again and make sure all of the same columns are visible.  After that, change the “Head_Charcoal” blending mode to Overlay and the “Head_Color” blending mode to Multiply.

[12]  Duplicate the “Head_Color” layer and move it above “Head_Charcoal.”  Then change the “Head_Charcoal” TrkMat to Alpha Matte “Head_Color.”

[13]  Change the layer names of the PNGs in the screenshot below by clicking each one individually and pressing return on the Mac keyboard.

[14]  Follow the corresponding directions in the screenshot below to position the eyebrows and set up their anchor points.

a.)  Select “Eyebrow_L.png” in the Puppet Timeline and then move it over the left eye in the composition window.

b.) Then press the Y key to activate the Pan Behind Tool.  Use this tool to grab and move the layer’s anchor point, which is the crosshair in the center of the layer handles.  Move the anchor point of the eyebrow to the right end.  Moving the anchor point is useful because it’s the point around which the layer rotates.  When we squint our eyebrows usually move with the forehead muscles above our nose.  Therefore, it makes sense to put the anchor point above the nose.

[15]  Follow the corresponding directions in the screenshot below to position the other eyebrow and set up the anchor point.

a.) Select “Eyebrow_R.png” in the Puppet Timeline and move it above the right eye.

b.) Then press the Y key and use the Pan Behind Tool to set the anchor point to the left end of the eyebrow.

[16]  Follow the corresponding directions in the screenshot below to finishing positioning your head layers.  The finished head should look like the screenshot below.

a.) Move the eyes into the sockets and change the anchor points so they’re in the center of each pupil.

b.) Move the “[Blink]” animation above the eyes.  The eyelids are a bit hard to see in the screenshot because they’re the same color as the skin, but you’ll see them when you’re moving them around.

c.) Press space bar to preview the 8 frame animation and make sure that the eyelids cover the eye sockets when they blink.  Now anytime you want the character to blink you can duplicate the “[Blink]” animation loop and move it around in the timeline.

[17]  Follow the corresponding directions in the screenshot below to parent the other head layers to the Head_Back layer.

a.) Select all layers except for the Head_Back layer and click one of the the spiral Pick Whip buttons to the left of the drop down menus in the “Parent” column.  Then drag the Pick Whip to the layer labelled “Head_Back.png.”  This will make it so that “Head_Back.png” is the “Parent” and all of the other layers you selected will become “Children” of the “Head_Back.png” layer.  That way when you change any of the transform settings in “Head_Back.png” all of the children are effected in the same way.  This is basically like  pre-comping all of the layers together without actually pre-comping.  this is extremely useful for puppet animation in After Effects because you often want to have all of the puppet layers in one composition so you can see how they relate to one another when you’re animating.

b.) Another way you can parent layers without using the pick whip is to select all of them and choose the layer you want to parent it to from one of the drop down menus.

[18]  Follow the corresponding directions in the screenshot below to add a frame randomizing expression to the Time_Remapping function for the three looping sequences in the Timeline.  This will create a randomness to the playback of the frames so that the same loops won’t repeat over and over again.  It will also give us control of sequence frame rates from within the expression.

a.) Make sure the playhead is set at the first frame of your work area.

b.) Right click the first “[Head_Color]” sequence in the Composition Timeline and go to Time – Enable Time Remapping or press Option Command T on the Mac.  Then hold down the Option key and click the little stopwatch icon next to the graph on the left of the Time Remap function.

c.) This will bring up an Expression box in the timeline.  Double-click the words “timeRemap” in the timeline to open the Expression editor box.  If you want the loops to play back randomly on “twos” then copy and paste the following frame randomizing expression into the box:

fr = 12; // frame rate;

numFrames = 8;

seedRandom(index,true);

seg = Math.floor(time*fr);

f = Math.floor(random(numFrames));

for (i = 0; i < seg; i++)

f = (f + Math.floor(random(1,numFrames)))%numFrames;

framesToTime(f);

If you want the loops to play back randomly on “threes” then change the first part of the expression to:

fr = 8; // frame rate;

This is an aesthetic decision that depends on how fast you want the images to cycle.  Press the RAM Preview button on the far right of the preview panel to play back the loops in real time.  The decide which timing you prefer.

d.) When you have the expression pasted onto the First Time Remap function, click Time Remap and go to Edit – Copy or press Command C on the Mac. Then select the other “[Head_Charcoal]” and “[Head_Color]” sequences and go to Edit – Paste or press Command V on the Mac.  This will copy the exact same Time Remap function with the same expression to the other two sequences.

[19]  Select all of the other image sequences and drag them onto the timeline below the head layers so that your workspace looks like the screenshot below.

[20]  Follow the corresponding directions in the screenshot below to add the frame randomizing expression to the Time_Remapping function for the rest of looping sequences in the Timeline.

a.) Click the Time Remap function from one of the previous clips and go to Edit – Copy or press Command C on the Mac keyboard.

b.) Select all of the sequences we dragged onto the timeline and go to Edit – Paste or press Command V on the Mac Keyboard.

[21]  Follow the corresponding directions in the screenshot below to turn the following sequences into Shy layers and hide them.

a.) Press the Lock switch on the following layers so we don’t accidentally move them when we’re animating.

b.) Since the [Head_Color] and [Head_Charcoal] sequences are essentially just looping textures for the face, we won’t need them taking up space in the timeline.  We can hide them by turning on the Shy Layers switch as shown below.

c.) Now click the Hide Shy Layers Button to hide those layers.  They won’t go anywhere and we can turn them back on at any time by toggling this button.  But, since we won’t be animating these particular layers it’s more convenient for us to hide them.

[22]  Follow the corresponding directions in the screenshot below to turn the following sequences into Shy layers and hide them.

a.) Select “Head_Back.png” in the timeline and move it along with the other parented head layers to the top of the composition.  This will give us some room to start positioning the other body parts.

b.) Press the Y key to activate the pan behind tool and move the “Head_Back.png” anchor point down towards the neck where the head would naturally rotate around.

c.) Reorder the Hierarchy of the layers in the Timeline so they match the screenshot below.  We want to make sure that the hands and arms are able to move in front of the face for example.  This of course can be changed depending on which layers you want to have in front.

d.) Then color code the different sections.  I usually set each individual set of limbs as a separate color, all of the head layers as one color and the body and neck as separate.

e.) Toggle the visibility of the indicated layers to off.  We’ll turn them back on as we arrange them one by one.

[23]  Follow the corresponding directions in the screenshot below to position the limbs and parent them together.

a.) Select each individual limb layer and position them the same way they were organized in the Photoshop document from my tutorial Creating a Puppet Made of Image Sequences in Photoshop CS6 (PART 1).  If you haven’t done this tutorial it should be obvious that “Upper_Arm_L” will be connected to “Lower_Arm_L” and that will be connected to “Hand_L,” etc., etc.

b.) Move all of the anchor points to the places where it would be most logical for the limbs to rotate around.  I’ve left all of the layers selected so you can see the color-coded anchor points as well as the position of the individual layers.

c.) Parent all of the layers shown below using either the pick whip or the drop down parent menu so that it matches the screenshot.  You might notice that “Foot_R” has been left un-parented.  And in fact, the body is parented to the Right leg and the chain of parenting goes down the right leg.  I realize it might seem more intuitive to have the body be the final parent, but the reason I did this is because if the puppet has to jump or walk, it’s much easier to animate if the ultimate parent is connected to the ground.  This way you don’t have to compensate to avoid skating, or the character looking like he isn’t connected to the ground.  Therefore, the “Foot_R” layer will be the ultimate parent when we finally add in the body.

[24]  Follow the corresponding directions in the screenshot below to finish rigging the character.

a.) Turn on the “Body” Layer and position it so it fits with the other limbs.

b.) Press the Y Key to activate the Pan Behind Tool and Change the “Body” layer’s anchor point so that it rotates around the “Upper_Leg_R” layer.  That way the parenting hierarchy can travel down the leg to the tip of the “Foot_R” layer.

c.) Select the specified layers in the screenshot and parent them to the “Body” layer.

[25]  Now that our puppet is finally set up and rigged you can start animating.  Because I’ve already touched on the basics of After Effects animation in my tutorial Making Motion Graphics Animation Look More Analog in After Effects CS6, I’ll let you go crazy with the project files I’ve provided you with.  But, before you start you should convert the Composition to 1920 x 1080 so you can render it to a standard size.  To do this right click on the “Puppet” comp in the Project panel and go to Composition Settings.  Change the settings to match the screenshot below.  Then click and drag the puppet’s “Foot_R” layer to recenter the puppet into the new comp’s new aspect ratio.

Creating a Puppet Made of Image Sequences in Photoshop CS6 (PART 1)

This Tutorial is part 1 of a series. Please read my Introduction to Hand-Drawn and Organic Looks Tutorials before proceeding.  The second part of this tutorial can be found here: Rigging a Puppet Made of Image Sequences in After Effects CS6 (PART 2).

INTRODUCTION:

This tutorial explains how to apply the same idea I used for my tutorial Working With Image Sequences in Photoshop & After Effects CS6 to create a puppet with separate limbs that are made of looping image sequences that can be animated in After Effects.  That way, instead of having static graphics for your puppet’s body parts, you can have randomly changing image sequences that will make your puppet look more like a hand-drawn character.  But, because your character is made of looping images you can save time by animating the looping limbs in After Effects like motion graphics so you won’t have to redraw every frame to create the animation.  You can see examples of this in the videos I’ve posted below:

EXAMPLES:

Apparently there have been several FAQs on the Photoshop forums from parents or grandparents, who want to know how to cut out their child’s head and paste it onto another image.  I made this animation using a baby picture of mine to show that it’s also possible to cut out your child’s head and animate it in After Effects.  However, I just used this baby picture of mine as a guide.  In the end I ended up drawing over it and adding looping color and charcoal textures to give it a more hand-drawn feel.

Here’s another animation of a puppet I made using the same technique.  This one is very simple.  It’s just looping sequences of hand-drawn shapes and one digital watercolor texture parented over the face.

HOW TO CREATE A PUPPET MADE OF IMAGE SEQUENCES IN PHOTOSHOP CS6:

[1]  Before we proceed, I recommend installing the Adobe Extension Manager 6.0.2 update.

[2]  In order to install custom extensions for Photoshop, you also need to download and install the The Adobe Exchange Panel.

[3]  Once at the Adobe Exchange website click the blue download button in the upper left corner of the screen.  On a Mac, the installer should automatically save to your downloads folder.  Now install the Adobe exchange panel.

[4]  Once installed, open up Photoshop and follow the corresponding directions in the screenshot below.

a.) Set up your workspace to look like mine.  You can do this by making sure the panels outlined in RED have check marks next to them.  Some of them will already be in your workspace by default, so just select any of the panels you don’t see and drag them around your workspace until a blue line shows up along the edge where you want to dock the panel.  The most important panel for this tutorial is the timeline panel, which I’ve docked at the bottom of my Workspace.

b.) The panels outlined in GREEN should automatically be there as tabs in some of the other the panels, but if they’re not you can add them.  The most important tab is going to be the history, which we’ll actually use as part of our workflow later on.

c.) Finally, go to Window – Extensions – Adobe Exchange as outlined in YELLOW in the screenshot below.  You might notice that I have several other Extensions already installed.  Don’t worry about this for now and simply select Adobe Exchange.  This will open the Adobe Exchange panel that will allow you to download as many extensions as you’d like.

[5]  Once the Adobe Exchange panel is open, follow the corresponding directions in the screenshot below to download the AnimDessin Panel by Stephane Baril.

a.)  The Adobe Exchange panel opens next to the other open panels. You can also drag and dock the AnimDessin panel to right if you’d like.

b.)  Next click the tab labelled “Free.”

c.)  Finally scroll and find the AnimDessin Extension by Stephane Baril.  Double click it to go to the AnimDessin window.  Then click the  yellow button that says “Free” below the AnimDessin name and logo to download the AnimDessin panel.

[6]  On a Mac, the Adobe Extensions Manager should open automatically otherwise you may need to locate the .zxp file in your downloads folder to open it.  Afterwards, follow the directions in the Adobe Extension Manager to Install the panel.  When the installation’s complete, restart Photoshop.

[7]  Because this tutorial would normally require a lot of hand-drawing on a Wacom tablet, I’ve provided the following assets to help you get started.  Download them here:

Puppet Assets for Photoshop CS6

[8]  You’ll have to unzip the assets first, but once you get them open you should see two files, one called Puppet_Final.psd and one called Puppet_Tutorial.psd.  I included the final puppet character in case you mess something up in the tutorial version and want to see how things are put together.  But, for now we’re going to be working with the file called Puppet_Tutorial.  So, double click that file to open it in Photoshop.  Once Photoshop is open go to Window – Extensions – AnimDessin, to open Stephane Baril’s 2D Animation panel.

[9]  When I opened the AnimDessin panel, it was attached as a new docked panel next to my buttons.  But, I want it as part of my buttons, so I can close it and open it whenever I want.  In order to do this, click the top tab of the AnimDessin panel and drag it over to the strip of buttons next to the Brush Presets panel.

[10]  Once you’re able to toggle the AnimDessin panel on and off with the above button, we can get started using it.  In our case we’ll only be dealing with the following four panel steps:

“2 Create “Video Group Layers”

“3 New Animation Frame”

“4 Onion Skinning & Shortcut options”

“5 Keyframe Duration & In-Between.”

If you’d like detailed information on using Stephane Baril’s panel I’d highly recommend checking out:

Stephane Baril’s “Anim_Dessin” Vimeo tutorial 

However, I must admit that after watching the above tutorial I was originally slightly confused by step #2 on the panel.  So, after a few brief messages between Stephane and I, he decided to make another tutorial and patch to help clarify this step.  In the second video, he basically explains how to set up and use the Video Group Hack button by editing a short Action the first time you use the panel:

Patch “Anim_Dessin” panel 2.0.1 for Photoshop CS6

[11]  After you’ve thoroughly checked out the panel, you’ve probably noticed that the character in our Puppet_Tutorial.psd has no body.  I’m going to show you how to use the AnimDessin panel to make an 8 frame loop of the character’s body.  First click the timeline panel tab to make sure it’s selected and press space bar to preview the animation.  So far, I’ve drawn 8 frames of every limb and each frame is set to last for 3 frames.  However, there are some static images of the head inside the head folder as well as an animation of a blink.  Feel free to toggle visibility of all the layers and explore how they’re set up.  But, try not to move anything around otherwise you might get lost later on in the tutorial.

[12]  When you’re finished exploring, follow the corresponding directions in the screenshot below, to set the Timeline Frame Rate.

a.) Click the “Set Timeline Frame Rate” button.

b.) In the window that opens, click the drop down menu that says “Frame Rate:”  and select 24.  The number 24 should show up in the next box followed by fps, which stands for frames per second.  This will make you’re timeline play your animation back at 24 frames per second.

c.)  If you’re frame rate was already set to 24, do nothing and just click ok.

[13]  First drag the playhead back to the beginning of the timeline.  Then follow the corresponding directions in the screenshot below to create a new layer:

a.) Click Upper_Arm_R in the layers panel.

b.) Press the “New Frame – 1f” button in the AnimDessin panel under step “3 New Animation Frame.”  This will create a new layer that lasts for 1 frame.

c.) Then Press the “+2f” button in step “5 Keyframe Duration & In-Between.”  This will add 2 frames to that 1 frame layer so it lasts for 3 frames.  That way our animation will play back on “threes,” an animation term, which means each drawing lasts three frames.  That way we only need 8 drawings to make up a second of animation.

[14]  Click the filmstrip icon to the right of the layer name in the Timeline panel and select “New Video Group from Clips” from the menu as seen in the screenshot below.

[15]  Selecting “New Video Group from Clips” will put that layer inside of a folder with a film slate icon.  This makes it so these layers will play back to back consecutively on the same track much like a non linear editor, allowing you to edit your animation with ease.  As seen in the screenshot below, double click the video group name in the layers panel, rename it to “Body” and press Return or click outside the box to save the name.

[16]  Follow the corresponding directions in the screenshot below to paint the first body layer of our puppet:

a.) Press the B-key to activate the brush tool or click the brush icon on the “Tools” panel.

b.) Then select the square charcoal brush in the “Brush Presets” panel

c.) Select the first “Body” frame, which is the purple box timeline.  Don’t select the “Body” video group in the layers panel and try to paint with the brush, otherwise you’ll get an error message.  Now, use a Wacom tablet and a stylus to draw the first frame of the body cycle we’re going to create.

[17]  Make sure the Body Video group is selected and  repeat sections b.) and c.) of step 13 to create another layer that lasts three frames.  Move the playhead the new frames you created before painting the second body.  Then click the “Enable Onion Skins” button in step “4 Onion Skins & Shortcut options.”  This will make it so the previous frame will become visible allowing for easier tracing just like a traditional light table would.  Next repeat step 16 to create another body layer. See screenshot below:

[18]  Repeat step 17 until you’ve completed a sequence of 8-drawings where each drawing lasts 3 frames.  You can toggle the “Enable Onion Skins” button to improve visibility if you need to.  When your done you can close the AnimDessin panel and press spacebar or the play button to preview your animation.  See screenshot below:

[19]  Now it’s time to export these layers to files, so that we can deal with each image sequence separately when we set up this character in After Effects.  Normally I would suggest turning off all other layers, video groups and folders except for the layers you want to export by going to File – Scripts – Export Layers to files.  However, because there are so many layers in this project it could take 10 – 15 minutes to export 8 frames at a time because my understanding is that the Photoshop Script has to examine all of the metadata connected with every single layer in the layer’s panel even if it’s turned off.

Then go to File – Save As… and save another version of the project called Puppet_Tutorial_Exports.  The reason it’s a good idea to save another version of the project is because we’re going to be deleting all of the other layers each time we export instead of just toggling their visibility.  This will greatly speed up the Photoshop script and we can just use the history to bring back the rest of the layers that need deleting.  However, if you accidentally close Photoshop without saving or Photoshop crashes, we could be stuck with a partly cropped Photoshop file that’s useless if we need to save out the rest of the layers.  So, having a backup is necessary.

[20]  So, now I’m going to show you how I would Export just the 8-frames of the left foot sequence.  First click the white triangle next to the video group Foot_L in the layers panel to twirl it open so you can see all of the Foot_L layers.  Then select all of the layers above the video sequence Foot_L.  Right click them and select “Delete Layers.”  But, don’t worry this action will be stored in the history panel and you can bring it back by clicking the history tab and clicking through the levels of undo.  See screenshot below:

[21]  Follow the corresponding directions in the screenshot below to set up your layers for export:

a.) Once the other layers are deleted, click the eyeball icon next to the Background Layer to switch it off.

b.) Press the C-key to activate the crop tool, or click the crop tool icon in the “Tools” panel.

c.) Grab the crop handles around the edge of the canvas to closely crop around the Foot_L layers.  Then press the check mark button in the Options panel located in the upper middle section of the workspace to accept the crop.  By the way, this button only appears when certain tools are selected.

d.) Afterwards, the Background Layer name will change to “Layer 0.”  This isn’t an issue just’ leave it turned off.

[22]  Now you’re ready to export these layers to files.  Go to File – Scripts – Export Layers to Files…  Then follow the corresponding directions in the screenshot below to set up your layers for export:

a.) First click Browse… to determine a location for exporting your files, click New Folder, label it and click Open.

b.) Then give your file name a prefix.  In this case I called it Foot_L.

c.) Make sure Visible Layers is selected.  This makes it so only the layers that are turned on in your Photoshop Panels window are exported.

d.) I prefer setting the file type to PNG-24 because the quality is excellent, the file size is relatively small and they support Alphas, meaning the transparency of the layers will be preserved just like they were in the Photoshop document.  PSDs and TIFF files also support Alpha’s and the quality is technically better than PNG-24, but TIFFs and PSDs are so much larger they tend to slow down performance in After Effects.  This is another reason why we aren’t just brining the Photoshop file into After Effects.

e.) Select transparency to preserve the transparency of the layers.

f.) Finally, make sure Trim Layers is turned off otherwise Photoshop will crop the unused spaced around each individual ball and they won’t play back properly in After Effects.  Trim Layers is useful if you just want to import a bunch of static graphics into After Effects, but not necessarily when you’re importing an entire sequence.

When your settings are correct, click the “Run” button to run the “Export Layers To Files” script.

[23]  Once you’ve run the script for one video group you have to Export the rest.  So, click the history tab in Photoshop and undo the last two steps like I’ve done in the screenshot below.  Keep in mind that if you made extra actions you may have to undo more steps, but the point is to get back to the point before you deleted anything.

[24]  Next you’re going to want to delete all the other layers except for the ones you want to export next.  In this case I’m going to delete everything except for Lower_Leg_L as you can see in the screenshot below:

[25]  At this point you can continue repeating the last four steps until all of the layers are exported.

[26]  But, if you don’t want to go through the trouble of exporting all of the layers you can download those exported assets from part two of my next tutorial: Rigging a Puppet Made of Image Sequences in After Effects CS6 (PART 2).

Reducing Flicker for Stop-Motion Animation And Time-Lapse Photography

This is a guest post entitled Reducing Flicker for Stop-Motion Animation And Time-Lapse Photography that I wrote for Todd Kopriva’s official After Effects blog at Adobe this summer.  It addresses the following FAQ on the Adobe Forums:

FAQ: How do I reduce or prevent flicker?

There are many causes of flicker, including–but not limited to–auto camera settings, the type of lens used, high aperture settings, fast shutter speeds, Av stepping, Tv stepping, natural lighting changes, incandescent and fluorescent lighting, fluctuating electricity, clothing worn while animating, and the materials that are being photographed.

See this detailed document for details about reducing and preventing flicker for stop-motion animation and time-lapse photography.

Making Motion Graphics Animation Look More Analog in After Effects CS6

This Tutorial is part of a series.  Please read my Introduction to Hand-Drawn and Organic Looks Tutorials before proceeding.

Introduction:

Working with motion graphics in After Effects is very similar to animating 2D paper cut-outs underneath a down-shooter animation stand or a multi-plane if you’re working with After Effects layers.  The main difference is that when you animate a graphic in After Effects, the program interpolates the in-betweens for you so you don’t have to physically move the cut-out or graphic every time you take a picture.  This greatly speeds up animation production time, but the downside for many analog animators is that movement often looks extremely smooth and unnatural like the loop of this bouncing ball motion graphic:

This tutorial will cover some techniques for making motion graphics look more analog like stop-motion cut outs or hand-drawn animation.  This is the same motion graphics animation from before only the ball has been replaced with an image sequence, wiggler has been applied to the keyframes and then the keyframes were toggled to hold:

Making a Ball Image Sequence for Animation in After Effects CS6:

1.  If you did my tutorial Working With Image Sequences in Photoshop & After Effects CS6 then this part will be very familiar.  We’re going to start by creating an 8-frame looping image sequence of a ball in Photoshop.  That way we can bring a moving image sequence of a ball into After Effects instead of a static ball graphic.  To begin open Photoshop and go to – File – New or Command N on the Mac.

2.  Change the name to Ball_Sequence.  And, since we’re going to be working in HD, change the preset to Film & Video and set the size to HDTV 1080p/29.97.

The 29.97 refers to a video frame rate, but since we’re going to be using the Export Layers to Files Script in Photoshop, we can bring the layers into After Effects as image sequences and interpret the frame rate there.  The main reason I use this preset is because it yields a 1920 x 1080 pixel canvas that will match any of the HDTV 1080 composition presets in After Effects.  Plus, it has action safe and title safe guidelines, which can be useful for creating titles and credits.

NOTE:  In this tutorial we’re going to crop down this canvas, but I still like to use this preset because it gives me a good idea of how big to make my drawings so they’re right size when I bring them into After Effects.  You can of course start with a smaller canvas and skip the cropping step later if you’d like.

3.   Go to Layer – New – Layer or Command Shift N on the Mac.

4.  Make sure you have the new layer selected and click the brush tool.  If you’re really going for a hand-drawn look, I’d experiment with the brushes in Photoshop and find one that has an organic look similar to a medium you like using on paper.  One of my particular favorites is the one I used for this tutorial, the square charcoal brush.

If you have a Wacom tablet installed, use the stylus to draw 8 different digital charcoal balls to bring into After Effects as a looping ball sequence.  You could technically use a mouse for all of these tutorials, but if you’re really going for a hand-drawn look then using a tablet and stylus is going to give you the most organic results.  In the screenshot below you can see that I’ve drawn all 8 balls but I only left one turned on so you can see the transparency of the pressure sensitive brush-strokes you can achieve with a Wacom tablet.

5.  Before you export your layers to files, turn them all on, press the C key to activate the crop tool and crop closley around them.

NOTE: Normally you could do this by using the Trim layers function in the Export Layers to Files script in Photoshop, but since all of your balls are hand-drawn they will be slightly different sizes and that means that the Trim layers function will crop them all slightly differently.  Then, when you bring them into After Effects the anchor points will be off and when you play them back as an image sequence, they might move around.  Since we’re going for an organic look this could be desirable, but just to be safe I’d crop them.

6.  To export your layers to files be sure to turn off all of the layers you won’t need and leave on only the layers you’re going to use in your sequence.  In this case just leave on the ball layers and turn the background off.  Then use the Photoshop script located in File – Scripts – Export Layers to Files, and change the settings to match the ones in the screenshot.

a.) First click Browse… to determine a location for exporting your files, click New Folder, label it and click Open.

b.) Then give your file name a prefix.  In this case I called it Hand_Drawn_Bouncing_Ball.

c.) Make sure Visible Layers is selected.  This makes it so only the layers that are turned on in your Photoshop Panels window are exported.

d.) I prefer setting the file type to PNG-24 because the quality is excellent, the file size is relatively small and they support Alphas, meaning the transparency of the layers will be preserved just like they were in the Photoshop document.  PSDs and TIFF files also support Alpha’s and the quality is technically better than PNG-24, but TIFFs and PSDs are so much larger they tend to slow down performance in After Effects.

e.) Select transparency to preserve the transparency of the layers.

f.) Finally, make sure Trim Layers is turned off otherwise Photoshop will crop the unused spaced around each individual ball and they won’t play back properly in After Effects.  Trim Layers is useful if you just want to import a bunch of static graphics into After Effects, but not necessarily when you’re importing an entire sequence.

When your settings are correct, click the “Run” button to run the “Export Layers To Files” script.

7.  When the Script is finished your files are ready to be imported into After Effects.

Importing and Animating your Ball Sequence in After Effects CS6

1.  If you did the tutorial Working With Image Sequences in Photoshop & After Effects CS6, you can simply open up that project file and place the background sequence behind your ball animation, otherwise if you’re opening up a fresh After Effects CS6 project, you’ll be prompted by the welcome screen.  If you get no welcome screen or accidentally cancel out of it, just follow step 13 in part 2 of my first tutorial Doing Hand-Drawn Animation Using Photoshop & After Effects CS6 (PART 2).

For now I’ll continue as if prompted by the welcome screen.  Click new composition and use the following settings:

First change the Composition Name to Background_Sequence, second choose the Preset: HDTV 1080 24 and third change the duration to 0:00:10:00.  When the settings look like the screenshot click OK.

2.  When After Effects opens go to File – Save As – Save As or press Shift Command S and Save your project in your desired location before you continue.  Then go to Window – Workspace – Animation so your set up looks like the screenshot below.

3.  Go to File – Import – File, double-click the Project panel or press Command I on the Mac.  In the Import File dialogue box locate the Ball Sequence files you exported from After Effects with the Photoshop Export Layers to Files Script and choose import as Footage – PNG Sequence – Force alphabetical order.  The dialogue box should look like the following screenshot:

4.   Once imported, click on the PNG Sequence in the project panel and press enter/return to rename the file to Ball_Sequence.  Right click the PNG Sequence and go to Interpret Footage.  Then follow the steps in the screenshot below to change the Frame Rate amount of times your sequence will loop.

5.  NOTE: In step 13 of the tutorial Doing Hand-Drawn Animation Using Photoshop & After Effects CS6 (PART 2) I had you create the Composition after Importing and Interpreting your footage.  Since we created the composition at the welcome screen we can skip ahead to the next step.

6.  Now drag your Ball_Sequence onto the Background_Sequence Composition Timeline.

7.  Since the Background_Sequence is semi-transparent, make a white solid to put underneath the sequence so it shows up better.  Go to Layer – New – Solid or press Command Y on the Mac.  Click Color and change the B setting to 100% or drag the circle to the upper left corner of the color picker so B changes to 100%.

When you press OK in both boxes, the new white solid will show up above your Ball_Sequence.  Move it underneath so it shows up.

8.  Now we’re going to keyframe some animation.  Position the Ball_Sequence in the canvas as it’s shown in the screenshot below.  Use the light blue square handles that surround your Ball_Sequence to squash and stretch your ball against the side of the composition.  Then move your playhead to frame 0 and twirl open the transform menu by pressing the little triangles to the left of your Ball-Sequence in the timeline.  Click the stopwatch icons next to the Position, Scale and Rotation properties.  This will add three diamond shaped key-frames in the timeline.  The diamond shaped keyframes are the standard constant velocity keyframes.  Continue by following the steps in the screenshots:

NOTE:  If you change the scale in timeline window below the canvas you need to turn off the little chain-link icon next to the settings so you can scale each parameter separately.  Also, you may have drawn your ball a different size than mine so the scale parameters won’t necessarily match up.

9.  Now you’re going to add an Easy Ease to those keyframes, so the ball eases into its first movement.  Select all three keyframes, right click them, go to keyframe assistant and select Easy Ease.

As you can see I’ve already set up all the other keyframes for the rest of the animation.  Below are screenshots of all the settings.  Feel free to examine them closely, follow the steps and adjust the settings as you go through them.  You’ve also probably noticed the motion paths in between the key-frames.  They show up when when you drag a graphic or sequence with a position key-frame from one point to another.  The curvature in the motion paths exists because I used bezier handles to pull out the curved motions paths.  But, don’t worry about this right now.  I’ll explain how to add the bezier curves once the position keyframes are set.

10.  Make your 2nd Position, Scale, Rotation keyframes, but only convert the position keyframe to an Easy Ease.  Don’t worry about the extra Scale and Rotation keyframe before this.  These are extra squash and stretch in-between keyframes you should add at the end.  First make all of your position keyframes then go back and add the other scale and rotation keyframes.

11.  Make your 3rd Position, Scale, Rotation keyframes.  Convert all three keyframes to Easy Ease.

12.  Make your 4th Position, Scale, Rotation keyframes.  Only convert the position keyframe to Easy Ease.

13.  Make your 5th Position, Scale, Rotation keyframes.  Convert all three keyframes to Easy Ease.

14.  Make your 6th Position, Scale, Rotation keyframes.  Since the ball is bouncing backward you can copy and paste the keyframes from your second position using the Edit – Copy and Edit – Paste Commands or Command C and Command V on the Mac.

15.   Make your 7th Position, Scale, Rotation keyframes.  Since the ball is bouncing backward you can copy and paste the keyframes from your first position using the Edit – Copy and Edit – Paste Commands or Command C and Command V on the Mac.  Then follow the instructions in the screenshot to create curved motion paths using the bezier keyframes.

16.  Now make your 8th squash and stretch keyframes by matching your scale and rotation settings to the screenshots below.  You won’t need to convert them to Easy Ease, so you can just leave them all as the diamond constant velocity keyframes.

17.  Now make your 9th squash and stretch keyframes by matching your scale and rotation settings to the screenshots below.  You won’t need to convert them to Easy Ease, so you can just leave them all as the diamond constant velocity keyframes.

18.  Now make your 10th squash and stretch keyframes by matching your scale and rotation settings to the screenshots below.  You won’t need to convert them to Easy Ease, so you can just leave them all as the diamond constant velocity keyframes.

19.  Now make your 11th squash and stretch keyframes by matching your scale and rotation settings to the screenshots below.  You won’t need to convert them to Easy Ease, so you can just leave them all as the diamond constant velocity keyframes.

20.  Now make your 12th squash and stretch keyframes by matching your scale and rotation settings to the screenshots below.  You won’t need to convert them to Easy Ease, so you can just leave them all as the diamond constant velocity keyframes.

21.  Now make your 13th squash and stretch keyframes by matching your scale and rotation settings to the screenshots below.  You won’t need to convert them to Easy Ease, so you can just leave them all as the diamond constant velocity keyframes.

22.  Now make your 14th squash and stretch keyframes by matching your scale and rotation settings to the screenshots below.  You won’t need to convert them to Easy Ease, so you can just leave them all as the diamond constant velocity keyframes.

23.  Now that you have your animation keyframed you should play it back by pressing the RAM Preview button in the Preview panel in the upper left hand corner of the workspace.  I’ve set up the work area so it ends right before the last set of keyframes.  That way the first frame doesn’t repeat when the loop restarts.  To do this, move your playhead one frame before the final set of keyframes and press the N key.  This will make it so the end of the work area lines up with the playhead.

24.  When watching your animation you’ll notice that it has especially smooth motion.  To fix this and make it look more organic we are going to use the wiggler plug-in.  First select all of the Position keyframes across the timeline without selecting any of the scale or rotation keyframes so it looks like this:

25.  When the keyframes are selected properly you should see that the apply button in the Wiggler panel becomes active.  Use these settings and click apply:

By setting the Fequency to 12 per second, we’re telling After effects to wiggle the position 12 times per second, which is almost the equivalent of an animation that was shot on “2s” or played back at 12fps.  The only difference is that when wiggler adds its key-frames it converts them all to Easy Ease so there is actually one frame of interpolation that happens in-between each one of those keyframes.  But, when we shoot something on “2s” with a down shooter, we usually photograph twice in the exact same place.  To achieve this effect we have to select all of the key-frames added by the Wiggler plugin and convert them to holds so they don’t move at all during the in-betweens.  To do this make sure that all of the position key-frames are selected, right click one of them and press Toggle Hold Keyframes.  This will cause all of the keyframes to hold during the in-betweens.

26.  Now when we play back the animation it might look a little sporadic.  This is because the ball is looping at 24fps while the hold keyframes are causing it to play back at 12fps.  This can be fixed by copying and pasting the following frame randomizing expression into the Time Remap function:

fr = 12; // frame rate;

numFrames = 8;

seedRandom(index,true);

seg = Math.floor(time*fr);

f = Math.floor(random(numFrames));

for (i = 0; i < seg; i++)

f = (f + Math.floor(random(1,numFrames)))%numFrames;

framesToTime(f);

If you don’t know how to do this please see my tutorial Working With Image Sequences in Photoshop & After Effects CS6.

27.  To give the animation a fully organic look, you can also apply the Wiggler plugin to the scale keyframes and the rotation keyframes.  I would also suggest converting them to hold keyframes afterwards.  These are the settings I would recommend starting with for the scale and rotation properties:

28.  If you did the tutorial Working With Image Sequences in Photoshop & After Effects CS6 you can import the after effects project and copy and past randomized the randomized background we made behind the bouncing ball.

29.  To render this animation, see steps 25 – 27 in Doing Hand-Drawn Animation Using Photoshop & After Effects CS6 (PART 2).

Follow

Get every new post delivered to your Inbox.

Join 441 other followers