Basic Color Blocking Take #3 - Shading! (C+C please)

[Uhfgood]

well it's been awhile, and after reading the excellent tutorial by mashpotato i started this -

Okay I started a basic paintover, using the technique of putting the sketch on a layer above the painting using multiply which basically means the white shows through and i can paint under the sketch lines.

I just decided to do it to show a friend, but if you're curious -- this part isn't even finished yet...  But I will work on it until it's perfect.

WIP 1


WIP 2


WIP 3


Actually the basic color blocking is generally complete until I get some feed back suggesting I change it before starting to apply shadows and so forth.

To make it less confusing, on the left side beside the computer desk is the dresser (it's the sort of light brown one).  Notice how it's shelves are more holes than shelves, they come to the edge and are seperated by the front of the dresser.  on the right side the gray thing is the bookcase, notice how the shelves are set in the case back from the edge.  Someone in the ags forums critic's lounge suggested I do this (maybe because of bad tangents or something) in any case I like it, it actually makes it look like a book case.

Basically this is the empty room before it gets all messy and the main character has to clean it up.  that's why there are no drawers in the dresser or books on the shelf.

The color choices are abit based on experience.  the dresser is a lighter wood, to contrast with the dark wood of the door and the trim, the bookcase is gray just to make it a bit different.  I made the desk something like mahogony or cherry, by adding a reddish tint, so that way it wasn't completely brown.  At one point in my life my walls were light blue with a light brown or tan floor (well the floor doesn't look tan exactly but close enough).  On the hole I think it's decent.  Note the dresser, bookcase, and door all have lighter tint on their sides, whereas the bed and the hamper and desk are darker on the sides facing the camera, not really sure if this is a good idea, but it makes me think that the foreground objects are closer to the camera, you can let me know if it isn't right.

Let's see... the hallway is on a single layer, the door is on it's own layer, the trim around door and closet are in it's own layer, trim around the bottom and outlet and switch are on it's own (same) layer... I basically put alot of things in their own layers, such as the insides of the bookcase, dresser, and desk... and then some of the sides.  the walls and the floor are the same as well... not really experienced with this software, using the gimp with a mouse but it seems to work.  at one time i thought of actually putting every white/negative space (any space bordered with lines to form a shape) on a seperate layer, but that may be overkill.
In fact this may be overkill.

I'll probably start working on the actual shading in a bit, the light is pretty much coming from the light bulb, that you can't see in the picture...  Any thoughts are appreciated, thanks!

Keith

[Uhfgood]

Okay so basically i had another go at it.  I changed a few of the colors, I straighted some lines, it's almost starting to look decent.  Tell me what you think.

First one with the line drawing removed.


Second with 50% lines


Third fully opaque line drawing over the top.


Give me suggestions, thoughts, or opinions.
Keith

[Lad]

 In my opinion, it looks better without lines, because the lines are too screwy, the lines may work, but they have to be straighter and thicker. I think you can make completely new lines or not to add any lines.

[Andail]

I think the perfect way would be to go all cartoony on this picture. Give it clean, thick outlines and bend all shapes and surfaces gently to neat curves. Nothing exaggerated.

The "problem" now is that the background isn't artistically interesting enough to benefit from sketchy outlines. These kind of pencil-like strokes fit better if the artist can use them to apply nice shading, rasters or other artsy techniques.

[Neil Dnuma]

I agree with Andail, this is a good foundation for a cartoony bg.

For the fun of it, I triend unifying the colors some. I'm not a big saturation fan, some surely disagree, but... Also i added some very basic shadows. I know you're planning to do that later on, but I wanted to see how it worked. I pushed the blue in the darker areas, and mainly red in the brighter, to get some ambience going. This is actually a bit inspired by the Technicolor process... (you know, classic Disney etc)  The room outside would naturally be under different light, so I pushed that in a different direction.

Hope it can be of some help.

[Uhfgood]

Neil that's pretty nice.  Actually as far as saturation goes, I figure I will desaturate a bit after it's all done.  Partly because of where this takes place - Pacific NW, in our world, verses where the first player character is going (Enchanted Lands, which will have nice bright colors, hopefully not garish though).

As far as the lines I should have explained... they are just the sketch lines over which i'm using to guide my "painting".  I'm just kind of partial to the 50% because it looks neat, but i'm intending it to look a bit more realistic.  I'm sort of following that hearts and spades tut...  Basic colors in (flat shading) some actual shading and shadows, and then probably re-adding the lines as painted.

I'm partly not doing cartoony on purpose, i mean it will be a cartoon but none of that bent and 5-point stuff.  Think broken sword (well think of it's cutscenes rather than the game, as the game uses some sort of shadowing that's reminiscent of pixeling, and it doesn't look like it was hand animated the way the cutscenes are).  As I was saying, i'm partly doing not doing it all DOTT because everyone else is, and the other part is because i'm going for a Disney look -- This is not to say i'm anywhere near the level of Disney artists, i'm simply saying this is what i'm aiming for.  The human characters are realistic,  the non-humans (and the humanoid characters like wizards, and dwarves, etc) will be more cartoon-like.

In any case I appreciate the comments.

Keith

[Oddysseus]

I'll just throw my two cents in and say that I think the 50% looks neat too.

[Uhfgood]

I'm really in uncharted territory here now -- shading.  I attempted a few things, one is the walls, basically the light is more or less coming from directly overhead... more towards the dresser than the foreground objects.

I'm not sure what i'm supposed to be doing here.  I have an idea of where the light source is, and i'm purposely not adding shadows yet.  The walls, and the side of the dresser (the one on the left)  I tried to do two things on the dresser, one is have it go from dark (that upper lip on the side) to light, as there's a bit of a shadow, but even that is probably incorrect since the light is above.  The other thing is the walls... local shading on the walls, dark towards the bottom lighter at the top.  I started with a little "burning", and then used the smudge tool to mush it out..  Also on the dresser I tried to add a highlight to the top of the dresser itself.

Really I just want some suggestions.  Ideas and tutorials on shading digitally (not shadows) and specifically using the mouse... I don't have a tablet nor money to buy one.

Thanks,
Keith

[Erwin_Br]

I'm a fan of the lines, to be honest.

It's too early to comment on your shadows. Be bold, and experiment with them!

--Erwin

[Uhfgood]

Thanks Erwin - I will try it... I just wasn't sure what I was doing is all... i'll play around with stuff... do a full on shading, and then see what people think.

If anyone else cares to comment how I should go about doing this stuff, lemme know.

[Sparky]

I like your background so far. You have my respect for working with a mouse! What a challenge. I like your approach; most of the backgrounds for my AGS project are done using a very similar procedure. One problem I've run into is that it can be fiddly to constantly switch layers during the shading process.

It sometimes helps me a lot to do a rough shading job before working with layering. I usually turn off everything but the sketch, and create a new layer in multiply mode. Then I set out the overall arrangement of light and shadow.

Once the rough shading is done, I make all the layers and use the rough shading layer as reference when shading them. This background isn't the best example because it's not heavily layered, but I hope it shows how a shading sketch can help.


Left to right: sketch, rough shading, final layered image.

Also it looks like you're already using them, but if not layer masks are really useful for this kind of work. My apologies if I'm repeating anything you already know.

[Peter Bear]

If you are not satisfied with your handdrawn outlines, just try to redraw then with your computer, that would give them a sharper aspect.

Nice job by the way.

[Uhfgood]

Pierre - thanks for the compliment.  I do indeed intend to redo the lines in the computer (Well we'll see how shading and shadows go).

Sparky - Since i'm new to this stuff, i simply put almost every face on a seperate layer.  Yeah it's alot, but it doesn't bother me, the next background will probably be smaller, quicker, and such as I learn it.  I think part of my problem wasn't really doing a full rough.  I basically started doing them all on seperate layers, so I could probably do it that way next time.

Not actually using masks, in fact i've yet to learn how to use them.  Instead i'm using an option to "keep transparency" which means it won't allow you to draw on transparent parts.  It's similar to photoshops "lock" icon, layer lock.

Don't worry about repeating anything, I probably need stuff repeated to me enough times before I do it ;-)

Keith

[Sparky]

"Keep transparency" is useful. The only real benefit of using a separate mask instead is that you can paint directly into the mask, copy and paste, use smudge/convolve, etc. without no fear of messing up the layer itself, even after there's a lot of detail in the layer. I almost forgot- you can also copy the mask from one layer to another, and that way you can have multiple layers per object (like one for a table's color and a second for its shading).

I'll fire up the Gimp and see if I can remember the keyboard shortcuts for using layer masks. OK, here goes:
New layer mask: right click on a layer in the 'layers' dialog, and press 'y'
Begin painting into layer mask: left click on the layer mask's thumbnail in the 'layers' dialog (click on layer's thumb to stop)
Show layer mask: alt-left click on the mask's thumbnail. (Alt-click again to return the view to normal.)

Another tip I found really useful is putting highlights in their own layer(s), with the mode set to "addition". That way you can repaint the color, shading, etc. without having to retouch all the highlights. I hope that was helpful, I have a tendency to sound like a patronizing windbag when I least expect it.