Having done about all the amateurish Flash tweens one can do, I have recently decided to get more into keyframe animation, and in particular – character animation. This newfound interest requires a mascot. A cartoony fellow that I can practice upon and sharpen my animation skills. In this article I will outline how Yoshi, this site’s mascot, came into existence and the steps taken from first draft to the version you currently see gracing this site’s banner.
Cartoon characters aren’t drawn in one shot. All your favorite comic strips have evolved and changed over the years into what I’m you are used to seeing today. To this day I can remember the first edition Garfield book, and how big and fat that cat was. Over the years, Jim Davis, tuned his character. He tucked in the gut and extra rolls of fat. Now he has the most recognizable cat you’ll ever see suction-cupped to someones rear window.
Enter: Yoshi
Yoshi is my 2 year old white Chihuahua. There couldn’t be a better subject than the little guy that can crack me up with turn of his oversized cranium and bugged eyes. Being a dog, he should be relatively easy to draw. Thats a major factor since my attempts at drawing people usually results in some lumpy-headed character or a shameful Ziggy ripoff.
As a starting point, I scanned in a recent photo of my dogs. Aren’t they cute? Thats Yoshi on the left, Dita on the right. Using this image, I started to trace Yoshi. Whenever tracing a photo, I like to start roughly and get the basic shapes down. Then all the shapes are tweaked until I’m satisfied. This process usually requires many passes; each time refining littles peaks, valleys and curves that don’t look right. After a few hours, heavy use of the Illustrator pen tool, and some patience; version one was complete.
I was pleased with the initial result and during the time I initially drew Yoshi, a significant other in my life was enjoying a birthday. Naturally, Yoshi had to don a party hat. So v1 interation 2 was born.
Now this version was cute, but not very cartoony. Looks too much like a cheap clipart gif, what with the beedy eyes and strange eyebrows. Not to mention, his head looks like a bowling pin! So back to the drawing board I go to see what I can do.
Taking some cues from japanese anime stylings I give yoshi bigger, wetter eyes. I like the direction it takes, but is far too anime styled for me. Dont forget to donate to the fund.
Version 2
A few more hours into it, and I better define his eyeballs and give his head a more pleasing shape. Here you can see the differences side by side between v2 and v1. Vast improvements to the shape of the head and eyes, but still not quite there. All of these versions are done in Adobe Illustrator for exporting to SWF so that the character can be animated.
Version 3 – animated
At this point, I just could not wait any longer. I had to put Yoshi into a flash timeline and bring him to life! I’ll outline the steps I took to create this animation you see below in another article.
So far so good! I like the animation and the character is starting to aquire a style and feeling. At this point I take a break and just look at what I’ve done so far. I always find inspiration in others’ work and take the time to look at some characters from Cartoon Network, Nickelodeon and older Looney Toons. After looking at these other proven characters I realize mine needs more work. Time to buckle down, give Illustrator a good beating, and see where Yoshi stands when the dust settles.
Version 3 proves itself to be quite satifactory. I’m left with an undeniable feeling of accomplishment – I have a cartoon character! After all the hours of work, I’m finally starting to see a quirky-cool little cartoon version of my dog. From finally defining the body, to the new set of eyeballs, to the shape of his head. Changes to the character are everywhere. I now have a good base to start with now and just couldn’t continue without adding my other dog into the mix, Dita.
Some small tweaks to Yoshi’s head shape and colors produces the cartoon Dita. She is smaller than him in real life, so I also scale her down a bit. Now I have cartoon versions of both of my dogs. Sure, their necks are a little long… but it is time for a break.
During my break I did some research into character design. Hanna-Barbara for instance, was a great source for inspiration and information. Did you know that the only reason Yogi Bear was drawn wearing a tie was to make animation easier? The tie and collar were simply an easy way to cover the seam between Yogi’s head, and body – thus making it easier to animate Yogi.
I also found that characters were usually sketched out in a variety of poses and facial expressions before animating. This fleshed out the character and gave the animator plenty of faces to work with. If its good enough for Hanna-Barbarra, its good enough for me. So I set out for more drawing.
Now that I have my original v3 Yoshi, I can easily duplicate him and change his features. Here we have a few more versions of Yoshi in different states of mind and even in his new Ninja outfit. Once I started, I found it was really easy and fun to keep going. The possibilities are as many as I can come up with and draw.
From concept to final, the character design process is always lengthy. I estimate what is seen on this page took approximately 16-18 hours over 2-3 weeks, not counting the hours it took to make the v2 animation. I still expect Yoshi will undergo continual tweaks as I refine what I think Yoshi should look like. My pen-on-paper drawing skills are weak, I openly admit I cannot draw freehand. Others with stronger drawing skills could probably create a character like Yoshi in a day. Even a talented artist’s first cut will end up revised again and again.
Take a look at your favorite cartoon characters like Garfield, or Calvin, and pick up some early strips. You’ll hardly recognize the first versions of a character, with the polished one you now see in the sunday paper.
One of my favorite online strips Penny Arcade is a good example of this character evolution. Take a look at an early strip and compare it to yesterday’s. Having gone through each and every strip those guys have put out I believe there other trends you can see in their characters that may be a result of their unique situation. The online comic is a representation of the two individuals that write the strip. Their characters evolve and change according to how their writers own self-image vaccilates.
This begs to ask, how many other comic characters have a bit of their creator in them? Jim Davis, creator of Garfield, admits that he is 30% Garfield (he loves lasagna and lounging around) and %70 Jon, drawing on his college dating experiences for Jon Arbuckles dating antics.
I hope this article helps those of you working on your own animations and characters and motivates you to keep on working and evolving your characters.
Tags: 
Color is not the answer. When designing your logo dont get hung up on color. While color is important, a good logo starts in black and white. The test of a good logo is stripping it of all its embellishments and color and resulting with a logo that is just as recognizable as before. Before you start trying Pantone after Pantone looking for the magic color that will “look right”, try reducing your logo to just black and white.
Larger corporations have already taken into account that their logo will undergo faxing, emailing, scanning and reproduction by many authors and using a plethora of tools to do so. How often do you think about how well your logo reproduces when faxed to someone in black and white? Does it turn into a duotone splotchy mess? If so, back to the black and white drawing board.
Logos are seen everywhere. Everyone’s got a logo. A company logo is the first line of communication with potential clients and peers, yet many logos just plain suck. This begs to ask: How do the popular brands everyone is familiar with come up with their logos? What makes a logo eye-pleasing? How can a logo created in the 1800′s still stand for a carbonated, delicious and refreshing soda? This is the first installment in this “5 tips for good logos” series.
Tip #1.) Font First
