Jan 22, 2010

The Making of Freddie the Pooh

If you’re a frequent MailChimp user, you likely will have noticed that we often create special login screens to commemorate holidays or other significant occasions. This past Monday, January 18th was Winnie the Pooh Day. In typical MailChimp fashion, we wanted to do something special to celebrate it.

Linda Eliasen, one of the creative minds that dwells in our in-house DesignLab, created this fantastic tribute to A. A. Milne and E. H. Shepard. Come take a peek and see what it takes to create one of our unique, custom login pages!

Step 1. Lots of drawings

This is one of about 15 drawings I did of Freddie as a Pooh Bear. As you can see, drawing legs can be very difficult for a person like me. I drew about 30 legs before I was happy with what I came up with.

Step 2. Scan that bad boy into the computer

Now we bring the original drawings into the computer and mess with our line quality. Line quality is some serious business in the hand drawn world. So here, we darkened our lines and made them a bit more pronounced.

Step 3. Draw a bunch more (using the computer this time)

We designers and illustrators have been blessed with this device called a Wacom tablet. I used it to draw over Freddie and rough him up a bit. Then I drew his magical world around him, the way he envisioned it.

Step 4. Make it fancy

Now I’m drawing the rest of the world around Freddie, and around Mailchimp’s Login area. Leafs and butterflies were two things Freddie kept stressing during our meetings. "Make the page dance! You must make it dance!" Oh, Freddie.

Step 5. Paint!

Once I was at a happy place with the drawing [and Freddie approved], I printed it on some heavy watercolor paper and got to the painting portion of this lesson. I painted and painted and painted. [Watching 30Rock, as I’m demonstrating here, is optional.]

Step 6. Hey, It’s done!

Sometimes it’s hard to tell when you’re done putting paint on the paper. For me, I knew I was done once I had watched all the 30Rock Hulu had to offer.

Step 7. Scan it back into the computer

step7

click to see full size

Once the final painted version was done, we scanned it into the computer at a high resolution so we could get started on the magical photoshopping process.

Step 8. Stalk twitter in hopes of finding people loving your work

step8

click to see full size

It’s all done! And now it’s live. And now I’ve spent more time than I’m proud of searching through blogs and Twitter to see if the results are positive. The results are indeed positive, so I silently say to myself "score."

awesome_login