Anatta Commentary: Colouring Page 5

Anatta is a webcomic by Wei Li and Anise Shaw. It updates every Monday and Friday and can be viewed here.

So we meet again, good Anatta readers. I want to put up some WIP images of my colouring of page 5 to show everyone how I go about it. Hopefully I can also convince Wei at some point to write a commentary on how he draws each individual page.

To start off, I have a number of materials I use on a regular basis. I have, of course, my wonderful computer. It's a laptop, Acer 8930 with the biggest monitor I have ever seen on a portable computer ever. It's wonderful for drawing, not so wonderful for carrying around. I also use a copy of Photoshop CS3 (on Windows Vista, you can't convert me yet, Mac!) and my Wacom Bamboo tablet. I highly recommend the Bamboo, especially if you've never used a tablet before. It's inexpensive, easy to use and a good size for drawing.

This tutorial expects that you have prior knowledge on how to use photoshop, and specifically CS3. I won't have time to explain the basics, but I will use photoshop terminology so you can easily look it up in an online manual or tutorial.

Okay, so let's go step by step in the colouring process of Anatta.

Step 1: Clean up Wei's line art and get it ready for painting.


So the first thing I do is turn off the visibility of all of the superfluous layer (text and speach bubbles) so I can work only with the layer I want. First I make a copy of the lineart layer and name it "base colour". I put this layer under the original layer, which I have named "lineart".


Next, I turn the visibility of the lineart layer off and work only on the base colour layer. I go to image > adjustments > brightness/contrast and turn up the contrast several times until I have almost no grey left. I have to pull the slider up to 100 several times to do this. This will make the lineart look stark, but not to worry because we're not going to use this layer as line art, it will be base colour! After the contrast, I go back to image > adjustments > threshold and adjust the threshold of the layer to 99. This number is relatively important for what I'm going to do next.

Now, I have a special filter that I have downloaded for CS3. It is called BPelt flatting and can be found under the filters menu. With only my base colour layer visible, I go to filter > BPelt > multi-fill and hit okay. Next, I go to filter > BPelt > flatten. This is what results:

I know, it looks totally funky! You may be wondering "What the hell? Why would you want it to look like that?" Well, let me assure you, it will all make sense in a moment.

Now it's time to go back to our original line art layer. Let's make this one visible again. Due to the line art layer being on top of the base colour layer, the funky colours will disappear when the line art layer becomes visible. Now we're going to transform the line art layer into lines only, with no white space.

Select the line art layer and then click on the "channels" tab beside the "layers" tab that you are currently on. We're going to press the "load channel as selection" button at the bottom. It looks like this:

After hitting this button, all of the white area in the layer will be selected. Hit ctrl + x to cut the selected area and you will be left with your lines plus transparency where all the white space used to be. The colours will come through the lineart.

Now let's go back to the layers tab, make sure the line art layer is still selected and lock the transparency of the layer (the button is at the top of the layers tab). Choose a big, hard, round paintbrush and set your foreground colour to black. Now paint all over the line art layer (you will notice with the transparency locked, the only things that get painted on are the lines and the black paintbrush makes them much darker). You can actually change your line art to any colour you wish with this technique. I choose black because that's the style of our comic, but in the past I have used a coal grey, browns or even darker colours of the base colours a la Alpha Shade.

Now it's time to move on... This is the page I have right now, before step two...



Step 2: Base Colours

On the base colour layer, select the paint bucket tool (hotkey g). Remember how we made all those funky colours with the BPelt filter? Well, instead of having to fill in our line art, we just grab the colour we want and paint bucket it in. This save me about 1-2 hours of painting, and when I found the filter on Questionable Content, I nearly fell to my knees to that the great God of Webcomic creation that this tool existed. I still have to use the regular paint brush to fill in some areas, mostly because the filter is a bit picky about cross hatching. Our comic has quite a bit of it, but if yours doesn't then this filter will make things even faster for you. With Questionable Content, the artist uses the filter to do cell shading as well, while I save my shading for the painting stage. Either way works well, depending on what you're going for.

So, after about 20 minutes of paint bucket plus a little bit of paint brushing, this is what I have:


The base colours are finished, and now it's time to move onto the shading.

Step 3: Giving the image depth

This step requires quite a bit of knowledge about colour theory, lighting and digital painting. I'm not really an encyclopedia (although my friends like to think that I am), so I will not impart the depth of my knowledge on these subjects here. Suffice to say, spend some time looking at other paintings and tutorials, read a few books on colour theory and really pay attention to the world around you and you will see your rendering of shadow and light improve.

I will tell you all one really useful piece of information though: shading and highlight are NOT simply lighter and darker versions of the base colour. Light has its own colour, and that colour will reflect at different intensities depending on the material it is reflecting off of. Shadow is the opposite colour of the light on the colour wheel. In everyday light, sunlight, lamp light, etc, light and shadow are relatively desaturated. Saturated light can be found in the setting sunlight, light coming from televisions, neon lights, and others like this.