I am available for freelance work - HIRE ME

The Manual Comic Technique

posted by Radu Chelariu on Jun 17, 2010.

In this tutorial, we will look at a simple technique for creating comic-styled illustrations, based on original photographic reference material. The real benefit of this manual technique is the high degree of control that it gives you over the illustration.

Wait. What? Is this really another “turn a photo into a comic” tutorial? Well, yes and no. Yes, I’ll be showing you how to turn a regular photo into comic-style illustration but no, I won’t be using any filters or effects. This one’s all manual, baby!

The Manual Comic Technique

The Manual Comic Technique

First, one must ask the obvious question: why? Why spend the time drawing the whole thing when there are super fast filters and plugins, etc. that do just as good a job? The answer is quite obvious, actually: control. By doing everything yourself you have complete control over every aspect of the design, from stroke width to color choices.

So, without further ado, let’s dive right in.

I used this picture from SXC for our base (*thanks to user Mart1n for his contribution).

The Power Rangers in Sweden

I chose this picture because of the superhero-like pose of the characters. They kind of look like the Power Rangers, right?

The great blue yonder

Structurally, this techniques follow a “back-to-front” method, where you start by first creating the background elements and finally the foreground ones. It’s pretty self-explanatory, really.

Choose your colors wisely, Neo.

The “rule” surrounding color choices for an old style comic is (as the illustration above depicts) to not choose colors along the edges of the HSV histogram, regardless of hue. Constraining your color values is also an almost fool-proof way of making sure your designs are chromatically pleasing.

Pop goes the foreground!

Because the focus is on the characters in the picture, not on the background, it makes sense to spend little to no time thinking about it. A simple, clean background will automatically make any elements in the foreground pop out. That’s a good thing.

Zoom in on pen trace

I hid the blue background in order to move on to the foreground elements, the four characters in my case. I lowered the opacity of the shape layer and drew in the lines using just the Pen tool, I loosely tracked around the most contrasting elements of my characters. Remember that word: loosely. Don’t strive for perfection. The point of this style of illustration being flexibility and a very organic feel, which translates, design wise, into irregular, flowing shapes and lines.

Possibly the simplest comic

About 15 minutes later, this is what I’ve got (sky layer turned on, of course). While this qualifies as a comic-style illustration, we’d be pretty lazy to leave it like this. So let’s make their skin.

Yes, in my design everyone's orange, regardless of race

Using the Pen tool again, I drew the skin layer underneath the stroke layer. You only need to care about not stepping out of the lines described by the stroke layer.

Cool tones and steep perspective make this design quite dramatic

In this step, I made a skin shadow layer. I didn’t use a regular black or gray because I wanted to set a chromatic transition between the orange-ish skin and blue background. Thus, the desaturated purple I decided on works pretty well. I find that choosing secondary colors on the basis of transition is usually a good bet and the results are quite pleasing.

The clothes are simple shapes with colors from the dark-desaturated areas. I stayed clear of warm colors to further emphasize the characters’ faces.

By now you must have realized that while this technique involves little actual execution, it’s mostly based on color relationships and meaning. That’s because as the shapes of the characters become more and more sketchy, with less details than in real life, individual colors begin to have a much greater impact than they do in, say, photography.

The moon-like pale circle behind the characters further emphasizes the whole dramatic atmosphere I’ve been working on and really livens up the whole shot.

I almost always recommend leaving the shadows/highlights to the end of the illustration. This ensures a well designed piece. I drew a black (shadow) and white (highlights) layer above everything and then turned the opacity down to 50%. Simple!

And there you have it, folks, that’s how you manually turn a photo into a comic-style illustration. The overall work time was little over an hour and a half, so it’s not exactly time consuming. To me, the time spent on the illustration work is negligible, considering the upside of having complete control over how everything looks. And that’s something no filter or plugin can offer.

Post A Comment

Also from Echo Enduring Media:

An Unfolding Tale

About the Author

Radu Chelariu owns and runs Sickdesigner.com, a small but dedicated web design blog. He's also passionate about guitars and an avid Twitterer.

Like this post? Help Promote it!

Comments

Jun 17, 2010

Richie says:

A good tutorial, i must admit. In a nutshell, does this mean “If you have mastered the pen tool, you pretty much have dealt with the comic appearance thingy”?

I am not a full bottle on the pen tool, but thats only half of my problem, right? What about the shadows on the subjects? What about the skin tone and saturation? How may i assess that? Any tips, Radu?

But, this is a good tutorial considering no sad @$$ plugins are used :)

Jun 17, 2010

Aaron says:

Great article. I just stumbled upon this method after getting my first graphic tablet. Nice to see someone else using it. =)

Jun 18, 2010

Keri says:

Awesome tutorial! I was searching for tuts like this several weeks ago. I read a ton, but yours is easily the best.

I love your advice about choosing the secondary colors to make a transition. It’s so simple and yet so effective. I’ll definitely be using that in the future. Can’t wait to start playing around with this =)

Jun 22, 2010

Brad C says:

Oh, Noes! This is going to put me out of work ;)

Jun 23, 2010

Radu says:

Erm….coming from you, that’s just about the best compliment I could have received in regards to this tut. I am just speechless. Thank you!

Jul 11, 2010

webdesign bremen says:

great tutorial!!
i will try it

Jul 18, 2010

Iulian I says:

I enjoyed reading this tutorial but I am a little confused. Why should web designers do these things as they don’t make them illustrators or graphic designers. I can trace or copy things but that doesn’t really make me a real artist and I really suck at it if I would have to draw people with a real pen or using a tablet.
Since you seem to have some experience with this, could you explain if this is a valid point? I am a sort of beginner in the web development field…just trying to sort things out for myself.thanks.

Jul 19, 2010

Radu says:

Thanks for your comment, Iulian. You bring up quite a good point here.
First of all, there is no clear definition as to what a web designer is. A few months back, there was quite a stir on Twitter as Elliot Jay Stocks asked whether web designers should also code.
I guess it all depends on how you view your profession and what your strongest skills are. Certainly, if illustration is not up your alley, you should consider improving on what you feel most comfortable with.
To me, a complete web designer needs to wear a whole store full of hats. From graphic designer to illustrator, to front-end coder, UX designer and information architect. And strive to be the best one can in all these fields. Sure, a lot of people decide on just one. And that’s perfectly fine. It means they’ll get to be very good in their field faster than someone pursuing all of the above will. But, in the end, as I said, it’s a matter of what you feel comfortable with. Illustration is a big part of web design (just take a look at any design gallery) but whether or not it’s something you want to pursue is entirely up to you.
Hope that clears it up for you!
Cheers, buddy!

Jul 19, 2010

Iulian I says:

Radu

Well, when you link illustration to the web then I’m right there, that’s my alley, too. Illustrator is one of my favorite programs and drawing logos, web backgrounds or different static objects such as landscapes, buildings, even flowers is something I enjoy doing it. But if you take me out of the illustrator to draw people or do sketches (on a paper or with a tablet) such as those in New Yorker, for example, then I can’t do that. I simply lack those real art skills. I would probably have to go to an Art school to get those skills.
Anyway, your answer helped; thanks for your insight and for mentioning real life examples when explaining your view.

Jul 19, 2010

Radu says:

@Iulian: oh, it seems I had you pegged all wrong. My impression was that you were leaning to the programming side of web development.
In light of this new information, I think I should point you to just about the coolest thing for “strictly digital” illustrators, such as yourself: http://www.signalnoise.com/live/
It’s a live broadcast each Thursday where we mere mortals get to ask, talk and sometimes harass James White, otherwise known as Signalnoise. He’s helped me to move my bum and actually start drawing again. It’s tough, but definitely worth it and it’s especially easier when you have an accomplished artist backing you up.

Jul 21, 2010

Iulian I says:

Thanks for the signalnoise, Radu. I will definitely tune in. Do you happen to know a place on the web where people may give you feedback on your design work?
I am redesigning my website and looking for opinions from people with some experience designing the web about it. Maybe it’s nothing but maybe it ends up well.
Take care bro.

Sep 21, 2010

sebastian says:

Omg this is what i was looking for. Great tut!Thanks for sharing

Nov 16, 2010

Jatin Jain says:

Thanks a lot for another great tutorial. It’s just what I was trying to find. Truly fantastic post.

Leave a Comment

Copyright © Echo Enduring Media 2009-2014