Art Tutorial For Creating CG Fanart

By Tigress Pern

Supplies Needed:

Paper/Cardstock
Pencil
Eraser
Ink Pens (Not Sharpie Brand)
Scanner
Computer
Photoshop Program
Patience

Introduction:

For purposes of making this as easy to understand and not overwhelm anyone, I have divided this tutorial into two sections. In this first section we will mainly deal with the actual drawing and inking of the piece. The second section will dealing with colouring it. I use Adobe Photoshop, so this tutorial will be using that for the colouring. Please keep in mind that this is how I do my art, but that doesn’t mean that it’s the best or only way to do it. This is simply meant as a guide to hopefully answer questions and help people who are just starting out. With that said, onto the tutorial!

Part One: Drawing

First Step:

The first step to any drawing is to come up with a concept. If you’re having trouble you can always look around you for inspiration. I find photographs, art books, artwork and silly stuff my friends do are helpful for coming up with concepts. Once you have a concept, grab your drawing surface and lightly do a gesture drawing. A Gesture drawing is just a very rough sketch of what you plan to do. Use light strokes, shapes and lines to map out what you want to do. Light pencil marks are easy to erase.

For a person, start with a circle for the head then a line indicating the backbone. This gives you a line to follow where the action of the body is. Draw blocks or polygons for the rest of the body. You can see how I did this in Figure 1. This isn’t supposed to look nice, so don’t worry about it smudging.

Second Step:

Now that you have an gesture drawing that you think will work, it’s time to add a little more substance to it.

Fill it in by blocking in more solid shapes for where the chest, arms, hands, feet (if they’re in your picture), abdomen, etc. Correct any positioning problem that you see. Human bodies bend a certain way, so if it helps look in a mirror or grab a friend and pose them so that you can see how the body looks in that position. Don’t worry about getting every finger or toe in at this point. You’re still just seeing if this concept will work or not. There have been plenty of times where I’ve gotten to this step and decided to erase the whole thing and start over.

Third Step:

If you feel that the drawing is going to work and you haven’t started over, it’s time to get serious. Start sketching in the features of the body.

The face is an important feature and you should spend some time sketching it in, but skip the hair for now. (Not everyone does, but I do for the sake of my sanity.) Remember, the eyes are even with each other and the top portion of the ears while the earlobes and the bottom of the nose are even with each other.

Hands and feet are notoriously hard to draw. (For that reason, I’ve decided to not include feet in this drawing.) If you want to do them correctly, spend some time studying your own. I still have plenty of problems with them, but practicing helps remarkably. (Here’s some scans from a human figure drawing book, they can be extremely helpful specially if you don’t have the opportunity to take figure drawing classes. )

Leave off any clothes that your character might wear until you’ve created a body for them to go on. This helps you see how the clothes lay on them later.

Fourth Step:

Add the hair and clothing. This step can take a while as you decide what hair style, what the hair is doing, and what clothes the person is wearing.

Fifth Step:

Firm up all your lines so that they stand out from the lighter ones. Basically this is so that you don’t accidentally wander off on the wrong line while inking. I find it helpful at least.

Sixth Step:

Taking a pen (I use Microns since they’re available and reasonably priced around here) follow your firmed lines and ink in your drawing. When you’re done, erase all the pencil marks off the picture. You should be left with solid black lines.

Some people go over their lines twice with a different size of pen tip, it’s up to you to decide whether or not you want to. Now you’re ready to scan.

Part Two: Colouring

Seventh Step:

Scan drawing into your computer at roughly 300dpi or above. The reason for this is that you always want to work with a larger resolution because you can shrink the image down and it’ll still look good, but not the other way around. For the purposes of this tutorial, we’ll be using Adobe Photoshop. Create a white or transparent Background and put your original image on top of it. Mark the original image layer as Original Image. Next create a layer and name it Base Colour and place it on top of the Original Image (OI) layer. Go into the layer settings and change the Base Colour (BC) layer to “Multiply”. Multiply will allow you to see the underlying layer through the layer you’re working on.

Eighth Step:

Using the Magic Wand tool, go back to the OI layer and select the part of the picture you wish to work on first. Return to the BC layer and chose your colour. This is your base colour for the picture. Don’t worry about shadows or highlights now, just get your colours in.

Ninth Step:

Using the Paint Bucket tool, fill in the selected area on the BC. Repeat steps eight and nine until you’ve put a base coat on the entire picture.

The Magic Wand technique is not necessary, but it’s very helpful. You can, by using the Brush, Pencil or Airbrush tool, colour in the picture as well. It can take longer, but you can also get a cleaner edge. I usually Magic Wand the area, colour it, deselect it and using the Brush or Pencil to clean up the spots the Magic Wand missed.

Tenth Step:

Continue working on the BC layer until it is all coloured in. Now, you can also work on the background of the piece in this layer, but I don’t recommend it. It’s better to work on your main figure or point of interest in the picture first before worrying about what type of setting they’ll be in. You do need to know what setting or background the figure will be in when you start out your drawing initially. You can draw and ink it in along with the figure creating everything you’ll need for the picture right away. Or you can create the setting in Photoshop, which is what I’m doing here.

Once your BC layer is finished, create another layer and place it on top of the BC layer. Label that layer Shadow Colour or Shadow Layer (SL).

You can either set this layer setting on Multiply or Normal. I tend to use Multiply for this layer. This does mean that whatever colour you choose as your shadow colour will be darker when you actually paint it on, it’s just how the Multiply function works. It allows you to see the layers below, this includes the colours below. You can decide which way looks better for your picture once you have the shadows in as well. (I usually test to see after I’ve coloured in the shadows which way looks better.)

Eleventh Step:

Pick a colour that is several shades darker than the base colour. This will be the colour of the shadows for that section. Take the Magic Wand and select the area you wish to shadow on the BC layer then make sure you are on the SL before colouring. (I’ve had many pictures that got messed up and I had to redo portions of because I wasn’t careful which layer I was working on. Always check.)

Using the Airbrush, Pencil or Brush tools, begin colouring in that section. Make sure you know where your Light Source is. The Light Source is where the light is coming from in your picture. You place shadows and highlights according to where your Light Source is. (If you’re having problems visualizing where the Light Source is, create another layer, label it Light Source and draw a sun with an arrow pointing in the direction of where the light is going.) If you discover that you need to darken an area even further than your initial shadow, pick a darker colour and darken that area.

If you’re trying to go for a soft look to your piece, I would recommend the Airbrush tool. For animation cell-like looking pieces, use the Pencil or the harder brushes of the Brush tool.

Remember to save your work often. If your computer crashes of freezes, you don’t want to start over.

Twelfth Step:

Once you are done with the shadows, create a layer and name is Highlight Colour or Highlight Layer (HL). Leave this layers’ setting at Normal. If you change it to Multiply, you won’t see the highlights at all. Make sure you place HL above SL. This is very important otherwise you will once again be unable to see the highlights.

Thirteenth Step:

Pick a colour that is several shades lighter than the colour on the BC. Using the Airbrush, Pencil or Brush tools, begin putting in highlights.

Once again, keep in mind your Light Source. Depending on what your lighting situation is, whether the person is having a green, blue, red, etc. lighting source, you need to pick the appropriate highlight colour.

For example, if the figure were standing under a stained glass window, you’ll want to pick the appropriate highlight colour for where the different coloured glass shines on them. Or if they’re on a beach at sunset, then you’d want redder or more orange highlights. It all depends upon the lighting situation in the picture. So choose wisely.

Remember that a little goes a long way with highlights. Too much and it can ruin the picture quickly.

Fourteenth Step:

If you’re creating some foreground objects, you’ll want to continue on with this step. If not, skip down to the next step.

Create a layer and name it Objects.

Using Magic Wand, the Polygon tool or how ever else you plan on creating the object (some people free hand them in), make the object(s). Place the Object layer where appropriate for your piece. If they’re going in the foreground, make sure they are in above the BC, SL, and HL layers. If they’re in the background, place it below the BC, SL, and HL layers.

Put the base colour on the object(s) and then repeat the steps you took for your figure. Create both a SL and an HL for them or use the original SL and HL layers. It’s all about preference and how complicated the picture it to begin with. For this tutorial I’m doing something very simple, so I used the original SL and HL and didn’t make separate ones for the Object layer.

Fifteenth Step:

If there is any white that is supposed to be showing through, such as the whites of the eyes, you’ll want to go to the BC and, using Magic Wand, select the entire coloured section. The easiest way is select the not coloured area and Inverse the selection. (Inverse is a function usually found in the Select pull down tab.) By doing this, you capture all the coloured section without the hassle of selection each part individually.

Create another layer below the BC, label it White and using the Paint Bucket tool, fill the selected area with white. This will alleviate any problems that will crop up when you later remove all the white from the OI.

If you wish to make your black outline have colour, then continue on with this step and the next.

On your OI, select the black outline, Inverse to select all the white instead. After that use Cut (found in the Edit drop down tab) to cut out all the white leaving you with only your black outline. This can be a troublesome point if your lines have any grey around them.

I’ve found the best way to solve this is by initially scanning on the Black and White setting. Unfortunately this can create a very pixelated look to the lines on a low dpi. (I usually have problems due to the way my scanner is, so I scan using a Gray Scale instead and darken my black outline in Photoshop to avoid the problems. It’s trial and error for this.)

After cutting out the white, move the OI above all the other layers. Click on the box that says Preserve Transparency. Leave layer at Normal setting.

At this point you need to decide if you want to colour your outline or leave it black.

Sixteenth Step:

Make sure you’ve clicked the Preserve Transparency box. I’ve noticed that Photoshop Elements doesn’t have this option, or at least the version I have doesn’t. If you don’t have that option, using Magic Wand, select the black outline if you wish to colour the outline.

Choose the appropriate colours and start colouring the OI. You only want to colour the outline, so make sure you are on the right layer and have everything selected properly.

Once done, save then flatten all the layers except the very bottom Background layer. You do this with the Merge Down (found in the Layers drop down tab). Take the Magic Wand and select the area around the flattened image.

Seventeenth Step:

Go to the Background layer and colour in your background if it wasn’t part of your original figure. For this tutorial I did something very simple, a gradient.

This is one of the easiest ways to fill the space. You can also do solid colour, polka dots, another image, whatever. Crop it down to the size you want it, getting rid of anything you don’t want (like in this tutorial, the place where the legs cut off.) When you’re done, sign the piece using the Type tool or if you have a tablet, you can actually sign it. Flatten all the way down and save as a completely new file. This way you’ll still have your Photoshop file with all the layers in case you want to go back later and change something or make a variation.

That is it. You’re finished. You now have a complete work of art that you can put on your website, email to a friend, or just keep for your own enjoyment.

And now for your enjoyment here’s some animated gif that shows how other artists proceed. As I told you before, all artists have their own unique technique.