Coloring B&W background

Started by Snarky, Mon 09/07/2007 03:23:49

Previous topic - Next topic

Snarky

Here's a black and white image I made for the Background Blitz.



Here's my attempt at adding color:



Clearly it's not working. For instance, look at the red band on the pirate hat. Yecch! I'm trying to add a color layer in Photoshop to colorize the image without changing the intensities, but I'm starting to wonder whether that can possibly work. Also, I cunningly managed to choose objects that are nearly all black, grey, white or metallic,  ::) so there's not a whole lot of options here.

Does anybody know a good technique for colorizing greyscale images?

ildu

I think the main problem is that you have very little lighting variation. It's like pure white -> dark blue. Now it looks like you have almost pure white on the door and the nearby floor, which is already very alarming. I would suggest having only bright light very near to the doorway and scaling it down towards the inner parts of the room. That way you could have some warm yellows, oranges and browns that then look awesome contrasting with the dark blue. The trouble with having the lighting that you have now is that there's very little difference between the b&w and the color images. Then you kinda have to force yourself to pick colours that usually don't end up looking natural (like the brown you have there). That's a fundamental ditch you don't want to get stuck in, my friend.

The other thing that I find problematic is the shadowed negative area. It's good that you didn't put any highlights on it and I like the way you've shadowed it, but it looks a bit shallow. I would suggest a higher-saturated blue tone for the shadowed area, which should make it look a bit deeper. You could also vary the blue tone coloring within the area.

I can't really say anything else right now. I think the best thing to do now would be to go back to the b&w and correct the lighting. Then when you're absolutely convinced that it looks great in b&w, you start coloring.

The best way of colorizing b&w images would be color, hue, overlay, multiply and lighting layers. Usually you still have to hand-color and fix stuff, because layers rarely work exactly like you want. Very often when you use the method of drawing a b&w image and using coloring layers afterwards, the result feels very washed out and shallow. You can pretty much see from a finished image if this particular method has been used (unless the artist has fixed and tweaked it so well that it doesn't show). And I'm not talking about b&w lighting studies here, but rather having a full image totally finished in b&w before coloring.

Here's an example of a tutorial where the method is used:

http://www.3dtotal.com/team/Tutorials_3/Equilibrium/equilibrium_01.asp




As you can see the result looks shallower than you would expect.

Snarky

Hey, thanks for your reply, ildu.

Quote from: ildu on Mon 09/07/2007 04:07:55
I think the main problem is that you have very little lighting variation. It's like pure white -> dark blue. Now it looks like you have almost pure white on the door and the nearby floor, which is already very alarming. I would suggest having only bright light very near to the doorway and scaling it down towards the inner parts of the room. That way you could have some warm yellows, oranges and browns that then look awesome contrasting with the dark blue. The trouble with having the lighting that you have now is that there's very little difference between the b&w and the color images. Then you kinda have to force yourself to pick colours that usually don't end up looking natural (like the brown you have there). That's a fundamental ditch you don't want to get stuck in, my friend.

I had tried it with less bright light, but I'm quite keen on the stark contrast for the black and white version. It looks almost expressionistic (well, to me at least). But you're probably right that it's screwing up my attempts at coloring. Here's a version with more shading (pretty rough at the moment, but hopefully along the right track):



QuoteThe other thing that I find problematic is the shadowed negative area. It's good that you didn't put any highlights on it and I like the way you've shadowed it, but it looks a bit shallow. I would suggest a higher-saturated blue tone for the shadowed area, which should make it look a bit deeper. You could also vary the blue tone coloring within the area.

I'm not sure I understand. There are highlights, aren't there? And do you really think higher saturation? I thought it was exaggerated already. I'll definitely vary the blue tone a bit once I get the lighter areas sorted, though.

QuoteThe best way of colorizing b&w images would be color, hue, overlay, multiply and lighting layers. Usually you still have to hand-color and fix stuff, because layers rarely work exactly like you want. Very often when you use the method of drawing a b&w image and using coloring layers afterwards, the result feels very washed out and shallow. You can pretty much see from a finished image if this particular method has been used (unless the artist has fixed and tweaked it so well that it doesn't show). And I'm not talking about b&w lighting studies here, but rather having a full image totally finished in b&w before coloring.

Damn you, loominous! Why did you trick me into starting off in black and white? ;)

I guess I'll experiment a bit with the other layer effects. I'll probably end up having to repaint a number of the details in color, too. I agree that the image in the tutorial is quite flat (or cold). That may be partly the style of the artist, because I think you see it in the b&w version as well, but I'll do my best to create more color depth and richness.

Stupot

What about making the black areas more grey so that the colours come through more clearly?  If the colours you use are quite dark anyway it should replace some of the intensity you want to keep.

BOYD1981

if i remember right LGM once created a thread about techniques to colour a greyscale image, it's probably still lurking about the forums somewhere.

Limey Lizard, Waste Wizard!
01101101011000010110010001100101001000000111100101101111011101010010000001101100011011110110111101101011

ildu

Quote from: Snarky on Mon 09/07/2007 15:15:30I had tried it with less bright light, but I'm quite keen on the stark contrast for the black and white version. It looks almost expressionistic (well, to me at least). But you're probably right that it's screwing up my attempts at coloring. Here's a version with more shading (pretty rough at the moment, but hopefully along the right track):

I think it's looking better already. You can always play with smooth nuance and transitions, in contrast to really sharp light differences. I think that might be the key here. For example the light coming out of the door disappears in a long gradient towards the inside of the room, but there are parts near the door where the transition is literally from white to black. You've done this quite well up til now, but you could emphasize it even more. What if the left side of the image was almost dark again?

Also, relating to lighting and shading, you should work on the representation of those two objects in the center of the image. After viewing this image for a number of times before, I just realized what the center object was - a pillar with a mug on top of it. I hadn't really payed attention to it before and just took it as some kind of Final Fantasy anime sword :D. I'm not sure what the object in the foreground is either. First I thought it was a candlestick, but it's too flat for that to be true. Is it some kind of crusifix or something?

Quote from: Snarky on Mon 09/07/2007 15:15:30I'm not sure I understand. There are highlights, aren't there? And do you really think higher saturation? I thought it was exaggerated already. I'll definitely vary the blue tone a bit once I get the lighter areas sorted, though.

Well there's shading in the shadowed parts, but I don't see any specific highlights. What I was talking about was avoiding sharp light reflections on parts where there is no chance of direct light reflecting. The light that the shadowed parts get here is reflected from the lighted walls.

Ah well, maybe the blue is a good tone. Yeah, maybe you shouldn't mess with that until the lighted parts are done.

Quote from: ildu on Mon 09/07/2007 04:07:55Damn you, loominous! Why did you trick me into starting off in black and white? ;)

I guess I'll experiment a bit with the other layer effects. I'll probably end up having to repaint a number of the details in color, too. I agree that the image in the tutorial is quite flat (or cold). That may be partly the style of the artist, because I think you see it in the b&w version as well, but I'll do my best to create more color depth and richness.

I'm not saying that it's in any way a wrong approach to painting, but you have to consider what kind of technique you want to develop. I wouldn't want to get stuck with always doing b&w before coloring, so I try to get colors and lighting pretty much down before I start refining and detailing the image. I'm not saying that one technique is better than the other, but to my experience it seems that doing detail before color makes you more dependent on that particular technique.

Snarky

Thanks for your help, guys. I don't have time to make edits during the week, but I'll work some more on it this coming weekend.

Quote from: Stupot on Mon 09/07/2007 20:29:05
What about making the black areas more grey so that the colours come through more clearly?  If the colours you use are quite dark anyway it should replace some of the intensity you want to keep.

I wanted the shadowed areas to be so dark that you could only dimly make out the shapes, and would have a hard time seeing what the objects were. It looks about right on my home monitor, but at work it disappears almost completely into black. So I'll make it a little bit lighter and make the highlights more pronounced.

Quote from: BOYD1981 on Tue 10/07/2007 02:41:52
if i remember right LGM once created a thread about techniques to colour a greyscale image, it's probably still lurking about the forums somewhere.

Hmmm, I couldn't find it. I did find a number of other people asking similar questions in the past (and you referring them to this same mythical post ;) ), so I'll have a look at those threads.

Quote from: ildu on Wed 11/07/2007 20:56:49
I think it's looking better already. You can always play with smooth nuance and transitions, in contrast to really sharp light differences. I think that might be the key here. For example the light coming out of the door disappears in a long gradient towards the inside of the room, but there are parts near the door where the transition is literally from white to black. You've done this quite well up til now, but you could emphasize it even more. What if the left side of the image was almost dark again?

Also, relating to lighting and shading, you should work on the representation of those two objects in the center of the image. After viewing this image for a number of times before, I just realized what the center object was - a pillar with a mug on top of it. I hadn't really payed attention to it before and just took it as some kind of Final Fantasy anime sword :D. I'm not sure what the object in the foreground is either. First I thought it was a candlestick, but it's too flat for that to be true. Is it some kind of crusifix or something?

Like most objects in the image, it's the headgear of a player character from an AGS game...

Spoiler
It's Kami from What Linus Bruckman Sees When His Eyes Are Closed. (Click here for image.)
[close]

loominous

#7
I guess this is the problem with pseudo tutorials; my approach seems to have come across heavily distorted due to case specific anomalies.

Doing the whole image in detail in black n white to be coloured afterwards is an approach I see very few advantages with. But who knows, it might be a superior method.

When I stress focusing on values n composition this first of all doesn't mean it has to be in black n white; I rarely if ever work in black n white - looks so glum n dull - and secondly, this just mean that you don't pay attention to it in the early stages, where you try out different compositions.

Especially if your pic is going to have great clear colour variation, introducing colour fairly early on will save you a lot of double work; applying colour is as you've noticed trickier than it seems, and the more detailed image, the harder.

The common approach among computer artists seems to be to use a sort of average colour of what you're going for when you start with values; if it's a nightscene you may sketch using a lot of blues, n some orange for the moon perhaps. These colours are more or less placeholders, but they're not far off the target and will provide a foundation.

I think Neil Dnumas' wip pics (below) illustrates quite well the usual process except that he seems to use a white background as a foundation for the values; more common would be to use a dark base value, about the same as as the darker ambiently lit areas will have:



So first, a general sketch, followed by addition of general values to determine compostion/lighting (negative areas are hard to read without values), followed by colour tests, followed by refinement.

-

So, you may wonder, what's with the method used in the background blitz thread? Well, I'm a sucker for seemingly monochromatic palettes. The canvas colour, which also seemingly monochromatic ranges from yellowish orange brights to reddish orange darks. This is more or less precisely what I want for the lighting. By working in "black n white" I can get the right colour shift in the lit up areas, without having to do any work. What I mean by colour shift is precisely what you see in candles, yellow bright centre expanding to orange.

This is something often overlooked when adding light, as in, if for instance orange light is added, only one hue of orange is used, which will look fake and harsh. By working on a canvas with the colour range already set, I get yellow brights n more n more reddish mid tones n darks. And since I was going for very orange highlights, I let the canvas work for me, and only add colours to the areas I want.

When I said I added a layer set to colour, that was also misleading, since I actually rarely rely on colour layers except for quick stuff.

The reason is the same as with the canvas, I want colour shifts depending on how bright/dark an area is. If I'm doing a bush, I want the brights to have a certain colour, and the darks another. Using the same hue for everything will, again, look fake.

So I rely heavily on Curves, another adjustment layer method. Curves allows you to affect the colour depending on the value, if you want yellow highlights n bluish shadows, just adjust the blue channel like so:



By using tools like this you can quickly sketch up a palette and play around with it. I also use similar adjustment layers to create my canvases, which allows me to paint with white n black or whatever colour is most easily picked at that moment n not worry about picking the right colour for the current value, and letting the adjustment layers worry about that. (so basically I use a hue saturation level at the top to neutralize colours n add some basic hue n saturation (set it to colorize) and atop of that a curves layer to create a colour range).

You can still apply it on this background, and I'd suggest creating a colour range for the light coming in by making a curve similar to the one above, but adding red to mid values to get a yellow-orange transition. Small note, adding blues is rarely a matter of actually adding blues, but neutralizing orange which will come across as blue.

Anyway, experimenting with methods is the only way to find one that you like, so at least you can strike one off your list!

Btw: watch out for flat foregrounds! A simple pitch black foreground layer without any depth may work well in some styles like DOTT but will look crap in other styles. I wouldn't worry about making foreground understandable though, as long as they frame the scene interestingly they're good, in my opinion at least.
Looking for a writer

Snarky

Thanks looms. Even though I may have worked myself into a corner with this picture, I think it's been a really good learning experience. It's nice to be able to create all different shades just by mixing black and white. And my mistake shook another tip out of you, so I think it's been worth it.

I decided to work out some of the kinks in greyscale before moving on to the coloring.



I think I've taken most of the specific advice offered, especially in giving more shape to the black silhouettes. I may have overdone the gradient on the light, though. It's getting awfully dim over in the corner there. And I screwed up the teddy bear head when I lightened the shadow area. Any other problems I'm missing?

Andail

I think you've shown here that you can model out shapes and shadows, but the image on the whole could use a better composition.

In case the boxes to the left are supposed to be of the same height as those on the right, then your perspective  is quite wrong. I think you should construct a simple grid model of what you want your room to look like, so that you can get the perspective straight.

Also, I agree wholeheartedly with Loomy; I've never myself prefered to draw a background in b/w first, and then colour it. I think using colours from the start can help you develop a greater understanding of how colours define and build up shapes and shadows on their own - opposed to the idea that colours are only meant to "paint" allready modelled objects, as if you were decorating your room.
I hope this makes sense.

I think the room already has a very nice mystique atmosphere, which is why I hope you can make it justice by improving its composition.

Snarky

So Andail, when you say there's something wrong with the composition, do you mean merely the perspective, or are you saying I should change how the image is laid out? What I mean is that, in my understanding, perspective is a technical aspect of realism, while composition is an artistic aspect. If I understand you correctly, what you're pointing out is that the perspective on the left-hand, dark side (specifically the row of tombs) is inconsistent with the perspective on the right-hand, lighter side.

Yeah, I know the perspective is a bit screwy. For starters, on the left it's a single-point perspective, while on the right it's a two-point one. There's a little bit of a fish-eye effect (cf. the back wall) that kind of justifies the distortion, but it's really because when I started I thought the areas in shadow were going to be so dark I wouldn't have to worry much about perspective there. And I'm pretty sure the idea that the right-hand side of the foreground silhouette would be hit by the light is a complete cheat.

I'm not sure it's even possible to completely fix the perspective at this point. The main change I think I can undertake is probably to make the left row taller by lining up the back with the right-hand row, and by increasing the perspective-distort to make the front seem closer. Hopefully that should take care of the most glaring problem.

Thanks for your comments. As I said, starting in black/white may have been a mistake for the purposes of this picture, but I'm glad for the practice. Color isn't really my forte (90% of all drawing I've done has been in pencil), and not having to worry about it has given me a chance to improve some general computer painting skills, from comfort with the tablet to my understanding of Photoshop brushes.

loominous

#11
I think one composition issue is that the center of attention seems to be very far off right.

The contrast is highest near the door, but more elaborate shapes tend to draw even more focus.

In the edit below I pulled the detailed area, which I assume is supposed to be the focal point more towards the center (close to the golden ratio).





It does leave the sides quite bare though.

Another thing I did was to pull the camera closer to the ground. Brad Bird (the iron giant, the incredibles) even has this as a standing advice: 'lower the horizon!'.

Having a high angle is of course a device as good as any for certain purposes, but in general, lowering the horizon does get a certain more interesting/intimate less distant feel.

About the colours added: I just added a curves adjustment layer n made the brights go towards green/yellow, the mid brights towards green/yellow/reddish and the shadows more towards red/blue.

This colour scheme might not be even close to what you had in mind, think it looks sort of, I dunno, Max Payneish perhaps.

Also, I added some lightwrap around the brightest areas, to give the impression of strong light.

Anyway, it's all in this photoshop file, if you wanna take a look.

Glad to see that you're keeping at it; I think people let go off images way too soon, sort of like stopping to exercise as soon as you start to feel tired, which of course means they'll develop only incrementally.

Edit: fixed the links, or rather the files on the ftp

Edit: Btw, some stuff I don't like in the edit: What you had was a nice vertical division of the image with the bright wall in the center at the golden ratio. In my edit this has been pulled back to the center, so you now have two equal halves, which isn't at all as preferable.

Editing images like these is quite tricky, if you wanna change the camera position n such, that is, if you don't want to a lot of work, so there has to be compromises.
Looking for a writer

Snarky

Thanks for the tweaks! I really like the lowering of the horizon.

There are definitely some improvements in your edit. Like you say, though, the vertical cut down the center isn't all that exciting. If the problem is that all the detail is off to the right, how about just moving those bits one space to the left, shuffling the tomb with the yarmulke (from The Shivah, to the left of the top hat) to the right end and shifting all the others over? The mummy will be partly obscured by the foreground silhouette, but I can slide that down a bit so that it won't cover it up quite so much.

Interesting touch of color. I definitely hadn't thought of green for the light (I was vaguely thinking of rust shades for light and blues for the shadows), but you've given me something to think about. I'll experiment a bit with different options. It's probably time to move away from the pure greys.

loominous

Quote from: Snarky on Tue 17/07/2007 15:57:07
If the problem is that all the detail is off to the right, how about just moving those bits one space to the left, shuffling the tomb with the yarmulke (from The Shivah, to the left of the top hat) to the right end and shifting all the others over? The mummy will be partly obscured by the foreground silhouette, but I can slide that down a bit so that it won't cover it up quite so much.

Sounds like a nice, simple solution.

One problem with having the viewer focusing at the corner of the image is that the eyes are more easily drawn away from the image, instead of back into it. If you design it so the edges work only as framing and arrows back into the image, the chance that the viewer will stay in the image n fully explore it is more likely.

The main reason why I'd alter the composition would be to keep the viewer interested. If you have high contrast areas in the center, you have two of the most powerful devices for directing attention working for you, but if the interesting part of the image is elsewhere, the viewer will most likely discard the image as boring before exploring those other parts. And who could blame them; these devices are pretty much like huge arrows pointing towards areas, and if you point them at some dull part of the image it's like saying that those are the best parts this image has to offer.

Good luck!
Looking for a writer

Snarky

OK, one more go at this:



It's obviously really rough. I haven't realigned the objects on the left, and haven't retouched the edges around the stuff that I moved on the right, as well as some shadows and highlights etc. To be honest, I'm a bit sick of this picture.

I tried lowering the horizon, but couldn't figure out a way to do it without redrawing everything, on all their separate layers. The nudge tool creates huge distortion.

SMF spam blocked by CleanTalk