Coloring Steps

[Neole]

Here's how I colored the Lovers Lane scene, I chose this for the tutorial as this had a lot of objects to color. I didnt have all the steps saved, but I did have the separate layers so I'll describe the steps using those. Hope this helps!

For coloring images I usually pass the inked and scanned image through a vectorising program, Adobe Streamline, I think Flash also does it. The image is now saved as an eps (vector) file. Then I convert it back to normal lineart in photoshop on a separate layer. The layer is set to multiply - when you do this the outline shows but the white area remains transparent when you color underneath it. The vectorising and converting back makes the lines smooth and easier to color.



I make a separate layer underneath the outline layer, completely white. All layers from now on will be created between the white and outline layer.



I paint the characters on a separate layer. I select each part using the wand tool, for the skin parts I would select both the hands and face, color them flat with a big brush or the fill tool. Then I use the burn dodge tool with a soft edged brush to add highlights and shadows. Same thing for each character. Select a character's hand and face, color, burn/dodge slightly. Same for clothes and hair.



I paint the cars on a separate layer under the characters layer. Similar method, wand tool for similar colored parts, fill, burn/dodge slightly. Try and remember where the light sourse is (in this case the moon from the top, so add highlights and shadows accordingly.



I paint the scene on a separate layer under the cars layer. I am painting all these on separate layers so its easier to try out different colors for each by simply changing the hue/saturation of each layer separately in case I feel like trying out a different color scheme for any of these. Sometime I would even make a separate layer for the sky and the for the ground so I could try different hues for each of them.

For broader areas like the background scene I use the gradient tool often. Select with wand, (if the outline is not perfect and th selection leaks out, fill up the gaps using a 3 pixel paint brush with the color you are going to use, in case of the ground, green.) After getting a selection, choose a dark green foreground color, and light green background color, and use the gradient fill tool to fill it so the light green is above (where the moonlight is). Then with the selection still on, adjust the hue/saturation to try and get a color which you like.

With the selection still on, I added the shadows below the car using a hard edged burn brush. I also use a paintbrush instead of burn to add harder shadows with coors I want instead of just letting 'burn' select the colors for me automatically. Since the car is close to the ground the shadows cast would be sharper, so the hard edged brush instead of a soft edged one. Also add the shadow for the Lovers Lane board. And the flowers grass can be painted in at this strage or at the end.

Deselect and do the same thing for the sky. Same for clouds, then for trees.  You could use the gradient tool or flat fill for any of these, gradient looks better, even if you use a very slight one. Aler the direction of gradients a bit, dont keep them top to bottom all the time. You can also use a very large (300 pixel) soft edged brush to give shades and highlights, like I did with the cloud. Paint the moon and add highlights. Then I selected the sky again and added the luminosity around the moon using the dodge tool with a soft edged brush.



I add a blue layer just above the bottommost white layer to fill up any white space left in my painting. Empty white spots will stand out and look like you missed coloring them. I delete off some of the blue where I want the hightlights to be white, like in the car's headlights.



I add the border and text on the Lover's Lane board. Voila, its done!



Note: In the tutorial I have hidden the layers I am not working on, but while coloring I will keep all the layers on so I can see the colored people and car when painting the sky and grass. The whole coloring took me an hour and a half. Very rarely I use pattern fills, like on the Mayor's coat and the chef's shirt (in the colored images I had posted in a thread earlier). I usually set those layers a bit transparent so as not to make the patterns stand out too starkly. Also, for a different style of coloring where there are no black outlines, you could set the topmost outline layer to 'locked' so you can only paint on the pixel regions and not outside, and paint over the black lines with colors. Thus you would paint the red car black outline over with a darker red, etc.

[danny*]

great!!!
Thanks for sharing,Neole!!!!

[scotch]

Nice tutorial, layers are something everyone should learn to use.  I've never used that kind of setup of layers myself, usually just the line art then a multiply layer for the colour then sometimes light or shadow overlays on top but whatever you're doing they are useful.
Thanks for sharing your techniques

[Neole]

The best thing about layers is the ease of changing colors. If I had done these on the same layer, if the client told me they didnt like the color of the red car change it to blue, it would have taken a bit of time. Right now I can go to that layer, make a quick lasso selection around that car and use hue/saturation/colorize to change it to any color quickly.

[n3tgraph]

Super Neole!1

I'm really into this!

The cars really remind me of  Franquin's drawing style

he draws these strips:


Original French I think

[prototyp3]

Excellent car designs.
And better yet, excellent car designs which illustrate a flexible workflow.

[oDD]

hehe

great to see you are coloring some of your pics. great pic and very funny, about the colors, i especially like the bg color

[Neole]

Thanks prototype!

oDD - I'll be getting a Wacom soon when I'll be able to color more stuff. We're all waiting for your adventure game though!

[Squinky]

I'm just bumping this thing up right now...sorry

[Neole]

Hey nice to see this again! I was wondering where it had got to.

[Czar]

man, how come i didnt notice this it's great neole....

[jannar85]

I'm just bumping this thing up right now...sorry

The images has been deleted!1

*** edit ***
Or the server is down ._.

[Neole]

Yeah server was down for a few hours.

[Do0kie]

The car in the middle is a Renault Twingo, right?