Wulverblade Character Design Process

So, after my promise of weekly blog posts, I managed only a few, how rubbish ;)

Anyway, to make up for it, here’s a post that people have been asking me to make for years. A breakdown of how I create my characters. Hold on tight, its going to be long winded and drawn out ;)

Wulverblade-Character-Tutorial-Step1

Step 01 – Rough Sketch

I was hesitant to actually show this one as my sketch for the Roman Legionarry is pretty…well…terrible lol. But, this is a process showcase, warts’n’all ;) As I had a clear vision for this character in my head, the sketch could afford to be pretty rough. So I didnt concern myself too much with accuracy and proportions. This was purely about laying down the basics.

One thing I often do is allow my sketches to be very loose, as I work with the intention of making many proportion adjustments once the character is in the vectorising stage. Drawing in vectors allows infinite flexibility as scaling up or down never effects the quality in any way. So, with the sketch roughed out, it was onto the colour.

Wulverblade-Character-Tutorial-Step2

Step 2 – Rough Colour

I like to set a loose colour palette as early as possible as it allows me to clearly visualise where I’m going with the character. Chances are high that these colours will change along the way, but this acts as a starting point. No shading is done here, its just solid blocks of colour.

Wulverblade-Character-Tutorial-Step3

Step 3 – Vectorising the Sketch

Now, most of you will be looking at this and thinking ‘man, this looks awful’ and yes, it certainly does. Even after 15 years of doing this, I still have to tell myself in the early vector stage to ‘stick with it’. Now, with all the basic lines drawn I’m ready for the core of the work, the colour, shading, lighting and detailing.

Before moving on, I’ll just cover what tools I use to draw in vectors. Illustrator is the only vector drawing software I use, I swear by it and I love it. And as far as what tools I use within it…you maybe surprised to hear that I use only two. The Pen tool and the Pathfinder. The pen tool to draw the core shapes, and the Pathfinder to make all my internal shapes. So for example, when I create a shadow on the character, I draw the shape of the shadow, but allow myself to draw outside of the shape (creating excess), using the pathfinder to cut the internal shape out of it like a cookie cutter.

Wulverblade-Character-Tutorial-Step4

Step 04 – Making the Line Art Meaningful

This is the stage where the line art becomes the character, or at least a version of the character in a state similar to a colouring book ;) You’ll see here that I define the major parts of the character with stronger strokes, allowing the thinner strokes to act as details. So major elements like the torso, shield and sword have thicker outer strokes. These help to not only create the character style, but to draw the viewers eye to the elements I want them to focus on. If everything shared the same stroke weight, the character would be unreadable. Varied stroke weights allow people to instinctively read a character.

Wulverblade-Character-Tutorial-Step5

Stage 5 – Base Vector Colour

This stage is a follow on from the initial sketch colouring. I simply lay down my palette, adding each major colour into my palette for easy reference. This is also a great stage to start fiddling with the colours. For speed I use a plugin called Phantasm which is a collection of colour/lighting adjustments that allow easy ways to adjust brightness, contrast, levels, hue, saturation, tints etc. By using these to finely adjust your existing colour scheme you can soon find yourself exploring new directions that you might not have found when  adjusting each colour by hand. Phantasm allows you to adjust multiple objects at once which saves having to adjust each element on its own. Making ‘overall’ adjustments is a huge help.

Wulverblade-Character-Tutorial-Step6

Step 6 – Gradation 

This is one my most loved stages and the one that I believe defines my characters from others. I like to add subtle gradation to almost every colour on the character. Sometimes I do it obviously, like on the sword but in many places I add it very, very subtly, almost to a point where you ‘think’ its not there. These subtle gradations of colour allow for much more depth and act as the foundations for the lighting that comes next.

Wulverblade-Character-Tutorial-Step7

Step 7 – Lighting

Some of you keen eyed folks will notice that I break almost every rule of lighting with my chracters and that is intentional. In many cases, following the rules of light to the letter can often make for a dull character. Bending the rules where it benefits your creation is what makes it special. Some times I’ll move the shadow angle on one part over another, in other places I wont highlight and in many places I’ll add secondary lighthing to help define a feature that would otherwise be lost. Understanding lighting is key, but understanding how to break the rules is what helps to make it individual…or that’s my excuse anyway ;)

As you can see above, if you compare the flat block coloured version to this, you’ll see the power of the subtle gradients and the shadows/highlights. They make or break your character.

Wulverblade-Character-Tutorial-Step8

Step 08 – Final Detailing

This is where I like to add in lots of tiny little flares that give the character a story. Adding in chips, dents, dirt etc helps to tell an unwritten story about the characters past. This guy has obviously seen some action and he’s pretty battle hardened. Adding these details and some subtle texture add’s so much overall.

Summary

Well, there you have it, 8 of the core steps that I go through to make my characters. Worth noting too is that I dont always follow my own steps exactly in this stage, sometime I mix up the stages, colouring before finalising my stroke weights etc, I basically go with the flow with every character. I’m not big on sticking to rules.

Here it is in gif form to see the progression from that terrible sketch to the finely polished end Legionary.

Wulverblade-Character-Tutorial

I hope this helps any budding illustrators out there as I know you’ve been asking something like this for about 10 years lol. If you have any questions whatsoever, drop them in the comments and I promise to respond ASAP :)

Thanks everyone! My next post will be about environment art as that’s an entirely different beast.

Mike.

 

  • Tim McKinstry

    I love how you’ve refined your techniques to almost pixel perfection. So simple with such amazing results. Kudos for the tutorial.

    • michaelheald

      Thanks Tim! Those are very, very kind words indeed. If this proves to be of interest to folks I’ll make a point of doing more. It was kinda fun to put together. I guess a video tutorial would be a better progression from here. I just need to find a stable screen capture program,

      • Use ScreenFlow on Mac. It works great for my code screencasts.

        http://www.telestream.net/screenflow/overview.htm

        • michaelheald

          I’m a PC ;)

          • Brian

            We can chat about options for this Mike. I really think doing some videos from both of us would be good in the future. We are also thinking of maybe live streaming some things…

          • michaelheald

            Hey Brian, yeah that’d be great. I’ve tried a few so far, all of which fell short in one way or another.

          • I use Camtasia Michael. It’s not cheap but it’s worth the commitment if you want to do more of it. Just set up a donate button and I’m sure many people would be happy to chip in for some video tutorials.

          • J.d. Compton

            You’ve just made my day.

  • Hi Michael, this is really great !! I was hoping to see your process for some time, finaly !! How much time do you spend on a character like this ?? I’ve used the same tehnique, but I found this a little frustrating. I think I was spending too much time with it maybe because I was trying to make everything perfect from lines to shapes shadows and so on… I’ve changed my style a little, I think the mouse and the pen tool was forcing me to make everything look crisp and perfect, drawing with the tablet pencil is much more pleasing, you have so much more freedom and even if the lines aren’t perfect they look a little more dynamic and alive, oh and the artistic moment is much better then drawing with the mouse, what do you think ??

    Maybe you can give me a honest opinion about this if you like it or not, I made this with the tablet pencil using just the blob brush tool for everything: http://dribbble.com/shots/1398845-RPG-Elements?list=users?list=users

    Hope to see more !! :D

    • michaelheald

      Glad you enjoyed it Andrei!

      Time wise, usually 1-2 days from sketch to final vector, it depends on the complexity and if it needs to animate.

      For me personally, the sketch HAS to be freehand drawn, but once into the vector realm I’d be happy with a mouse as I like clinically clean and geometric shapes for the end result.

      I really like your work though man, the freehand feel to the style looks ace!

      • Oh, I see, I usually used paper and pencil for sketches too, but now I’m trying to put the little cintiq at work, I think making the sketch digitally it has some advantages, btw what are you using for animation ? I’m using flash, but it’s one thing that I don’t like about it and that is not being able to export good looking gifs, have you used spriter before, what do you think about it ? ( sorry for the flood of questions :)) )

        Oh and thanks Michael, you made my day, I’m really glad that you like it !! :D

        • michaelheald

          I use flash exclusively for my animations, but am soon to be exploring Spine as its going to speed up the transition of my flash work into the game. I’ll likely do a post about that as I uncover the ups and downs of it.

          • Great ! I would love to read more about it, spine looks great !! I’ve just downloaded the free trial, so I’m going to give it a try :)

          • michaelheald

            Good move its ace!

          • Yes !! I see that now, I bought the license a few days after, definitely worth it ! I’m using it on the project I’m working on, really good ! thanks Mike !

  • Awesome work Mike!

    While you might not think the sketch is good, I think it’s awesome to see the progression. I don’t expect a perfect sketch on a first try. It’s really the intent that the sketch gives which opens my imagination to a character could look.

    I love watching the process. Most of my experience is pencil, and I haven’t connected all the dots for digital art. I think a breakdown like this makes it fun to see how you work. I think it helps lower the entry barrier and mystery into art for an outsider.

    I’m a programmer, and I’m working with an artist to make a game called Bomb Dodge. http://BombDodge.com It’s been fun to go through the process of designing the characters and animating them.

    • michaelheald

      Thanks for the feedback Paul!

      Yeah moving from pencil to digital can be odd at first. Even though I’ve been a digital artist for over a decade, it’s only in the past couple of years that I moved 100% over to digital. The last transition was my initial sketching, I now do everything via my Cintiq, it’s ace.

      Good luck with Bomb Dodge!

  • Oh man this is such a beautifully amazing tutorial Michael. Thanks so much for sharing your process. Question about your process though if you don’t mind. When you’re using the pen tool is their a process for how you work the shapes. For example to start with the outline and then do the inner lines and do you separate your line work into sections such as head, body, arms? Finally when it comes to painting do you do live paint -> make, live paint -> expand and then use live paint bucket? sorry for all the questions. I’m trying so hard with illustrator at the moment and the learning curve is kicking my butt but i’m fighting through. The thought thing is that I create things which I know look terrible but for me I’m proud cause It took me so long to create.

    • michaelheald

      Thanks man!

      Yeah I usually start on the outermost lines first, working my way inwards as I go along. I only separate out body parts when (like in this case) they are to be animated. So here every element is individual, even down to the feet, and ankles.

      As far as colour, nope, just standard shape fill colours, no live painting :)

      Illustrator is really tough at first but once you’ve nailed the basics it’s a wonderful tool!

  • This is so useful to read! Thanks for sharing. Over the last year or two my job has gone from “odd bit of UI dressing up” to full blown UI designer & artist, but I am still very weak with vector art. I’ve recently got a hold of Illustrator at last and I’ll be trying out these techniques!

    • michaelheald

      Thanks Louisa! With the explosion of mobile and the Indie scene in general, there’s a lot of work out there in UI and illustration now. Its rather awesome isn’t it :) Glad that the tutorial is of help!

  • Great tutorial Michael, I’m a massive fan of your artwork and would also love to see a video tutorial one day too. Thanks for putting this together and I look forward to the game, definitely my cup of tea :)

    • michaelheald

      Thank you! Glad to hear the game is one of interest! I’ll definitely be doing a video tutorial along the way, hopefully many!

  • Hey Michael, Thanks a lot for this tutorial on your process. I really loved it and would love to see a process video from you :)

    I am having difficulty creating characters like these in Illustrator as I am more into Flash world. I create my characters and backgrounds in flash itself and then animate them. But the line quality and crispness in you characters is what I miss in Flash. :( That’s why I started leaning Illustrator to give better line quality and feet to them. But it’s giving me a tuff time. Can you please share some tutorial link on how to create those varied strokes in illustrator and for pathfinder? Hope you understand well my problem? Flash is easy and quick to create anything in vector but lacks some tools which illustrator provides.
    I would like to know your opinion on this point please?

    Anyway, I always loved your work and today I saw your updated stuff on website :D
    That’s like food for my creative hunger ;) Please keep inspiring like this.

    • michaelheald

      Thanks man, glad you found the tutorial useful :)

      I plan on creating a few more of these, so I’ll try to cover the stroke work in more detail next time. In the meantime, just play around with all the stroke settings in Illustrator, there is a LOT of control in there. You’ll be surprised how much.

      Thanks again!

  • titaniumapple

    Hi Mike, awesome stuff, I’ve been following your work for a long time (and once asked if you could do some toy design for my employer, you were too busy unfortunately! ) – it stands out head and shoulders above everything else on the web!

    I’ve got a few semi-related questions – how do you deal with looking at a screen 8+ hrs a day? Do you have eye problems/take lots of screen breaks?
    Also, how did you approach starting this project? Did you need investment? And were you worried that the time taken to develop this (and displaying it on the web) would mean it might get copied and released sooner than you, by people with a bigger budget/bigger resources?

    After following your work for so long it’s great to see that taking a risk and devoting yourself to your passion is going to really make you successful (and a millionaire!). I’m very tempted to develop something I’ve got, but location (England’s cold!) and investment (I’m skint from travelling!) are making me think twice!

    Cheers,

    Adam

    • titaniumapple

      Oh also one more thing (and after looking at all of your latest uploads, the million dollar question..):

      How do you manage your time so well?

      Do you use project management software? Notebooks? Calendars of naked ladies?

      I’ve been looking at trying to integrate Gmail/Google Drive/Asana going forwards but would love to know how you manage your time and projects because you’re so damn productive!

      Thanks,

      Adam

      • titaniumapple

        Btw get better soon!

    • michaelheald

      Hey Adam, glad you liked it :)

      In response to your questions, please see below…

      Q. How do you deal with looking at a screen 8+ hrs a day? Do you have eye problems/take lots of screen breaks?
      A. Yeah, lots of regular screen breaks and always try to look/go outside when I do. The light and distance difference forces your eyes to flex :)

      Q. Also, how did you approach starting this project? Did you need investment?
      A. I’ve been saving for about 10 years to do this, so its all funded by me so far…which is proving very hard on the purse strings ;)

      Q. And were you worried that the time taken to develop this (and displaying it on the web) would mean it might get copied and released sooner than you, by people with a bigger budget/bigger resources?
      A. Always was and always will be. But I wanted to create an open development process where people could see the game unfold and you cant do that without exposing the game to the world. Its a gamble I guess.

      Hope that all helps :)

      • titaniumapple

        Fantastic thanks! It must have been hard waiting so long to start it! And it’s great your gambles are paying off :) If you get a sec (I’m surprised you’ve got any spare seconds!) would be great to know how you manage your time/keep track of project progress, thanks again and good luck (I’m sure you don’t need it!)

  • please more!! i’m so amazed by your work! it’s so perfect and simple! sigh! i can’t wait to be good as you!

    • michaelheald

      Thanks man and sorry for the delay in my response, its been a mad few weeks. The kind words are very much appreciated too and I’ll try to make some time soon for a new art based post :)

  • Really great post! Will you be doing an environment art post still?

    • michaelheald

      Hey Adrian, thanks for the kind words! I’m planning on one yes, stay tuned :)

  • Tinku Jodha

    Really amazing art and everything on the website

  • MRxRadex

    So awesome! Your game has beautiful art and animations! Please, please, write more tutorials, that were promised. LOVE IT!
    You have a new fan.
    Good luck!