Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

Create a Vivid Themed Illustration Using Simple Hand-Drawn Elements - Part I

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

Drawn elements are certainly something that can enhance an illustration. Even if you're not very good at drawing, you can still create a quality piece. All you need is a good idea and some Photoshop skills. And if you don't believe me, you will definitely change your mind after reading this tutorial. So let's take a look inside!

Final Image Preview

Take a look at the image we'll be creating. 

Part I - Tutorial Details

  • Program: Photoshop CS3
  • Difficulty: Intermediate - Advanced
  • Estimated Completion Time: 2 hours

Introduction and Preparation

It's a themed illustration about "No Beauty," this hides an idea that no beauty lasts forever. Suddenly all that's great and beautiful falls apart. All the happiness is gone with the colorful pieces. The final outcome has its own mood, even thou it's colorful, it's still kinda frightening.

And as I said this is kinda simple but you may be wondering why this tutorial is labeled as advanced level. Well everything is fine as long as you have some base to work on. Here we have absolutely nothing, we will create this piece from scratch. So what's hard, is all the illustration depth, shading and colorization. Beside that, there are some things you just need to feel.

Ok, now let's take a look what we're going to use:

Step 1

I always try to work on a big canvas, but for the tutorial purposes I will go use a document that is 815 px by 1050 px. Just to save you some money from buying large pictures. Anyway, drag the paper texture to our document, duplicate it twice and to each copy hit Command + T (Free Transform) and then select Distort. Refer to the second image below and look how to transform these two paper copies, they need to create a perspective as shown.

Now in the same image - two green frames show you where to cut the main paper to get a good connection. Finally, grab the Patch Tool and get rid of the bad looking textures (third image below).

Step 2

Next use Command + U and lower the Saturation of this background paper texture a bit. If the texture still needs some work (first image below), then use the Patch Tool or Clone Stamp Tool to cover some imperfections.

Then, let's say that the paper background is some kind of a room, so I thought these walls need some more contrast. To make the texture look better, use the Burn Tool (Range - Midtones), and burn in the connection lines to make it look more like a room.

Step 3

Now, while you still have the Burn Tool selected, make the diameter very small and paint in the top and bottom edges (first image below - where the arrows indicate). This should help to keep the walls, floor and ceiling separated.

OK, look at the second image below. From my experience I knew I'd give this image more contrast in the final product so for now I kinda lowered the overall contrast giving the feeling that all these walls are very light. To do this use levels as shown in the second image below.

Step 4

I assume you have merged all your wall layers together for easier work. If you didn't, let's do it now. Then duplicate (Command + J) the "walls" layer and change its Opacity to Overlay. Now go to Filter > Other > High Pass and add the value of 1 or 2. You should immediately get the result shown in the first picture below.

Now hit Command + Shift + A to select the whole canvas, then Command + Shift + C (Copy merged), and Command + V (Paste). Turn the previous "walls" layer off. Leave only the white background layer visible and the new merged layer.

Create a new layer above all, change its Opacity to Multiply, grab the Eyedropper Tool and sample some dark brown color. Then use the Brush Tool with 0% Hardness and around 3% Flow, and then paint as shown in the second picture below to create some irregular shading. Notice how the floor and ceiling is being created by doing this.

Step 5

Select the merged layer (the one with the whole canvas) and use the Rectangular Marquee Tool to select the top part of the image, then hold Command and drag this part down. This will help us repair the perspective, because in the beginning we made it pretty much random (if you can imagine this, the diagonal wall lines should cross in the center of the image). Next, look at the second image below and use the Patch Tool to get rid of the straight line indicated by the arrows (which is a result of repairing perspective).

Step 6

Let's open the scratchy texture (link in introduction) and hit Command + Shift + U to Desaturate it. Then you can add Levels (Command + L) and enhance the whites, just to make these tiny scratch lines more visible. Take a look at the second image below, what we need to do is place this texture in the floor spot.

There is also alternative way to do this step by stretching the texture (as you see in the third image below) to get the right perspective (using Command + T > Distort), but well, as not everyone has the correct eye to make this right, we can stick to the position in the second image below.

Step 7

As you have positioned this texture, go to Layer > Layer Mask > Hide All. This will make the texture totally invisible. So then grab the Brush Tool, make your brush setting very soft (Flow at around 4% and Hardness at 0%). Then use white for the color and paint on the layer mask of the texture.

The first image below shows the full mask view, and it's shown where I painted to reveal the texture. Now look at the second image below, and notice how nicely this texture blends with the white background.

Step 8

Use the same technique from the previous step to create the ceiling surface. Now open the face picture. Now grab the Eraser Tool set to 100% Hardness and 100% Flow, and get rid of the surrounding skin flowers. An accurate cut out is not necessary, as we will work the face shape in the following steps. For now we also need to resize down this face to make it more suitable to the illustration (third image below). Everything needs its own place in a quality piece, let your own eye be the judge of proportions.

Step 9

Now let's shape up this face. Grab the Pen Tool and draw a curvy path around the whole face. Pay attention to make lots of cavity shapes (absolutely no squares). After you're done, turn the path into a selection and hit Command + Shift + I to inverse the selection (first image below), then hit Delete. Now you should get something similar to the second image below.

When you work on an illustration like this you need to do a lot of work and planning. In the third image below I wanted to show you how I pictured in my head - what the next steps might look like. I sketched the face falling apart, and basically I wanted to do this by smudging the skin, but ultimately this turned out as splashes.

Step 10

I made some further corrections to the face, as I didn't like the face center (first image below). So if you want you can use the Pen Tool to cut more of the face. Pay attention to her nose, the holes are looking kinda weird (like the right one is barely noticeable). To correct this use the Burn Tool (with Range set to Midtones) and a small diameter. Burn the right nose hole (second image below). Be careful, the Burn Tool can affect the nose skin also, so that's why we need a small diameter to make it with precision.

If you still have the Burn Tool selected, make your diameter bigger and paint where the green arrows indicate (third image below). I wanted to enhance some shadows and also the bottom of the face. Soon we will drop some shadow below this face, and to make everything work properly it's good to add shade to the bottom part of this skin.

Step 11

The face seems kinda pale so let's warm it up a little. Select the "face" layer, hold Alt and go to the Layers Palette, and pick Gradient Map (check option Use Previous Layer To Create Clipping Mask). Look at the first image below and use similar colors as mine. Select the Gradient Map layer, change its Blending Mode to Soft Light and lower its Opacity to around 20-30% (not to overload the face with color). Then using Alt again, add another Adjustment Layer, which is Curves and adjust it just a little bit to get the similar look as in the third image below.

Step 12

OK, now make sure you no longer need to change anything in the color of the face and then select these two adjustment layers (Curves and Gradient Map) and also our "face" layer. Then hit Command + E to merge them. Next use Command + J to duplicate the "face" layer, drag the copy below original one and move it a little to the top left (first image below).

You can achieve even more variety and less plane results if you rotate this face (second image below). Then grab the Lasso Tool and make a selection around the indicated part above the nose, hit Command + Shift + I to inverse the selection (third image below) and use delete to get rid of all the unwanted parts.

Step 13

And what is this all about? This face looked very flat to me. To avoid that look it's good to add some depth. As you can see, the first image below is the view that we get after deleting all the unwanted parts from the previous step, and the face cut is barely visible.

We're going to use the Burn Tool (with Range set to Midtones) to add the skin depth by giving some shade to the duplicated "face" layer lying below the original one (second image below).

Step 14

I hope I clear up to this step, because if you didn't understand the previous one, this will be kinda confusing. You may want to review if needed. Now we need to repeat Step 13 to personally chosen parts of the skin. So use the Burn Tool (Midtones) to paint in cavity spots as in the previous step. Then use the Dodge Tool (Midtones) in convex spots (first image below, spots indicated by green arrows).

You can do this to each skin edge, but remember, this may not look good applied everywhere. Also notice that I did those cuts with different angles (on purpose) to get some irregular depth.

Step 15

This may be difficult to understand as well, but don't get terrified, the explanation is straight-forward. Look at the first image below. The selection that you see is nothing else than all these cuts merged together in one layer (the ones we did in previous step). And it looks so weird because there are some skin remains under our original face.

So I hold down Command and left-clicked on the merged "skin" layer's thumbnail to get this selection. So now that you have this selection, create a new layer just below the "face" layer, but above the merged "skin" layer. Now change its Blending Mode to Multiply and pick a dark pink or dark brown color color (like #653737). Grab the Brush Tool, with the settings as usual (Flow at 3% and Hardness at 0%). Then do the same thing as previously, darken the cavity spots again.

Use the same process for convex spots, create a new layer above the previous one, change its Blending Mode to Overlay. Now use the same brush settings (but with a very light, brownish color, almost white) to paint in the convex spots.

This step may not be necessary for you, but I always pay extra attention to details and well, it's important to make this look quality. And I did this because the burn tool and dodge tool don't always do the best job and sometimes you just need to correct it manually.

Step 16

OK, if you're done with the face cuts, I believe you can merge all the "face" layers including: "skin," "shading," "lights," and "face." Then make a new layer below the "face" layer.

Go to the Layers Palette, recall the selection of face (Command-click on the layer's thumbnail). Grab the Paint Bucket Tool, pick a dark color with a little red or brown tone (something like #5b5555). Fill this selection with it (on the new layer) - see the first image below.

Then deselect, and use Command + T to make face shadow (second image below). Lower the Opacity of the "shadow" layer to around 20-40%.

Next you can use the same color and a very soft brush to paint on a new layer in the shadow spot. Do this to correct shadow imperfections (third image below).

Step 17

Now, I took a fresh look at the image and decided to remove a small part of the face because it bothered me. So you can do the same using the Pen Tool (first image below). And you see, it's good to have the "face" layer merged, now you can work easily. It's even better when you have a backup of each part.

In the second image below I used the Dodge Tool on her eyes and eye shadows (first with Midtones, then a little bit of Highlights). When you take a fresh look, many new things can be noticed. Remember to work dynamically!

Step 18

In these final steps we will do some overall adjustments. Go to the top of the Layers Palette and create a new Adjustment Layer there of Black and White. Change its Blending Mode to Soft Light and adjust the Opacity to make it work for you fine.

The adjustment layer should automatically have its own layer mask. So now click on the layer mask and use a soft black brush to paint on the parts that you don't want to get affected the Black and White adjustment layer (I picked mostly the darkest illustration spots).

Step 19

Now, add some more adjustment layers in the top of the Layers Palette. First go for Curves and make the tones of the whole illustration look similar (like everything came from one picture). Then make some more adjustments using Color Balance, and basically it's the same idea. Fill it with your personal settings.

Step 20

Next we're going to add some room shading (first image below), create a new layer above all to do this, and use the Brush Tool with very soft settings (as usual). Pick a dark purple color (like #1a0a18) depending on how your illustration is colored - mine looks kinda cold purple to me.

Now create another new layer above all, hit D on the keyboard to set the colors to default. Grab the Gradient Tool, set it to Radial (from white to black) and fill the whole canvas (second image below).

Finally set this layer's Blending Mode to Overlay and turn the Opacity down to 15%. You can look at the third image below, the spot indicated with green circles shows where we added a little bit of focus by doing this.

Step 21

OK, now this is not necessary (as we will do this in the final product) but to successfully end this part, I hit Command + A (select whole canvas), then Command+ Shift + C (copy merged), then Command + V (paste), and added Filter > High Pass of value 1. Then I turned the Blending Mode of this merged layer to Overlay. This way we get a nice sharpened outcome.

Conclusion

It's great what you can achieve from scratch, having just two textures and a woman's face. The outcome is complete for now. To get the piece done, first we needed the place and main motive - character. So here it is. Now that you have the overall look, we can start planning what kind of effects we want to fill this illustration with, to make it fully complete. And for this we will take care in Part 2. Check it out soon!

Thanks for reading the tutorial. You can view the final image below.

Advertisement