How should I process this background pt. 2

[HillBilly]

I started a new thread since I'm changing the style of the original background. Here's what I've done so far:



I should probably do out the whole background instead of drawing it piece by piece. Unfortunately, I'm just not that good yet, and this is my first try on this style. The method I've used so far is two layers for each part of the couch, one with the base color and one with the shadows. Then I merge the base and the shadow layers for each part when done.

I'm looking for ways to improve what I've done so far. And how I should color the walls. Maybe I should've drawn more before posting it here, but I'd like some more general advice before moving on. I'll continue working on it, though.

Here's the quick sketch and here's the background without sketchlines.

[ildu]

Oh bless you, dear child.

The main problem with the work done so far is that the sofa is all done in the same hue of green. Unless a lightsource is absolutely pure white (which is impossible in real life), the hue of something in highlights and shadows won't be the same. Not to mention if you have multiple lightsources, those affect the hue as well and different lighting levels. So imagine the lightsource is for example a bit yellowish - make the lighted areas more yellowish. And the more light there is (highlight), the more closer the hue is to yellow.

Another thing that affects lighting is the difference in saturation on lighted and shadowed areas. On highlights, there is more light, i.e. more color (saturation is higher) and so forth.

One practicality thing would be your initial approach to starting painting. First of all, it's highly advised that you don't start painting on a pure white canvas. It'll throw off your senses and you'll be left with a whole lot of tweaking work later on. Just imagine a general color of ambience for your room and use that as background color. If you're for example using a referance image that you think has particularly nice colors, just blur that image until there's only one color left, which you can then use as a background color. This would be advised even before you start sketching.

Another approach to take before painting would be color and lighting studies. Now lighting may be somewhat simple in a piece like this, but color is really important. So I suggest you do a color study by blotting in the main colors of the image, so that there is relatively correct coloring but no detail yet. After this, it'll be easier and more rewarding to start detailing the areas. Plus, you'll avoid a lot of post-tweaking work.

[loominous]

Think it looks pretty good, and you've managed to dodge quite many of the pitfalls that usually pop up when people try more advanced shading.

Like you said, it would've been better if you had started with the whole thing, which isn't at all harder, just more far sighted. I know that once you try something new, it's nice to just try it out without a whole lot of preparation, to just see how it goes and how well the end result can look, even if you get plenty of recommendations to focus on the big picture. So you could continue with the rest in the same manner if you feel most comfortable doing so for the time being.

If you want to try a more secure method, you could start over with the shading and treat the whole image as one large pretty complex object.

An effective way to gain this bigger perspective is to work in a zoomed out mode. In the animation below, I've worked in about 18% scale, making it about 120 pixels broad (I just zoomed out, didn't actually scale down the image).

(animated)


So first I lay down some kind of average value, which in this case might've been a bit bright.

Then I subtracted some light from the corners and the door, and started adding light, first the direct light from the window, which will be the brightest, then the bounce light from this bright spot on the floor (remember, light bounces just like tiny balls, but for each bounce off a surface, some light is absorbed, so the effect wears off.

Then I added some light to the sofa, and subtracted some from the parts which would receive the least, such as beneath it.

Then I changed some values for stuff like the borders around the door, since these are brighter materials.

It's often nice to actually start out with darkening or brightening areas depending on the material, and then start the whole lighting dealy, but I simply forgot this time, and had to do it later on. It's not a big deal, and that goes for pretty much everything in this stage, since changing things in this rough state is most often quick and painless.

Ah yes, I also added some light effects, by adding some light haze, or whatever it's called, which happens when there's lot of dust particles in the air, that would catch light. Also added some glow around the window to make it look like it is very bright.

These "effect" layers, which are just ordinary layers, are usually best kept at the top of the layer list, so you can work beneath them, to make changes to the areas behind them much easier.

At the last frame I switch off the outline layer to check how the values work by themselves. In this case I regret not making the couch darker to give a clearer silhouette, and the light design isn't all that nice.

One version that would be more exciting would be to have the direct light hit the couch instead of the floor. Luckily, this stage allows for quick experiments, so whipping up such a version would be a matter of a minute or two.

Here's the photoshop file (cs3) .

I've added a colour layer at the top which you could try fiddling with. As the canvas colours are yellowish in the brighter spots, and more neutral/bluish in the darker spots, you automatically get colour variation to the different parts of, for example, the sofa, even if you just add a single hue. This won't of course be enough, but it's a nice quick way to get the palette going.

Oh bless you, dear child.

Was a bit condescending, wasn't it?

-

Edit: Here's another lighting design:



Edit II: Forgot to mention the purpose of the whole thumbnail lighting dealy, which is that it ensures that everything works together. If you think of each element as a chord, to use a crappy analogy, it doesn't matter how good that chord sounds by itself, if it doesn't fit with the one preceding it, or lead well to the next one. So this whole thing ensures an overall harmony.

[ildu]

Oh bless you, dear child.

Was a bit condescending, wasn't it?

Haha, nah. Me and HillBilly have this thing where we say weird things to each other. In fact, I was speaking to Billy at the same time as I wrote that. I guess it doesn't translate as well here as it does on IRC . We should have a sarcasm emoticon.

Anyway, he's a funny guy. A funny, funny guy.

Not to derail or anything but here's a excerpt from the same time:

[01:04:59] <ildu> OH BILLY, why'd you start a new thread
[01:05:14] <ildu> if i were a moderator, i'd take you behind the sauna and shoot you
[01:05:30] <HillRunner> because I do what I want
[01:05:31] <HillRunner> DEAL with it
[01:05:40] <ildu> the main problem is the hue, hugh

[Stupot]

"Hugh's Hue" is the name of the book Dave Gorman was supposed to be writing when his Googlewhack Adventure begun.  So he ended up writing a book about that instead of Hugh's Hue.

Anyway, enough trivia... back on topic... The sofa looks very comfortable and is beautifully drawn, but it seems to me that some of the shadows are in the wrong place? It could just be that I've misjudged the positioning of the sofa but to my eyes it looks like some of the shading is positioned in the path of the light.

Can't waito to see more, and indeed the finished product.

[HillBilly]

Not to derail or anything but here's a excerpt from the same time:

I'd agree our IRC escapades doesn't really translate as good over here, as that excerpt actually made me seem serious when I told you to DEAL with it. But you just threatened to shoot me so I didn't know what to say.

Anyway.

Loominous, that's post was tremendous help. I'll probably start all over again now, just to try that method. Even if that couch took me forever. But as you say, it's easier to clean up mistakes on a rough than a fully detailed image. So I think that's worth it, seeing how I'll probably make a ton of them.

If I got your post right, I should first create shadows all in one shade of color, and then add the color on later? Or was that just an example on how the shadows could've been, and I need to the different colors for the different object accordingly the first time around?

I'll also try to keep the hue in mind this time.

[loominous]

If I got your post right, I should first create shadows all in one shade of color, and then add the color on later? Or was that just an example on how the shadows could've been, and I need to the different colors for the different object accordingly the first time around?

What I like to do is set up a "canvas" that does most of the initial colour work for me. This means in practice that I create layers ('adjustment layers') that changes to the colour of the layers below depending on how bright or dark they are, so you could see them as scripts of sorts. They're just as easy to add as ordinary layers however, so they're quick and very flexible, as they don't actually change the layers below, just process them. This means that just like scripts, they can be changed at any time, and have a different result on the layers below. In this case, I got the impression that you wanted quite warm colours, due to the sunlight, so I made the adjustment layers tint all brighter values yellow/orange and as they get darker more towards greys/blues.

I could quickly change this so the brights get purple and darks green, if this would make more sense.

So these adjustments layers process the image data beneath them, and the ones I used in this one was first a hue/saturation layer, which I used to reset all colour data to a single tone, some orange tone in this case. This enables me to use any colour, or black n white tone beneath it, and it will still show up as that colour tone that I've set up. This is really comfortable, since I can work both in black and white, and pick colours of the screen, and they'll still show up the same.

hue/saturation layer:


(works and looks just like the image adjustment function in the top menu (image/adjustments/hue-saturation, but it's only a post process, it doesn't actually apply the changes to the layers below)

The other adjustment layer was a curves layer which allows you to affect the colour channels and the different values separately (can work with all of them as well, to modify the overall brightness etc).

In this case I reduced the blue channel in lighter values, so as to get a yellow hue (yellow is the opposite of blue, so if you decrease blue, you get yellow), and boosted the blue channel in the darker values, to get more blue.

I also changed the red channel, to get more orange tones to the mid values, so the brightest parts would be yellow, as they get slightly darker, they get more orange, and as they get dark, less red/orange.



(can see the individual channels as these lines, the bottom left corresponding to darker values, the upper right brighter)

The quickest way to access these adjustment layers is in the layer toolbar:



(can also access them through /layers/adjustment layers in the menu)

-

You can find both these adjustment layers in the photoshop file I linked to in the last post, in the layer folder by the same name, if you're able to load that project.

-

Anyway, one problem with relying on a crude method like this for colours is that whether something is dark or not isn't actually a good indicator whether it's in shadow or not. A dark object in the sun is still pretty dark, and a bright object in shadow is still pretty bright. So this isn't by far a method to rely on for accuracy, but as I said earlier, it's a quick way to get a palette going and just like the value sketches contain lots of mistakes that need to be corrected later on, but gives a nice overview.

-

About the individual colours, I tend to introduce them as late as possible, depending on how much variation there'll be. If it's a room with neutral colours (so basically, red is pure red, green is green), then it would be good to introduce them early on, right after the value sketch. If it's a monochrome environment, I introduce them late, after I've made refinements. The reason is that I want the canvas to work for me as long as possible. As long as I rely on the adjustment layers for colours, I don't need to bother about picking the right colour for specific values, so I can just work in black n white and the adjustment layers see to it that precisely the right colour is picked.

There are many ways to introduce colours, the simplest way being through a colour layer, which I set up in that photoshop file as the top layer. That one works just like adjustment layers, in that it's a post process that doesn't actually change the layers beneath it, just process them.

Using a colour layer is trickier than it might seems, but at the same time, it gives you a nice insight into how colours work. Applying the same colour to areas of a different values, let's say one mid value, one dark, will have different effects, since they have different saturation capacity, meaning that mid tones can contain a large amount of colour 'pigment', while brights n darks can contain very little.

(can think of it as if dealing with a bucket of paint: if you buy pure red paint, then it contains very much red pigments, which are the particles that makes it red. So the amount of red pigment is, let's say in theory 100%. As you want it to get brighter or darker, you need to start to add either white or black paint to it, which means that the original pigment amount (saturation) will drop. So if you just want to make it a bit brighter, and add 10% white, you get 90% red saturation, and if you want to make it very bright, there might only be 5% red left (or 0% if you want it completely white. So when you add a saturated colour to a dark or bright area, it'll quickly become saturated, since its capacity for holding saturation is so small (those 10% get filled up quickly), while a mid value that can contain 100% will only be affected to a degree).

There are other numerous ways to add colour, but I think this one might suffice for now, as I've probably introduced a couple of new concepts.

By the way, you could try to start out adding light, instead of adding shadow. This is especially good when you're not all that used to values, since you're then prone to keep stuff very bright/neutral, as you're overly careful about "shading" areas. If you instead start with a dark silhouette of an object, you only add light where it makes sense that the light would reach, and the objects start to pop more. Another benefit is that you clearly see the silhouette of the object you're dealing with initially. Keeping the silhouette on one layer, and then add another with the added values still works, and is a nice method, though it can result in a huge amount of layers, but if you just merge stuff when it look right, it's not an issue.

[Ghost]

The usefulness of layers never cheases to amaze me. Thanks for sharing this, loominous, it will sure come in handy.

And HillBilly- great progress! That's really no comparison to the rather clean and cartoony first iteration of the pic. It's an all new style, and it works well!

[loominous]

The usefulness of layers never cheases to amaze me. Thanks for sharing this, loominous, it will sure come in handy.

Glad you found it helpful.

Btw, if anyone have any questions about stuff in these mini introductions, just ask, as I'm sure some things are poorly explained, particularly as in this case, where I rushed the whole thing. (these things usually start out as a single paragraph, that then expand into these mini essays, which messes up my time planning).

[Afflict]

Geez loominous, WOW.

Thanks, your infinite knowledge is appreciated! Now I need to go ad re-read the post.

Edit:

I never actually learnt about lighting, (self taught ) but the way you explained it was awesome. Thanks. Just one question, the bouncing balls as you put it do they bounce in the initial direction (linear)that the light hits or do they scatter in a radius?

[tube]

Just one question, the bouncing balls as you put it do they bounce in the initial direction (linear)that the light hits or do they scatter in a radius?

One would think this depends on the surface the light hits. If it's extremely reflective and smooth the light "bounces off" in a pretty linear fashion. Whereas a rougher surface would cause the light to scatter.

[loominous]

Have started on a lengthy response, but here's a snippet to answer:

Just one question, the bouncing balls as you put it do they bounce in the initial direction (linear)that the light hits or do they scatter in a radius?

The light particles/waves remain intact, and bounce like balls on a billiard (pool) table, with the same out angle as in angle (so if you shoot a ball towards the rim at a 45 degree angle, the out angle would be 45 degrees (the rims of billiard tables won't act like this in practice, due to their material)).



However, since they're so tiny, they will bounce off the crater like surface of ordinary materials (which if looked at through a microscopes don't at all look smooth) in different directions, as if you were throwing tennis balls at an uneven cave wall. The main angle of the surface will determine where the biggest proportion of the balls will go however, so even though the surface is uneven, and the balls will scatter off in different directions, the largest proportion of the balls will still bounce off in roughly the same direction as it would if the wall was smooth.



In the case of a mirror, the wall would be perfectly smooth, so no scattering would occur, and an intact mirror image of the light source would be created, which is the same thing you can see in a still water surface. As soon as ripples start to form however, the particles/balls start to bounce off these in different directions, and the reflection becomes distorted.

So you could in a simplified way think of all objects as having mirror surfaces, with more or less "ripples" on them.

[Afflict]

Awesome! Thanks loominous