The Making of Abe

I recently had the opportunity to work with fellow design blogger Chris Coyier of CSS-Tricks as part of a little project to produce a cartoon monster mascot for the newly launched service; Are My Sites Up. The challenge was to create a monster character that could become part of the Are My Sites Up branding, during the process I took the time to document each step of the project in order to present The Making of Abe, The Are My Sites Up Mascot.

Are My Sites Up is an indispensable resource for all website owners, the service does exactly what it says - informs you of any unexpected downtime your websites might be experiencing. With free and premium accounts with plenty of features it's definitely worth checking out.

Chris dropped me an email outlining the plans behind the character, stating that they were looking for a loveable monster mascot that could put people in a good mood, even when giving out the bad news of website downtime. It was also mentioned about having the character chilling out, implying that he doesn't have to worry because the service is doing his job.

Combining the idea of loveable monsters and a slant on the word 'chill' I decided to base the design on a Yeti. After all, who doesn't love Yetis?!

I fired up Google to start the project research, gaining some idea on how Yetis are depicted and what key features could be focused on.

The next stage was to sketch out the initial ideas on paper, roughing out a few variations of size and body shape while making Chewbacca noises to myself to gain a feel of his personality.

The overall form of the character was developed until I was happy with the direction he was taking. A few scans were taken into Adobe Illustrator for reproducing the character digitally.

Using the Pen Tool, the outline of the character was traced with a thick black line. Being a front facing angle, just half of the character was drawn to produce a symmetrical body shape.

The path was copied and pasted, then flipped and positioned on the opposite side.

To complete the two separate halves, the open points at the top and bottom were joined together with the CTRL / CMD J command.

The finer details were then traced with a thinner stroke, being quite a simple character only a few additional lines were needed, which helped the character work well at small scales.

The facial features were then created using a mixture of hand drawn elements and manipulation of the basic shapes available in Illustrator.

Long time readers may recognise the outlining technique from my previous character design tutorials. Adding a complementing inner stroke helps add depth and dimension to the otherwise flat design.

Being a 'chilled', snow inspired colour scheme a very light cyan was used against the white, while the black outline helps give strong definition.

The main character body form was then complete, but no Yeti is complete without a coat of long fur!

A simple custom brush was created to represent a single hair. Originally based on a tiny circle an end point was then dragged out and Bezier curves removed with the Convert Anchoir Point tool.

The shape was then transformed into an Art Brush using the Brushes palette, ensuring the orientation of the brush was correct.

Assisted with a Wacom graphics tablet, a large number of short brush strokes were made, spanning from the body of the character outwards.

As the number of individual hairs increased, so did the impression of fur, until the whole outline of the body was covered.

The same process was repeated to create a second example of a potential pose the character could be displayed in.

The character concept was emailed over to Chris, and a reply was soon received. Chris was happy with the style of the Yeti, and decided to call him Abe!

The main idea for the mascot was to appear in various places around the Are My Sites Up website, so a few poses were sketched out of Abe hanging around.

Following the same overall process, each individual pose was also digitally produced.

This brought the project to a close, the various poses were sent over to Chris as EPS files to allow for reproduction at any size. Overall it was a pleasure to work with Chris and great fun creating the mascot.