Case Study: District With You & Me by Man-Tsun

Man-Tsun was kind enough to contribute an awesome case study of one of his amazing illustration for the Vectips Readers! It’s really great to see the process of other illustrators! Moreover, I think us readers of tutorials are sometimes too focused on individual steps rather than seeing the bigger process of creating an illustration. So read on to get some great insight!

Final Image

Before the digital age, my work was mostly created by ink on paper, but nowadays everything is computerized. I have shifted to vector art and feel no medium can allow me to create line art with such freedom and fluidity.

Recently, I was briefed to create an illustration featuring one of the famous districts in Hong Kong – Sham Shui Po.

Here are the tools for creating this illustration: Adobe Photoshop CS3, Adobe Illustrator CS3 and a pack of M&M’s, just to keep myself awake…

Step 1

Before creating the work, I visited the site to capture characteristics of the area. It really helps the concept and composition of the illustration.

Step 2

Like most illustrators, I start with a quick sketch on Photoshop, just to outline the rough characters and the composition. Further details will be created in Illustrator.

Step 3

Here comes to the most interesting and time-consuming part to me. Based on the rough sketch, I illustrate the characters in detail. I create very fluid lines by using the Pen tool. Somehow, it looks very Japanese Manga to me, which I like it a lot!

Step 4

The Paintbrush tool can easily draw any hairstyle, but before working on it, I create a custom brush to draw very thin lines with pointy ends. Once these lines are grouped together and overlapping, the hair will look rich and less chunky.

Step 5

By now the first character is done. I repeat steps 3 and 4 for the rest of the characters….

Very soon the whole family is ready. Since there are some extra details in the last two steps, I change on the positioning slightly.

In order to fill up the gaps in between characters, I pick a few characters from my other works to squeeze into the layout making the street look packed.

Step 6

In most of my illustrations, I don’t create detailed backgrounds. To be honest, I just don’t really like working on it…

However, this project is about a famous district, so there is no way I can skip the background. Therefore, based on the reference picture, I put some major features together.

Step 7

Most of the drawing part is finished and it’s time to start the coloring. I am really addicted to pale colors, however, it looks odd without any gradient and shading on top. Once I apply more layers of shading, it begins to look more comfortable.

Step 8

This illustration is very much close to finalized. The only two things left are the company names on the signs and the sky.

Step 9

Now, all the vector work is done. Just before showing this to the client, I jump to Photoshop and apply a very light blur on some random areas, just to give a bit of a illusory touch to it. This is what I usually do before finalizing on must of my works.

Hope this is inspiring to you!

Final Image

These icons link to social bookmarking sites where readers can share and discover new web pages.

Hi! awesome work man, congrats! only one question for you, I’m about to begin a course of illustration, and I intend to become an illustrator myself. How long it took you to get on that level of artwork?

I always thought it was a guy on the right with one single diamond tear. Until one commentator here says “diamond warted lady on step 3”
Please tell me, either “he” is metrosexual or “she” is a transexual in transition to a guy.

Hey, when you draw in Photoshop I notice the lines are really smooth. I’ve been having trouble using my tablet and getting lines that don’t end up being jagged at full-size. What type of tablet do you use and what, if any, specific settings have you changed to get the types of lines you’re getting? Thanks a lot.

I’m looking at the face and clothes of the diamond warted lady on step 3. The lines are varying in size.
How do you do that? Pressure sensitive blob brush or brush tool?Or very thin closed shapes with the pen
tool?And the very thin parallel lines on her sleeves? And the big black shade under her left hand is it a different
object or part of the hand or leg(I mean i guess it’s a different one. Do you fit it with the hand and leg using outline mode?)? Where do you learn to ink like that when you are a 43 year old father and psychiatrist who doesn’t know anybody in the field?

Thanks for this post. It was a great insight into how illustrators may break up a project to make it more manageable.

I’m not an illustrator, however I appreciate the time, details and work that goes into creating a piece of work like yours and find it fascinating how details don’t grab you all at once but keep appearing the longer you look at it.

What sources do you draw your inspiration from? The main reason I ask is the photograph is nothing like the final image. Do you know what it’s going to look like before you put pen to paper or mouse to hand? Or is it an ongoing process that changes and evolves all the time?

Before i started the sketch, i already had a clear picture in my mind that the whole illustration will end up packed with people.

In order to give these people a bit more of a characteristic, i went for an on-site visit and carefully observed the people behavior and what they are buying. then i can easily sketch out everything and transform these people into some stylized characters.

Hey Man-Tsun, I know you had mentioned a week and half on time it took. Now does that translate to approx. 60hrs? I know what you mean about time-consuming areas of the artwork. Problem is, most clients don’t realize how much time can go into a given design!

Hey Tony
Yes you are right. Client usually wont give us a reasonable time to work on their project.
However, on this project i was lucky enough that the client gave me a very loose timeline. This is why i could spend so much time on all these crazy details : )