Adventure Game Studio

Creative Production => Critics' Lounge => Topic started by: Neole on Sun 22/06/2003 10:28:29

Title: Coloring Steps
Post by: Neole on Sun 22/06/2003 10:28:29
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.

(http://www.2dadventure.com/stuff/tutorial/loverslane01.jpg)

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.

(http://www.2dadventure.com/stuff/tutorial/loverslane02.jpg)

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.

(http://www.2dadventure.com/stuff/tutorial/loverslane03.jpg)

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.

(http://www.2dadventure.com/stuff/tutorial/loverslane04.jpg)

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.

(http://www.2dadventure.com/stuff/tutorial/loverslane05.jpg)

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.

(http://www.2dadventure.com/stuff/tutorial/loverslane06.jpg)

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

(http://www.2dadventure.com/stuff/tutorial/loverslane07.jpg)

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.
Title: Re:Coloring Steps
Post by: danny* on Sun 22/06/2003 12:36:19
great!!!
Thanks for sharing,Neole!!!! :D :)
Title: Re:Coloring Steps
Post by: scotch on Sun 22/06/2003 12:57:10
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 :)
Title: Re:Coloring Steps
Post by: Neole on Tue 24/06/2003 07:57:22
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.
Title: Re:Coloring Steps
Post by: n3tgraph on Tue 24/06/2003 08:04:56
Super Neole!1

I'm really into this!

The cars really remind me of  Franquin's drawing style

he draws these strips:
(http://lcg-www.uia.ac.be/~erikt/gaston/.Scans/guust-12.jpg)

Original French I think
Title: Re:Coloring Steps
Post by: prototyp3 on Tue 24/06/2003 08:12:02
Excellent car designs.
And better yet, excellent car designs which illustrate a flexible workflow.
Title: Re:Coloring Steps
Post by: on Tue 24/06/2003 11:20:54
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
Title: Re:Coloring Steps
Post by: Neole on Thu 26/06/2003 12:01:52
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!
Title: Re:Coloring Steps
Post by: Squinky on Fri 20/02/2004 00:22:14
I'm just bumping this thing up right now...sorry
Title: Re:Coloring Steps
Post by: Neole on Wed 25/02/2004 18:55:02
Hey nice to see this again! I was wondering where it had got to.
Title: Re:Coloring Steps
Post by: Czar on Sun 07/03/2004 02:20:41
man, how come i didnt notice this it's great neole....
Title: Re:Coloring Steps
Post by: jannar85 on Sun 07/03/2004 23:39:18
Quote from: Squinky on Fri 20/02/2004 00:22:14
I'm just bumping this thing up right now...sorry


The images has been deleted!1

*** edit ***
Or the server is down ._.
Title: Re:Coloring Steps
Post by: Neole on Wed 10/03/2004 17:42:57
Yeah server was down for a few hours.
Title: Re:Coloring Steps
Post by: Do0kie on Fri 12/03/2004 21:12:41
The car in the middle is a Renault Twingo, right?  ;D