How To Draw a Character of Chinese Boy Using Photoshop Tutorial

Author: | Posted in Photoshop No comments

How To Draw a Character of Chinese Boy Using Photoshop Tutorial

China is a nation with great traditions, with a long history of garments and ornaments. Bright colours are preferred for clothing in Chinese culture. The red color is always associated with “happiness and good fortune“. It is symbolic of fire with expansive energy and wards off evil spirits. The other color to be very special is yellow. Yellow is corresponding with earth and farming. With stabilizing energy, yellow signifies neutrality and is the center of everything. In this tutorial below, we will learn how to draw a Chinese boy using Adobe Photoshop from blank page. It just need our patience while we draw the paths, understand the lighting, and paint using Brush Tool manually. So let’s begin.

Tutorial Details

Program : Adobe Photoshop CS+
Difficulty : Intermediate
Estimated Completion Time : 4 Hours

Tutorial Assets

The following assets were used during the production of this tutorial.

Step 1 – The background

Create a new document with 800 x 600 px dimension. Then go to layer pallet, and double click on the Background to turn it into plain layer.

The background

Double click again to load layer style window. Add Gradient Overlay on it with normal blend mode, radial style and 90° angle. For color, use #f5a700 to #f5f200. When the layer style window is still opened, we can adjust the location of gradient by dragging it.

The background

Create a rectangle, you can use Rectangle Tool (U) with any color, we will add layer styles for it.

The background

Apply layer styles on it. Drop Shadow, Inner Shadow, Bevel and Emboss with Contour, Gradient Overlay.

The background

And also add Stroke. The result is shown below.

The background

Step 2 – Drawing the base shapes

Use Pen Tool (P) to draw the path of the head. On the option bar (top left), set to Shape layers. We can draw manually with Pen Tool (P), or maybe create the ellips first using Ellips Tool (U) and then edit it, create the shapes of ears and neck. The skin colours of East Asians to be closer to yellow or white, so use #f0eaa0 for color setting. And don’t draw too big eyes because chinese have slanted eyes. Create eyes with white color, eyebrow with #312222, mouth with #f56767, and nose with #bb8257.

Drawing the base shapes

For the shape of shirt, set color to #ea0101. You can see this image below. We’re going to create greeting pose of this boy. His hands are located in front of his chest. So the shape is like this.

Drawing the base shapes

Next, for his legs, draw the shape of trouser with black color. Draw it with Pen Tool (P) and add detail of it. I mean the indentations.

Drawing the base shapes

Also the black shoes and white socks.

Drawing the base shapes

The hat has three parts, red, yellow, and the tip which has red color too. For the red part, we can create a rectangle first with #ea0101 color, draw it using Rectangle Tool (U). Then edit it, add anchor points on right and left side, Use Add Anchor Point Tool or Pen Tool (P) with Auto Add/Delete. Arrange the points so that red part of the hat looks like this image below.

The yellow part is a half-round yellow shape. Create a #ffc600 circle using Ellips Tool (U), and use Rectangle Tool (U) to create a rectangle, draw it on the same layer. After that, select the rectangle using Path Selection Tool (A), then look up the option bar, select “Subtract from select area (-)”. So the circle will be reduced to half.

And the red tip can be created using Ellips Tool (U) with #ea0101 color.

Drawing the base shapes

Here is the result of drawing base shapes, just like this.

Drawing the base shapes

Step 3 – Detailed eyes

Create the pupil, activate Ellips Tool (U) and set color to black then draw a circle in the center of the eye. After that hit “Cmd + Opt + G” / “Ctrl + Alt + G” to create clipping mask. To make the eye become more atractive, add shadow and highlight. Create a new layer above the layer of eye’s base (Cmd/Ctrl + Shift + N), name it “Shadow” and create clipping mask. Then use Brush Tool (B), on the option bar, set the opacity to 10%, choose soft round brush with 0% hardness. Then paint the dark side manually in the lower part of the eye with black color. And about the highlight, create a new clipping masked layer, then use Brush Tool (B) to create two white dots. First dot with low opacity and second dot with higher/thicker opacity.

Detailed eyes

The base of eye will be nice if we add Inner Shadow on it.

Detailed eyes

Like previous step, add the details to other one.

Detailed eyes

Step 4 – Hair

We also need to create hair, draw it using Pen Tool (P) behind “Hat” and in front of “Face”.

Hair

Step 5 – Detailed mouth

Add Inner Shadow for mouth, set like this.

Detailed mouth

Create white teeth using Pen Tool (P), and create clipping mask using “Cmd + Opt + G” / “Ctrl + Alt + G”. The right and left side of the teeth must darker, so we have to apply Gradient Overlay onto it. The gradient color is Black – White – Black. with 50% opacity.

Detailed mouth

To add depth to the mouth, create a new clipping masked layer in front of “Mouth’s base” and behind “Teeth”. Paint soft black shadow with soft round Brush Tool (B), low opacity and 0% hardness.

Detailed mouth

Step 6 – Detailed face

Well, on this step, we start trying to understand the lighting and the face curve. We’re going to paint shadow (dark parts) and highlight (light parts) that will form the curve of face. Okay, create a new clipping masked layer named “Shadow 1″ and set the blending mode to “multiply”. We will paint the dark parts of the head but not including the neck. So take selection from the shape of head’s base using “Cmd/Ctrl + Click” the layer on the layer pallet. And to cut the selection, use Polygonal Lasso Tool (L) and select “Subtract from selection” or simply we can hold Opt/Alt key. With Polygonal Lasso Tool select the neck in order to discard it. And now the selection includes all the head’s shape without the neck.

Detailed face

Now activate Brush Tool (B) and use soft rounded brush with 10% opacity and 0% hardness. Set color to #a09c71. Paint soft shadow on particular areas. See image below for reference. If you’re disturbed by the selection appearance, you can hide it by pressing “Cmd/Ctrl + H”. Don’t forget to add soft shadow under eyes, eyebrows and hair.

Detailed face

Gradually, choose a darker color to paint the shadow. #656347 is a good color to paint next shadow. Create a new clipping masked again, set multiply blending mode and paint like before.

Detailed face

The neck is the part that is somewhat hidden from light source. Its shadow must be darker than face’s. So use #2e2d21 to paint neck’s shadow. But we must invert the selection using “Cmd/Ctrl + Shift + I” so the face will not be influenced by the painting. Paint it on the new clipping masked layer with multiply blending mode. We may adjust the opacity of the brush to suit our need. With the differences in darkness and thickness of the shadows between chin and neck, so the detail of these areas has been formed. But I think it will be better if we also add the darkest shadow (I mean #2e2d21) onto left jaw, inner ears, and near the hat because those areas also darker than others. But before painting we have to remember that the selection is still just including neck, so we must invert selection again using “Cmd/Ctrl + Shift + I” then start to paint.

Detailed face

The face and head with shadows (dark areas) are still incomplete. We also have to add highlights (light areas) to get better result. Use a brighter color than base’s color. We can use #eeeaba, create a new layer and create clipping mask then set the blending mode to “Screen”, paint softly on the areas which shown with red dots in the picture below.

Detailed face

Create two ellips using Ellips Tool (U) with #e96262 color. I recommend you to create an ellips and duplicate it with Path Selection Tool (A), hold Opt/Alt and drag it. Then reduce the layer opacity to 30%. After that, click menu Filter > Blur > Gaussian Blur, the shape layer will be rasterized, just OK and process the blurring. We can use 5 pixels radius on Gaussian Blur.

Detailed face

Step 7 – Detailed hat

Adding details like previous steps just about painting shadows and highlights. For the “Hat”, let’s begin from “Red” part. Use “Cmd/Ctrl + Shift + N” to create a new layer and don’t forget to create clipping mask and choose multiply blending mode. Name this new layer “Shadow 1″ and prepare your Brush Tool (B). Of course with soft round type, low opacity and 0% hardness. For the size, we can suit to our need. Start to paint on right and left parts because there are no much lights reach those parts. And paint on the other part if you want to make a curve so that it will seen as if it’s a bent object. First, paint with #b00202 color. Then use a darker color to paint on a new clipping masked layer, we can use #7e0101 for this. Next, the darkest shadow, #3c0101 on a new clipping masked layer. Please note that the darker shadow must have smaller area. See image below, I hope you’ll get idea.

Detailed hat

The highlight area of this object is less than shadow’s. On this case, the area of highlight is located above the right eye. I give two levels of highlight, first using #f33f3f, and the second one is using #f37979 with smaller area than first highlight. Paint them on clipping masked layers using screen blend mode.

Detailed hat

The “Red” part has been finished. And the next part is “Yellow”. Actually there are no significant differences here. Just paint like before, use #dbaa00, #ae8701, and #7b6001 gradually to paint the shadow on clipping masked layers with multiply blending mode.

Detailed hat

Also the highlights, use #ffd339 then #fedd69 on screen blend mode clipping masked layers.

Detailed hat

The tip of hat, the small red circle need Inner Shadow layer style. Set like this.

Detailed hat

Step 8 – The complements

Next, we combine yellow color onto the red shirt. Create a rectangle using Rectangle Tool (U) on the bottom part of the shirt. Set color to #ffc600 and then create clipping mask (“Cmd + Opt + G”/”Ctrl + Alt + G”)

The complements

Download the Chinese Dragon Brush from Alex-Zhang. Then create a #ffc600 dragon on a new clipping masked layer, scale and transform until fit to right proportion. Then apply Smart Sharpen, click menu Filter > Sharpen > Smart Sharpen. Set amount to 200% and radius to 1.0 pixels.

The complements

This boy is performing chinese greeting pose. One hand is clenching fist and another else is covering. Draw carefully using Pen Tool (P) with #f0eaa0 color.

The complements

Draw two yellow shapes in front of the hands to create the shirt cuffs. Use #ffc600 for color setting.

The complements

Step 9 – Detailed shirt

To make the shirt looks more realistic, we will add shadow and highlight. Like previous steps, paint the shadow on the “Red” part first, than on the “Yellow” part. Create a new layer named “Shadow 1″ with multiply blending mode and create lipping mask. This new layer belong to “Red” part, our painting shouldn’t affect the “Yellow” part. So, take selection from “Shirt” shape by “Cmd/Ctrl + Click” on Shirt shape layer, and then “Cmd + Opt Click”/”Ctrl + Alt + Click” on the “Yellow” part layer. The selection will be cut.

Detailed shirt

The important thing we must understand on adding shadow for this “Shirt” is how to make condition which bend the elbow joint. If we can do it well, next we add shadow on the right and left parts like we did on the “Hat”. And then we also need to paint shadow to make the shirt looks wavy. Use #b00202 for color setting, paint carefully with low opacity and 0% hardness Brush.

Detailed shirt

The next shadow, we use #7e0101.

Detailed shirt

#3c0101 for the darkest shadow. This shadow also make the shirt be more detailed.

Detailed shirt

The bottom part of the shirt has yellow color, so give the special painting for it. On a new clipping masked layer and multiply blending mode. Take selection from “Yellow” shape layer by “Cmd/Ctrl + Click”. And for the shadow color, gradually use #dbaa00, #ae8701, and #7b6001.

Detailed shirt

Next, the highlights for “Red” part. Use #f33f3f and #f37979 to create highlights on screen blending mode layers.

Detailed shirt

For “Yellow” part, use #ffd339 and #fedd69 to paint highlights.

Detailed shirt

Add some accessories, maybe the chinese fasteners. Just create a rectangle and bend it, then add circles at right and left. Select them using Path Selection Tool (A) and click Combine on the option bar. Then duplicate it several times. To make more realistic, add “Drop Shadow” and “Bevel and Emboss”. The setting is shown below.

Detailed shirt

After creating fasteners, it will be better if we add the shadows. Look at this image for reference. Go back to the shadow layer and paint again.

Detailed shirt

Add some accessories, maybe the chinese fasteners. Just create a rectangle and bend it, then add circles at right and left. Select them using Path Selection Tool (A) and click Combine on the option bar. Then duplicate it several times. To make more realistic, add “Drop Shadow” and “Bevel and Emboss”. The setting is shown below.

Detailed shirt

After creating fasteners, it will be better if we add the shadows. Look at this image for reference. Go back to the shadow layer and paint again.

Detailed shirt

Also add shadows and highlights for the shirt cuffs.

Detailed shirt

Step 10 – Detailed hands

The shadows and highlights of the hands have the same colors with the face’s.

Detailed hands

Step 11 – Detailed trousers

The black trousers just need highlights. Paint the highlights with #393939, #5c5c5c, and #828282. And don’t forget to set the blrnding mode to screen.

Detailed trousers

Step 12 – Detailed socks

We don’t need to add highlight to socks, just paint #8f8f8f and #535252 for shadows.

Detailed socks

Step 13 – Detailed shoes

Draw the soles of the shoes with #cccccc using Pen Tool (P) and create clipping mask. Then add shadows with #8f8f8f and #535252. And for the shoes, add highlight with #393939 and #5c5c5c.

Detailed shoes

Step 14 – Shadows under the boy

There are two shadows here. First, the thinner shadow, shown below as number one. And the second is the thicker shadow, shown below as number two. Paint them with soft black.

Shadows under the boy

Step 15 – The texts

To reinforce the impression of chinese, add the chinese word. Go to Google Translate and type “prosperity”, translate it into Traditional Chinese, then copy the characters and paste onto Photoshop. Next, write a sentence of wish or blessing under it. Also add your name. On this case, I put the name of this website, “Tutorial Lounge”, with #017da1 and #0097c2 rectangles for its background.

The texts

Final Image

I hope you had fun following this tutorial and find it useful.

Final Image

Add Your Comment