Meet Rochelle from Pixar’s movie “Planes”.

Still enamored with creating GIFs, I stayed up way too late last night creating this animated movie poster from the movie Planes by Pixar to be released in theaters August, 2013. (DesignAssignments313)

Let me give you a little background on why I chose this particular movie poster. My name is Rochelle, and it’s not a very common name in the United States.  I met only one other Rochelle growing up, and that was in High School.  I’ve met maybe 5 others my whole life. So when a Facebook friend posted on my timeline that Pixar would be introducing a new character in their upcoming movie about planes, I was beaming,

 “I have a cartoon character named after me?”  

Now this assignment would give me the opportunity to create something out of a real movie poster that had my name on it.  How cool is that? If I liked it, I could see using it in other circumstances around the web. I do like my final product, so you might see it popping up again.

Keeping with this week’s design theme, I studied the poster to understand what is being conveyed in the image.  Since the movie isn’t even out yet, I read the Pixar synopsis of the movie and more specifically the plane character, Rochelle. (voice of by Julia Louis-Dreyfus)

Excerpt from Pixar site:

Rochelle

(voice of Julia Louis-Dreyfus)

Rochelle is a tough racer and the pride of the Great White North. Always confident and capable, she got her start running mail to small towns in Quebec, picking up home remedies for mechanical maladies along the way. She also developed a knack for fast travel that ultimately inspired her to give air racing a try. Rochelle never looked back (this competitive contender doesn’t need to). She is relentlessly pursued by charmer El Chupacabra, but steadfast Rochelle is much too focused on winning the race to return his affections.^[20]

I would also need to keep in mind the file size limitations of a GIF, how many frames I’d be allowed in my photo editing software, and since I didn’t want this project to consume my life for days, the number of frames I’d actually have to create.  I decided that the important elements of the poster to focus on would be that this is a plane, and then illustrate something about Rochelle’s personality.  My first overly ambitious thoughts were to have her fly on the poster.  Moderating my initial exuberance with a dose of reality, I admitted to myself the work required to make the plane actually fly in or out of the poster was way too complicated to pull off.  My rational, although still very creative self, went with animating the propeller props, and giving her a wink.  I’m not totally at peace with the symbolism of her winking, since the character synopsis says she is steadfast and much to focused on winning the race to return another plane’s affection, but I’ve seen the blinking effect used in a lot of other GIF projects (Ben’s “The Colorized Zone” was a big inspiration), so why not give it a try.

[An illustrated detailed process of creating this animation will be documented and posted as a tutorial eventually. Until then, you can view a tutorial example with only one animation zone.] 

A summary of the process using PhotoShop Elements 11 for the Mac:

1. I used the lasso tool to grab an image of each of the propellers and the eyes/windshield of the plane. This was pretty painstaking while I experimented with which parts of the propeller would work best to create the rotating effect.  I then duplicated the propeller images and rotated them 30deg and 60 deg. I ended up with 3 different propeller images for each side of the plane.

2. For the winking eye I used the lasso tool again to capture just the left half the windshield image.  Then started stretching, erasing, copying, pasting, aligning… until I had something that looked right.

3. Once all of the individual image layers were created, it was time to merge the appropriate layers to create new combined images that would animate correctly.  Oh my was this a chore as it became closer and closer to midnight.  I was creating a total of 3 animation zones?! My brain just wasn’t working as well anymore and I was having a hard time following tracking of what went where.  And remember that ambitious enthusiasm I spoke about? Well I added in an additional challenge to have each of the propellers appear to be spinning a little differently. And believe you me, it was no walk in the park to properly align everything so that those parts that were supposed to be still remained still.  I didn’t want any distracting jumping around of the animation.

4. The timing of the animation sequence was also important.  I didn’t want her constantly winking, yet I wanted the propellers to be moving at a quick rate to provide a better spinning illusion. I was able to create the effect I wanted by duplicating more of the image layers for the propellers and sandwich the winking effect in the middle. All-in-all I ended up with a total of 14 frames: 8 propeller frames + 2 winking frames + 4 propeller frames, all running at 0.2 seconds per frame.

As I mentioned above, this post only gives a high level synopsis of creating this GIF.  The tutorial will have much more detail with screen shot images and examples at each stage as I move through the creation process.