Penny Arcade is probably one of the most respected, copied and successful web-comics of late. Mike Krahulik (Gabe), and Jerry Holkins (Tyco) are the co-creators behind Penny Arcade. Their unabashed opinions are hurled with ferocious might on a daily basis as they openly attack their enemies with a salvos of biting humor and coarse language typically found on HBO or fervent internet bulletin boards. As all comic characters are prone to, Penny Arcade’s characters have undergone years worth of fine-tuning and their appearances have changed, subtly. This article attempts to trace the PA timeline and study the evolution of the Tycho and Gabe characters from internet doodles – to web mavens.

In my previous article I outlined the inception and evolution of my character, Yoshi, and touched upon Garfield and Penny Arcade as clear examples of character evolution. Garfield started as a very, very, fat cat. Over the years his gut was tucked in and extra rolls removed to produce a still tubby, but more lovable character. Similarly, Penny Arcade’s auspicious start was simply the first step on a long, colorful path to success.

Mike Krahulik (Gabe), left, and Jerry Holkins are the co-creators behind Penny Arcade. Together they have forged an impressive archive of work and created a legion of fans. Lets meet the men and characters behind this success.

Enter the Gabe

Mike Krahulik is the illustrator that brings Gabe and Tyco to life. Just about every day for the last 5 years, he has churned out strip after strip. This is the type of determination required to really make it. Regardless of finances, or circumstances – they put out strips on a regular basis. It is this repetition and high level of production that leads to true character development. Each day Mike drew Gabe and Tyco, he refined the characters.

House of Brahe

Jerry Holkins is Tycho Brahe. Jerry maintains the news on the website and helps write the strips that Gabe draws. He can’t paint, draw or carve little wooden chess pieces. However, he shows his dominion over the English language and mastery over expletives to deliver blows of crushing humor. This is definitely not your Sunday paper comic strip. The language is course, common curse words are used – but delivered in uncommon ways. His writing keeps the strip fresh and current. Often targeting the video game industry they draw upon current events to keep their readership interested. Mike’s artistry is great – but without the content to drive each strip, it would soon grow stale.

The Early Years

It took two years for the Gabe and Tycho characters to evolve into what they look like today. The two you see currently on the Penny Arcade website are not the same two that started years before. Lets take a look at the earliest strips available in their archive. First up are the profile shots.

Gabe’s profile is a good example of character refinement. Early in 98 Gabe’s chin is hard and angular. As he works his way through 98 and 99 the style changes. Style 2 is vastly different from anything you can find in their archives. Clearly a path was taken that the artist didn’t like and we don’t see many other strips with this style. Its important you allow yourself as an artist to fork in this way. Let yourself travel down tangent paths and play them out to their full extent. Only through experimentation can you find your style. Through this experimentation you can see a progression as Mike removes line after line and replaces the hard angles seen in 98 with a softer look found at the end of 99.

Another area of note is the eyebrows. Early strips have very simple brows, lacking in expression. I too fall victim to using very simple eyebrows that consist of basically 3 points. Eyebrows can be one of the most effective ways of communicating expression without words. Gabe’s character develops curvy, expressive eyebrows late in 99.

Tycho too evolves during this period. Again I point out the variant style of 98, style 2. Its just such a vastly different variation – it almost doesn’t even look like Mike drew it. It experiments with facial strokes and a slightly different shade of hair color than we see in other strips. Style 2 also enlarged the head proportion to an even larger state. Tycho’s sideburns were the target of many changes, too. Different sizes and shapes can be seen through 98 and 99. Just like Gabe, Tycho is a lot closer to the present-day version towards the end of 99. Its amazing how much 1 year of constantly working on your characters will evolve them.

PA into the new millennia

The first couple of years featured massive heads. These were tuned down and by 2002 the characters start to look a lot like what we are used to seeing. 2002 also marks the start of thicker stokes.

Another area of note, are the ears. During this time the ears are given several revisions. This process is one of gradual refinement. Hit and miss. Sometimes you like it, sometimes you don’t. Let yourself perform this exercise. If you do, your characters will grow.

Another underlying theme of this process is simplicity. As the years passed, Mike drew simpler and simpler characters. Their expressions grew ever bolder though. Thick strokes give the characters depth and power, without adding too much more detail. The little strokes that can be seen early in 99 and 98 are now all gone. The extra angles and flat lines in the faces? Replaced with simpler shapes. Tycho’s face is consists of a straight line, and a curved one. Gabe’s is a V-shape. Most successful cartoons/comics are simple. Keep this in mind.

Final Thoughts

Don’t try to draw a masterpiece the first time out. Even talent like PA took time to cultivate and grow. Mike is a great artist, but I’m sure he learned a lot along the way. If you ask him today, he’ll no doubt agree that his first strips aren’t very good. But its those first strips that got him to where he can illustrate so masterfully today. Take a look at their site – its chock full of ads he drew. Hang in there and your character will grow.

It took 5 years of work to produce that before and after shot. That’s 5 years of near-daily drawings. Five years of drawing these little cartoony characters and waiting. Some may call that silly. I say that’s perseverance, a trait few people have.

Bum Lee’s website is chock full of great art. Besides being a talented illustrator, Lee also features a fine body of animations and shorts. I love the hard contrasting style he adopts in many of his animations. Its got a very euro-feel to it. He even has a Flash game. We all love those. Throw in some zombies and very smooth animtions and you have Deanimator. An online game and parody of Herbert West: Reanimator, serial short stories by H.P. Lovecraft.

Apparently this site’s flash banner consumes alot of cpu cycles and might turn some people off. I work hard on my Flash and do all I can to ensure viewers have a positive experience on this site. I cannot overcome bias against Flash, I can only present and package it in a way that will hopefully reach the most people. To this end I have added a control set to the header to control the animation. The icons in the top-right of the banner will now let you can stop play, skip and return to other animations. This both serves as a platform to display animations and allows users to stop the animation, should it become annoying. To free up more cpu I have set the wmode properties of the flash from Transparent to Opaque, as research shows transparency also increases the cpu usage. Other optimizations include trimming file sizes down another 12kb. All things considered I have managed to bring the cpu consumption down from ~24-28% to ~13-22% when a user stops the animation.

AJAX allows you to create pages that are dynamic without having to reload the page. Now this functionality if available though Flash. Christian Cantrell and Mike Chambers posted a proof of concept on MXNA that shows Flash & AJAX integration, and two-way Flash / JavaScript communication.

Fonts have always been a major concern in webdesign, or rather, the lack of fonts. To remedy this, I have recently installed sIFR: Scalable Inman Flash Replacement for all headlines. sIFR replaces all H1′s, H2′s etc with a flash rendition of the text. Naturally you can select any font you have on your computer – giving designers complete typographic control over their headlines. Not to be used as a text replacement for websites, so designers still don’t have 100% control over type – but its very nice and degrades well for non-Flash or Javascript enabled browsers.

The installation process is relatively easy, the directions straightforward. Simply edit a js file, include it in your source and create the font. Font creation involves the use of the Macromedia Flash editor where you simply select the font you want your text to render in – then export the swf. Font creation can even be sped via automatic sIFR font creation through JSFL, Flash’s internal scripting engine. Overall, getting sIFR onto your site is easy – making it look good is slightly harder.

The trouble comes in the tuning of your new flashy headlines. Letter spacing, line height, padding, font size etc are all variables that need to be tweaked to get the best looking headlines you can with your font. I spent a good amount of time staring at headlines with cut off bottoms before I finally landed upon the values that worked. You are not styling the flash, but rather a dummy text only version of the headline that is created a split second before displaying the page to the viewer. This dummy version attempts to mimic the flash font’s letter spacing and size so the javascript can accurately determine the real estate to occupy with the flash replacement.

Conclusion

Overall I really like sIFR – its great for someone who wants total control of design. Perhaps less important to others but designers are a particular bunch. While easy to install – its not easy to tune. Probably the biggest drawback is extra time it adds to your page load. This of course depends on your usage and number of headlines it is replacing.

Resources used:

http://wiki.novemberborn.net/sifr/show/HomePage
wiki documentation

http://www.communitymx.com/blog/index.cfm?newsid=408
Not particularly informative but she does hit upon a good practice. It will make it easier on yourself if you first set the letter-spacing and font-size before before tweaking line-height. The line height can drastically alter the size of the box sIFR is trying to replace and skew your letter spacings and font sizes.

http://macromedia.breezecentral.com/p67619682/
Danilo Celic’s Breeze presentation