Elfwood is the worlds largest SciFi & Fantasy community.
  - 152410 members, 5 online now.
  - 12517 site visitors the last 24 hours.

 

 
 
 

Fantasy Art Tutorials in the FARP Section

Comic-Style Colouring

By Georgette Tan


As if the world needs another article about colouring with Photoshop. Well, each to his/her own. There are many ways to use Photoshop and the techniques that float my boat may differ from the next artist. Anyway, if you think I'm wasting your time, move along and go read something more useful, like fair use or how to choose the right pencil. For the rest of you, on with the show.


Part 1: Preparing The Image

What we're going to be doing here today is comic-style computer colouring. We're talking about clean lines and solid colours. Our first order of business is to have a picture to work on. I went with this obviously bare-chested gentleman with the cute goatee, whom I hope will appreciate the coat of paint I'm about to give him. This is just a concept sketch as you can see, and let me take this opportunity to stress that you need clean lines in order to use this method of colouring. I'm not saying that you can't colour it just like this, but it'll take a different kind of technique and a whole other article. Anyway, this sketch is way too messy to work with.

If you're too lazy to start over from scratch, easy - use tracing paper and a technical pen to do him over. Remember to keep your lines clean (none of that sketchy stuff) and make sure your lines connect where it is necessary! Why? We'll be doing a lot of selection here and gaps, no matter how tiny, will cause the selection to bleed into a totally different area. You don't have to connect every section of hair since it is all one area. I made that mistake for his goatee (hey, it's one of my first goatees!) and I'm going to have trouble with that later.

Tracing paper usually doesn't scan well without some kind of backing so pad the back with several pieces of white paper when you pop it into the scanner. If you don't know how to scan, there's another article dealing with that somewhere. Here's a tip - scan big. It's easier to work with, especially if you plan to include a lot of detail. A big scan also helps you get to those small areas like corners or that goatee that's gonna be a pain in my rear pretty soon. If your scan came out looking funky, you'll need to do some cleaning up. Remember, we want a white background and solid black lines. If your lines are done well on paper, you shouldn't have too much trouble here. To get rid of that icky greenish background my scanner somehow spat out, we need to get out the Brightness/Contrast box. (Image - Adjust - Brightness/Contrast)


After Brightness/Contrast

Half-darkened by Airbrush

To get the paper white again, set a high Brightness or until you see white. Then get the lines to show clearer by upping the Contrast. About one-third of the number you set for Brightness should work, but experiment around with the numbers to get the kind of effect you like. If the lines aren't dark enough to suit you, get busy with the Airbrush. There is an easy way to do this that doesn't involve painstaking retracing. Choose a brush size to suit your needs and a colour from the palette. You can use any colour you like with this method but for the sake of uniformity, let's use plain old black.

Go over to Airbrush Options. Now here's the important bit. Choose Overlay from the menu. Overlay is a nifty function that allows you to work on the lines on your picture without effecting the background. Set the pressure to 10%. A low setting gives you a bit more control. A big brush can cover more area with minimum sweeps, but you may have lines in the right shade of black that will look peculiar if it gets any darker. So a small brush may be ideal so you can work over individual lines without spoiling its neighbour. Don't forget to save your work often!

Now we have a picture all ready for colouring! I like to keep the original intact so what I'd do is save an extra copy before I start colouring, or copy out the image into a new layer minus the background. This is easy - use the Magic Wand and select the background, goto Select - Inverse (now you know why I made a bust-style cutoff on his chest!), then Copy and Paste. If the empty background bothers you, create a new layer and fill it with white.You can skip this entire section if you like but a copy can be a lifesaver if you mess something up. and you never know if you might actually need it!

 


 

Part 2: Applying Base Colour

This section is both a mixture of Photoshop know-how and a sharp eye. Let's get to the basics first. Now you'll see and appreciate the solid lines we made earlier.

Start by using the Magic Wand to select the skin area. You may want to adjust the Tolerence to get certain areas you can't capture at first try. Look out for small areas like the space between the eye and eyebrow, any corners and narrow spaces. If you get a tiny space between the selection and the lines, don't worry. Once you get every thing you need selected, eliminate that space by going to Select - Modify - Expand. We want the selection to go just under the the lines so expanding it by one or two pixels should do the trick. Not too much or it may bleed where you don't want the colour to go!

Now here's an important part. Create a new layer and make sure you have it selected. I named this layer "skin" since that's what it is. Choose your colour. I usually start with a very light base colour. Now comes the fun part - Fill! (Edit - Fill) The default usually works so all you need to do is make sure you're using Foreground and click OK.

Ta-da! You're all filled in. Ok, so the guy looks disconcertingly Chinese all the sudden. That's because the skin layer where your colour sits is on top. This just won't do. We need to get the colour under the nice lines we made. Here's the trick:

That's right. Go over to your Layers palette, make sure your skin layer is selected, on top of your pen outline, and choose Multiply from the menu. Check out the image now.

Apply this technique to everything else - the hair, the eyes, the clothes if you have them. Let me quickly do this so that we can move on. If you spot any corners that the Magic Wand can't reach, fill it in with the Paintbrush tool.

I'm much relieved to say that the beard wasn't as much trouble as I imagined. All I did was zoom in real close, used the Magic Wand with a tolerance of 50 and expanded the pixels by 2 before I filled it with the same colour as his hair. Remember to put everything on a layer of its own! This will make it easier to work on one thing without worrying about spoiling something else. You may also have noticed that I've given it a gradient background. I'm not going to fuss over having a proper background since that's not what I'm trying to achieve here. We are about to work on shading so we need a light source. Now the light is coming from somewhere behind him so his face is going to be pretty much in the shadows. So let's proceed.

 


 

Part 3: Shading

Grab the Airbrush tool again and make sure you're set on Multiply on a low pressure setting. I used 10% here. the next important thing is to select your colour. I used the same colour as the skin or a similar colour with a brown base. Why? When you airbrush over the current layer, it will darken the colour. If you use the Burn tool, it will turn the flesh tone into a blackish shade that looks totally unnatural and .. well .. burnt.

Now we shade. If you as terrified of ruining the base colour and starting over as I am, create a new layer on top of the skin layer and set it to Multiply. Choose a brush of a suitable size (meaning: small enough to fit in the area you want to shade) and begin. As you work you may do any of the following to achieve the look you want:

  1. Change colours, pressure, brushes.
  2. Use the Eraser to lighten areas. Sometimes it's easier to sweep the area with one colour then add in the details later by using the eraser. Remember that you can also adjust the pressure on the Eraser so you can gradually remove the colour.
  3. Adjust the layer opacity. It's easier to see what you shade when it's at 100% opacity but it may be too dark. On that note, if you're working at 100% opacity, do not be afraid to get too get bold. You can "lighten" it later. Look at the images below to see what I mean by this.

Differences in Opacity

Another thing you may have notice is that you might have "coloured outside the lines" while trying to shade the edges of the picture. Let me switch off the decieving blue background for a moment. There. See the "shadow" the arrow is pointing at? Tsk tsk. Even 5 year olds can stay within the lines, but then again, they don't colour with Photoshop. Let's get rid of it.

Did you make that copy without the background? (This one.) HAH! Now we need it. Make it the active layer and pull out our good friend the Magic Wand. Select the background. Pay attention, here's the important part. Click on the layer where you did your shading. Got it? Background selection still in place? Good. Hit the Delete key. Yes, the one on your keyboard. There we go, background is all clean! Told you that copy would come in handy. Now go finish colouring the rest of it.

We're almost done! Actually, we're finished, but I still have some tricks up my sleeve. If you're interested, read on. If not, flatten your image, save it as a JPEG and go gloat over it before you upload it into your gallery. If you want to know how to get more out of your work, go on over to the next and final section of this article.


Part 4: Tricks and Tips

I decided that I don't want him brown-haired. Let's see what other looks we can give him.

The bronze beach god
The dark elf
The incredible hulk!
The merman

This bearded honey is a regular chameleon! How did I do that? Looks below, this tool will be one of your good friends for the remainder of this lesson:

You can find Hue/Saturation at Image - Adjust - Hue/Saturation. Hue changes the colour, Saturation changes the intensity of colour, and Lightness controls the amount of light that goes into the colours.

Remember that hair and goatee should be the same colour so for sanity sake, I've linked and merged the base colour layers for the hair and goatee, as well as the shaded layer. That's base hair to base goatee, and shaded hair to shaded goatee. Don't get this wrong or something else will be changing colour!

Make the base the active layer. Go to Hue/Saturation and play with those sliders! Notice how both the hair and goatee changes colour. Pretty neat, huh?

Now go on and experiment around with it. Another function you may find useful while adjusting the colour and intensity of it is the Brightness/Contrast tool. Have fun trying and hope this article was useful to somebody!

If you would like to see more of my work, I'll be over at my gallery.

 


FARP Article Guestbook

DateNameComment 
17 Apr 200845 Anon.
Tears hit the carpet as Our Love ones walk out the door to go to war.
Because then we realize we probably wont see them anymore.
Try to Take away are fears, wipe away are tears and tell us not to be afraid be strong and be brave, we wont listen because when we all have doubts you won’t come back there’s no way to sit back and relax.
During a war there is always pain. Fighting so long with nothing to gain,
During a war people cry, because there’s so many that die.
Not signed in...

   Private message?


Back to the FARP main page.


The collection of art and writing tutorials in the Elfwood Fantasy Art Resource (F.A.R.P.) is a part of Elfwood.
The FARP logo was created by :-) Miguel Krippahl (The muscular guy in the FARP-logo) and :-) Thomas F Abrahamsson (The text and general graphic design). Those sections written by volunteers are copyrighted to Thomas Abrahamsson and the respective writer. Elfwood is a project once founded by Thomas Abrahamsson.

All rights reserved. Unauthorized Reproduction of the graphics, writings, and materials on these pages is absolutely prohibited! You may consider all material on these pages protected and copyrighted, unless otherwise noted. You may NOT use the images found at the FARP or Elfwood pages on your home pages! All of these images are copyright protected! Everything you see here represent the collaborative effort of the Elfwood community and Thomas Abrahamsson. Please read the Legal Disclaimer for more info on warranties/etc for these pages!

 
 

Elfwood™ is a site for Fantasy and Science Fiction art and stories. The site was founded by Thomas Abrahamsson and is maintained by helpful assistants and moderators, owned by the Elfwood AB corporation.

[More...]