Illustrating Smash, the GDZLLA Mascot

Once we branded our little Tweetie/Flickr script as GDZLLA, it was obvious that we needed an adorable mascot to give the product some personality. Illustrating the GDZLLA mascot, who would be eventually called Smash, was going to be the ideal opportunity for me to get better acquainted with Adobe's orange app and grow out of my comfort zone as a web designer.

Got No Time for Inspiration

As we wanted GDZLLA to launch as soon as all the pieces were ready, time was biggest constraint on this project. Given this strenuous deadline, I skipped the warm and cuddly inspiration phase — finding incredible works of art made by far-more-talented illustrators — and instead, went out hunting for concepts and imagery I could immediately re-purpose.

Re-interpreting the classic Godzilla we all know and love would have been too literal. I went to the other end of the terrifying/adorable spectrum and based my model on the Bub and Bob characters from the classic NES game Bubble Bobble. While iStockPhoto and Google images might be the go-to resources for inspiration-scouring, if you’re looking for illustrations, I can’t think of a better place to turn to than DeviantArt. Too often DeviantArt gets dismissed by us designers, who pigeon-hole it as rife with low-grade anime art, or over-gradient-ized wallpapers titled something like “B I O M E C H A N I C A.” But in addition to all of that, it also has a giant pool of talented artists who produce great work. For my purposes looking for Bubble Bobble illustrations, I was able to find all sorts of fantastic illos of those rambunctious monsters: cute, clean, quirky, stylized, bizarre, and, dare I say, even sexy NSFW-IYWDOBR*.

To throw a little variety in the mix, I looked through the Dunny vinyl toy series, which lead me to this delightful figure by Fawn Gehweiler, whose eyes I stole. Like Dr. Frankenstein, I took the various body parts that were fit for production and went on to sketching. Once I landed on a sketch that was workable, I digitized it into my Mac via PhotoBooth (we don’t need no stinking scanners) and got cracking in Illustrator. From here on out, I employed the standard practice of illustration, as exemplified by Jon Hicks: sketch, shapes, details.

No Teeth, Just Lots of Tooths

The basic shapes of Smash were simple enough. The body and head are just two ellipses. It was all smooth sailing until I got to the finer details. Working on the teeth, I figured I would be a clever guy and draw the top and bottom rows as two distinct shapes. This was my Photoshop mindset at work: trying to reduce unnecessary layers and folders, avoiding the clutter of lots of shapes for each tooth. But in Illustrator: not a bright idea. As you can see, the top incisors are all one shape. This method took way too long, moving and adjusting the shape handles for each nook between the teeth. Acknowledging my error, for the bottom row, I made one tooth and simply duplicated it.

I ran into a similar problem drawing Smash’s left hand (on your right). The first attempt — drawing the entire contour of the hand all in one shape — resulted with an awkward hand that was unnecessarily complex. With that bended-in pinky, it looked like he was belting an opera.

I did another couple sketches just of the hand. After PhotoBooth-ing it in, I used simple shapes to make a better looking hand, repeating the same tear-drop shape for each finger. Once again, the KISS principle rules.

Ice ’Em!

Prior to this project, I only encountered Illustrator’s Isolation Mode in frustration, mistakenly double-clicking on shapes I just wanted to select. Since I wanted to lay in a bunch of shadows and highlights on Smash, there was no way getting around it. Isolation Mode had to be conquered. As it turns out, this tool is phenomenal.

Take for example Smash’s left eye. To occlude it behind his snout, I used a clipping path (I know: I could have just placed it behind the snout shape, but I had some issues with the gradients matching nicely). Inside that I have the eye group. Inside that eye group, I can then move each component shape, using more groups and clipping paths where necessary (like the iris, which has a clipping path just for those little filaments). Without Isolation Mode, each of these shapes would exist on the same level, and I would be left with a cumbersome mess, managing each shape separately.

Employing Clipping Paths and Isolation Mode is also a good way to deal with radial gradients. For Smash’s head, I wanted the center of gradient to be at forehead, not just in the direct center of the shape. This is accomplished by making a simple ellipse with a radial gradient, then using the clipping path of the head shape to cut it out. Cmd + 7 = Presto!

After completing the entire figure, Smash was looking a bit flat. The entire time I was working on him at a huge resolution on a Cinema Display. Placed into his proper context, only a couple hundred pixels tall, all the subtle details were lost. I went back and intensified the shading and added finer touches into his pretty, pretty eyes. Here’s the progression from sketch to final product:

Given the tight turnaround time, I’m pretty happy with the finished illustration. In the few short weeks GDZLLA has been live, he’s already been used in several applications: in the masthead, as an iPhone icon, and as a raging menace lurking within 404 pages. Just as important, I'm pleased that I got a chance to really get my hands dirty with Illustrator. And just think, I could have been turning to Photoshop for gradients for the rest of my life.

* Not Safe For Work — If Your Work Disapproves Of Buxom Reptiles