Bitmap Animation (JibJab)

images

JIBJAB MEDIA gained widespread notoriety for its election year shorts “This Land” and “Good to be in DC”, which featured George W. Bush and John Kerry during the 2004 Presidential campaign and were viewed online more than 80 million times.

The JibJab team uses both Photoshop and Flash to create the majority of their animation, and the process involves sketching, photography, Photoshop collage and, of course, Flash animation. In this tutorial, you’ll be instructed on how to make a President Bush dance cycle. You’ll need a photo of President Bush’s head, a camera and an understanding of tweens, guide layers and the basics of character animation.

Special thanks to Aaron Simpson (www.coldhardflash.com), and Gregg and Evan Spiridellis (www.jibjab.com) for their generous contribution to this book. This is Flash animation gold.

 

images

1 For this type of animation, you should define the proportions and the action your character will be executing. Start by drawing the first pose for your character.

images

2 Sketch the second pose and when you’re finished, you should have a clear idea of the photos you’ll need to animate with.

images

3 Photograph a front view of a jacket, shirt and tie and then a separate photo of a fist. In this situation, you can reuse the arms as legs, and create a vector foot.

images

4 Open your photograph file in Photoshop. Press image to enter Quick Mask mode and, using a hard edge brush, select the area you want to animate separately.

images

5 Here’s the body section after cutting it out with the Quick Mask feature. Make sure the background is transparent.

images

6 You should only build one arm, as we’ll flip these assets and reuse them on the opposite side. Here the arm was cut out using another Quick Mask.

images

7 The arm looks too thin at the shoulder area. Press image image image to enter Transform mode and click the Warp icon, then manipulate the Bezier handles to impart a cylindrical shape.

images

8 Next, select a circle where you want the elbow joint to be and save that selection in a new channel.

images

9 Here is the lower arm graphic after being cut out from the overall arm.

images

10 Here the upper arm receives a little more transforming with the Warp tool for good measure.

 

image

Hot Tip

Check out Steve Caplin’s How to Cheat in Photoshop CS4 for some of the best tips and tricks for how to extend your Photoshop knowledge. it’s a great companion book to have next to this one.

images

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.17.150.89