Training ninjas with Jon Hicks

Written by Mark Forrester on July 15, 2010 Blog.

Mr. Jon Hicks

Over the past couple months we’ve had the pleasure of working with the pixel surgeon, and icon designer extraordinaire that is Jon Hicks.

We commissioned Jon to re-design our popular ninja mascot that you would have seen busting moves all around our site. Our ninja was originally traced and vectorized based on a freely available icon design. However, we got so many people emailing us, and kindly informing us, that our ninja was being illegally used on other sites across the interwebs that we thought it was high time that we sat down and designed our own, unique mascot that epitomizes WooThemes ethos.

Let’s hand over to Jon for more information about the brief we gave him, and his creative design process.

The brief for the update of the ninja character was to give it more uniqueness, but retain the rounded/cute feel that the current character had.

Jon's doodles in his sketchbook that I'm sure a lot of designer's would like to take a peak in

The first stage is to get sketching. If you look at the page from my sketchbook you’ll see that the first sketches were fairly crude doodles, but as I got used to drawing the character it improved. The last 2 sketches went well, and I worked further into these with black pen and a very soft 6b pencil to quickly add shading.

Shading the two best character sketches

Once these sketches were approved, they were imported into Illustrator, and the process of creating rough vector artwork began. This stage uses the minimum amount of work to show how it will look. So while it doesn’t have any detail as such, it as the basic shapes with gradients. I also started developing 3 poses (two of which were similar) to show different aspects of the character. The main one – where the Ninja is doing a kick mid-air, has a more determined or concentrated expression, whereas the others are softer and cuter.

Vectorizing a shaded sketch
The ninjas in different positions

Early versions of the characters had very rounded off hands and feet, but this didn’t convey enough personality, so these were changed to have more definition, but still look rounded. These vector roughs are then iterated on until the final detailed version is created.

Adding more detail to the hands, shading and body positioning

And so we present you with our stronger, sleeker and more agile Woo ninjas ready for duty on the WooThemes site. You’ll see these guys replacing the early recruits around the site shortly.

The final ninjas with their woo badges ready for action

21 Responses

  1. Wilhelm Murdoch
    July 15, 2010 at 11:36 am #

    Wow, guys! Friggin’ LOVE this!

  2. Chris
    July 15, 2010 at 11:37 am #

    Nice, these guys seem to be the protectors of the company! Great Mascots

  3. David
    July 15, 2010 at 11:48 am #

    Aw they look awesome.

    Great concept for the logo as well. When I first saw it I thought wtf why is their mascot a ninja? But then I realised what it could stand for. The security, transparency and skill of a ninja in every theme. Not to mention the whole CSS Ninja concept.

    Well done guys.

  4. Fabian
    July 15, 2010 at 11:58 am #

    Kudo’s…so cute and memorable!

  5. R.Bhavesh
    July 15, 2010 at 12:20 pm #

    Absolutely loving this ninjas. The illustration is cute real cute.

    Personally, I liked the cuteness of the earlier wooninja but this one has attention to detail.


  6. Metin
    July 15, 2010 at 12:27 pm #

    cute illustrations. thumbs up!

  7. Stijn De Lathouwer
    July 15, 2010 at 2:38 pm #

    As always, great work from Jon Hicks.

  8. Michael Cohen
    July 15, 2010 at 3:53 pm #

    Brilliant work

  9. Kristasphere
    July 15, 2010 at 8:09 pm #

    So does this mean we will have Woo Ninja dolls we can buy? And T-Shirts? PLEASE???

    • Adii Rockstar
      July 16, 2010 at 7:38 am #

      Hehe, shirts are probably a much more viable bet than dolls. But I agree that dolls would be some top notch geek porn. 🙂

  10. Scott Webb
    July 16, 2010 at 5:10 am #

    Freakin’ amazing.

    I want to learn how to take a sketch into something like that.


  11. Tom Cooney
    July 16, 2010 at 6:18 pm #

    Great work Jon, I love the way you’ve kept the ninjas pretty simple yet still dynamic and full of character. Top hole!

  12. Matt Stigall
    July 17, 2010 at 1:24 am #

    Am I the only one that thinks a Woo Ninja cartoon series needs to be in the works?

    I am looking for building a mascot logo for my company, and this process helps out a lot.

  13. Chester8111
    July 18, 2010 at 8:13 pm #

    I like the unique design. It will attract attention as a company7 mascot.

  14. Olivier Turbis
    July 19, 2010 at 11:00 pm #


  15. Rich Ortiz
    July 19, 2010 at 11:56 pm #

    Great Ninja tutorial graphics

  16. Vergil Penkov
    July 20, 2010 at 10:54 am #

    Great graphics!

  17. Aadil
    July 20, 2010 at 1:10 pm #

    Awesomeness! 🙂

  18. Damian Herrington
    July 20, 2010 at 4:15 pm #

    Awesome mascot! I really like the design process in-sight too, good to see how something evolved into the polished final design.


  1. Training ninjas with Jon Hicks | Blog Ingenuity
  2. Having a Voice | WooThemes


The most customizable eCommerce platform for building your online business.

  • 30-day money-back guarantee
  • Support teams across the world
  • Safe and secure online payment
%d bloggers like this: