Blog.SpoonGraphics

The Making of Abe, The Are My Sites Up Mascot

Read the article

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.

Join the mailing list and receive my design resources bundle FREE!

Join the mailing list to have every new post hand delivered to your email inbox. Every subscriber gets a FREE bundle of 40+ icons, vectors, brushes & textures!

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!

    (0)
    • 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.

      (0)
    • DUDETTE says:

      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

      (0)
  2. Chris Coyier says:

    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.

    (0)
    • 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!

      (0)
  3. david says:

    Great! Thanks for sharing your process. I am definitely learning a lot form your blog over the past few months. I like the idea for the AreMySitesUp as well.

    God bless.
    David.
    http://www.stopdropanddesign.

    (0)
  4. Kate says:

    I love it! He is cute and lovable…a great mascot. I liked the blue stroke addition a lot.

    (0)
  5. Marco says:

    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!

    (0)
  6. Patternhead says:

    Love the character design Chris.

    Thanks for sharing your workflow with us.

    (0)
  7. Kevin says:

    Awesome mascot. He looks really friendly and has lots of charisma. How long did it take to finish this guy?

    (0)
  8. shankyrhodes says:

    Thanks, I like your articles.Your abe is great

    (0)
  9. wow, very nice.
    love to see other design\developers work process

    cracking mascot to boot! :)

    (0)
  10. aravind says:

    Hey.., so cute looking mascot.. :)

    (0)
  11. Monster Love <3 haha.
    Cool Yeti! I guess you’ll be using that website then from past problems Chris.

    (0)
  12. Marc Perel says:

    Very cool little, Chris.

    I must say I commend your efforts for doing each little piece of hair, regardless if you used a tablet or not.

    (0)
  13. James Cottis says:

    Great character and great article. The attention to detail with the fur is excellent. – Checking out the are my sites up website now.

    (0)
  14. Great work! Websites are always better with mascots :)

    (0)
  15. That’s awesome, exactly the type of thing i love, really subtle but with an amazing end result.

    (0)
  16. Soh Tanaka says:

    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!

    (0)
  17. JohnONolan says:

    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 :)

    (0)
  18. 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.

    (0)
  19. [...] The Making of Abe, The Are My Sites Up Mascot | Blog.SpoonGraphics The making of a mascot! Good read (tags: vector illustration illustrator graphics design) [...]

  20. Lovable cartoon mascots are so fun. ;-)

    I wish I had the gumption to tackle my own in Illustrator.

    (0)
  21. 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!

    (0)
  22. Blue Buffalo says:

    Very cool – I like him. Watching the design process it very interesting.

    (0)
  23. Craig says:

    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!

    (0)
  24. Roy Nottage says:

    Awesome, really great character. I couldn’t help noticing a yeti-sports image in the Google Image screenshot. I used to love those games.

    (0)
  25. Ivanski says:

    damn this is crazy, I like it!@
    http://rapidshareaza.com

    (0)
  26. Rod says:

    LOL @ mascot! XD

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

    (0)
  27. Thankyou for the kind comments everyone, glad to hear the walkthrough has helped a few of you out.

    (0)
  28. [...] See original here: The Making of Abe, The Are My Sites Up Mascot [...]

  29. [...] Go here to read the rest: The Making of Abe, The Are My Sites Up Mascot [...]

  30. Arran Ross-Paterson says:

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

    (0)
  31. [...] The Making of Abe, The Are My Sites Up Mascot [...]

  32. Chase says:

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

    (0)
  33. Bill says:

    Yetis for the win!

    (0)
  34. mawa says:

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

    LOOOOL

    btw: good tut.

    (0)
  35. Jan Sperl says:

    Pretty nice tutorial! I’m very pleased i found your blog! :) Looking forward to your next articles!

    Greetings
    Jan

    (0)

Comments are now closed