Chewing Pencils

Back in part 1 of this tutorial outlined the process I use to take a cartoon image from paper to digital form using my scanner. I also showed how to clean up the image, making the blacks as black as possible without loosing the whiteness of the whites - leaving the image ready for some digital touch ups.

In part 2 I took the cartoon through to the finished product by treating it as a single, flat image in the same way we would a piece of paper. While the result was OK, it was far from acceptable (in my book anyway!) and highlighted some of the drawbacks to this approach.

In this part of the tutorial, I will take the image from part 1, and finish it using far more of the capabilities of my software. Basically, this method is far superior to that outlined in part 2, and is my preferred method of producing cartoons. Of particular note will be the use of objects (or layers) to produce an image that is not only better, but is far more readily edited and changed should a potential client have trouble making up their mind!

As a reminder, here’s the image as it appeared after scanning and a bit of digital clean up:

The next step is to combine it with a number of objects that I have pre-saved and appear in all my single panel cartoons. The two objects are the cartoon border and my logo/signature. I use the same border each time I do a single panel cartoon as it helps give some consistency to my work, and goes some way to defining my style. I use a logo because I was never happy with my constantly changing, handwritten signature. The logo became a type of trademark on my website and using it in my cartoon work help add some consistency between my web presence and printed artwork.

Below is a screen shot of the three different images open, as different files, in my Corel PHOTOPAINT X3 software. Note that colours in screen shots get a bit messed up sometimes, so don’t be too concerned about the strange use of colour, instead take note of the process. The top window shows the cartoon from part 1. The middle window shows my logo, while the bottom window shows the border I use.

What I’m aiming for in this cartoon is a stylized theatre/stage environment in which the cartoonist eloquently utters his ‘words from Shakespeare.’ To do this will mean moving the image of the man off to one side slightly. The advantage of using objects/layers is that moving individual elements is very, very simple, and it doesn’t mess with any of the elements in your work. In this instance, I am using the border as the background layer, and add the signature and cartoon man on top, moving the man slightly to the right. This screen shot shows the cartoon more or less arranged as it will be at the end, and ready for some colour.

If you look carefully to the right of the screen shot, you will notice that there are actually four layers in the picture. The border background, the signature and two versions of the guy directly on top of each other. The ‘colour guy’ layer is the one to which I will add colour, while the ‘outline guy’ layer is exactly that, the black outline that will lay over the colour layer. More on this later.

Before adding any colour though, the entire project needs to be converted to RGB colour in the Image menu. I’m not planning to print this cartoon anywhere other than on screen, so RGB is the best colour mode to use. Once I’ve done that, I click on the ‘outline guy’ layer and covert the mode of this layer to multiply. There’s a really technical explanation for how this works, but really all you need to know is that when setting a layer that contains only black and white to multiply, the white areas become totally transparent. What you are left with is just the black outline and nothing more.

To add the colour, I click on the ‘colour guy’ layer and start painting! This image is fairly simple and has a number of closed shapes This means I can use the fill tool to speed things up. However, this time I set the tolerance level to 65%. I’m not at all concerned if the fill bleeds over the black outline on this layer, because the ‘outline guy’ layer has all the black lines I need preserved perfectly. For areas like the hair, where there are black detail lines, I use the paint brush tool to paint over everything except the outline - but even then I go over most of it. I don’t want any white pixels left in my final product - white is totally transparent in the top layer, so everything underneath it has to be colour.

Zooming in on the ‘colour guy’ layer at this point should show what I mean a little better:

Note that the lines in the hair have been totally painted over. As has most of the black lines in the collar, and much of the outline has colour bleeding almost all the way through. I’ve also taken the time to add some tints and highlights to give the impression of light and shadow on my character. These I have added by simply choosing a shade lighter/darker than the fill colour and painting in the appropriate places with the paint brush tool. This could be an additional layer if you wanted it to be, but for a piece this simple, is is adequate to add them to the same layer.

This is where the advantage of using layers is most obvious. Perhaps this is best illustrated by using a side by side, close-up comparison of the cartoon from part 2 (on the left) and this image (on the right).

Notice how the white pixels that are inherent in the approach used in part 2 are nowhere to be seen, and the black lines are more well-defined. If this cartoon was to be printed in a book or magazine, it would have a much cleaner appearance, with crisp black lines and blocks of solid colour.

The cartoon man is now finished, but he still needs a background. The stylized, theatrical look I am going for is no more than a simple spotlight surrounded by darkness. I achieved this by creating an elliptical mask on the background (border) layer, inverting it and filling it with solid black. This time I have the tolerance set to around 85% to ensure no white pixels can be seen between the black fill and the black border. The background layer now looks like this:

It can get a bit messy working with layers when there are more than four or five, but you can click on the little ‘eye’ next to the layer name and the layer will become invisible while you work on something else. When constructing the background, I only had the ‘border’ layer and the ‘outline guy’ layers visible so I could get my proportions right.

At this point, I realized that my signature has disappeared into a black hole! Fortunately, the cartoonist is stronger than any gravitational field, and by clicking on the ’signature’ layer and inverting it, my signature becomes a white image on a black background, clearly visible in the left-hand, bottom corner.

Another problem is that the ’colour guy’ object/layer is actually a rectangle shape that doesn’t fit into the white elipse of the spotlight. Clicking on the ‘colour guy’ layer and setting all white areas to be transparent solves this in an instant.

The text is added by setting the colour to white (!) and adding the ’speech balloon’ using the Comic Book Commando font. The text at the bottom of the cartoon and the copyright statement are both in simple Arial.

The cartoon is now complete, and looks like this:

There is more that I could do, such as play around with some stage curtains in the background of the spotlight for instance, but my style tends to be fairly simplistic and minimal, so I’ll leave it as is. I have been saving my work as I go in the native format of my software (CPT) and do so again now that is is finished. I also save it in two other formats - a 300dpi TIF with LZW compression for printing, and a 72dpi GIF for web presentation. Before saving in GIF format, I need to convert the image to be Paletted 8-bit - a simple task performed with one click in the Image menu.

In the final post in this series, I will do a side by side comparison of the two finished cartoons and highlight the strengths and weaknesses of both approaches.