This post was originally published in 2009
The tips and techniques explained may be outdated.

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.

The making of Abe, the monster 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?!

The making of Abe, the monster mascot

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 making of Abe, the monster mascot

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 making of Abe, the monster mascot

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.

The making of Abe, the monster mascot

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 making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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 making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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.

The making of Abe, the monster mascot

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 making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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 making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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 making of Abe, the monster mascot

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.

The making of Abe, the monster mascot

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

The making of Abe, the monster mascot

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. Don’t forget to check him out along with the fantastic service offered over at Are My Sites Up.

2
Shares
Share on Pinterest
There are no images.
45 Comments submitted Add yours!
Subscribe receive Spoon Graphics newsletters

Subscribe to my newsletter to be the first to hear about new posts

45 Comments

  1. This is a great article Chris! I really enjoy your articles on how you go about illustrating a sketch; probably because I have little experience doing this myself.

    BTW: You’ve missed an “h” in the URL for AreMySitesUp to start the paragraph. Keep up the great work!

    • Thanks for spotting that Deron, quickly went over and fixed it.
      Glad to hear you enjoyed the article, I’ll be sure to look into writing more around the topic of sketch-to-illustration if it helps out.

    • Isn’t it weird that everything i go on u seem to have left a coment before me! What kinda a sh_t is that

  2. Hey Chris,

    It was a pleasure working with you! Abe is great. If you check out CSS-Tricks right now, you’ll see him hanging out there too =)

    The simplicity is great, it makes him adaptable and easy to use for a variety of applications. It’s also nice to have in a variety of poses, which gives him depth and personality.

    • Thanks Chris, Abe looks like he’s having fun hanging around on CSS-Tricks, great idea having him breaking beyond the limitations of the banner dimensions!

  3. Nice job Chris – Didn’t know you created that mascot. Looks really nice! The “fur” had to be a crazy job of creating, but it’s what finished Abe.

    Keep up the good work!

  4. This is a great tutorial and Abe is def a dope lil character.

    I always wanted to illustrate some of my drawings, this will be a good starter tut for me. Thanks Chris!

  5. Wow, there’s way too much ‘Chris’ in this post – got very confusted for a couple of minutes till the penny dropped! Great account of the illustration process though, I too would like to see more of this in the future :)

  6. Love that you got into a Chewbacca zone to handle your task ;) #welldone

    Top notch Chris! Fit article about a fun little guy named Abe. I did expect another Abe and was pleasantly surprised with your Abe, this Abe.

    Best.

  7. First off, thanks for writing such a detailed post Chris. I know that it takes a good chunk of time to put together posts like this, but I know myself and all of your other readers really appreciate it.

    Secondly, the timing of this post was very interesting. I had come across “Are My Sites Up?” for the first time today, and in addition to being impressed with the service, Abe caught my eye on the homepage and the Premium sign-up page!

  8. It’s great to see how fantastic and effective such a simple (with the exclusion of the fur!) illustration can be. It is so easy to forget that simple and/or subtle can be better in some instances – thanks for reminding me Chris!

  9. LOL @ mascot! XD

    Hehe, just kidding! Very nice, i like it, actually the entire process is pretty cool.

  10. Hay there great tut, love the detail on the fur, I was wandering what the font was in the “hey chris…..” peace of text?

  11. Makes me want to develop a little mascot for my company too! Fun tutorial, thanks for giving us a peak into your work flow!

  12. “… while making Chewbacca noises to myself to gain a feel of his personality.”

    LOOOOL

    btw: good tut.

Comments are now closed