Tips for lighting a room

[Kaycin]

Hello everybody!

I'm working on some backgrounds and I'm having a hard time getting the lighting correct.

Here's an example of one of the backgrounds I've created and the lighting I've tried.

The unlighted background:


My attempt at lighting:


I created the unlighted background in Illustrator, then attempted to light it up with Photoshop.  The lighting that I used does serve its purpose, somewhat, in that it adds depth and realism to the picture.  However, I'm not so good with color shading and such so it looks more like lighted smoke or mist that actual color.  I'm having a hard time creating realistic lighting without creating a colored fog so to speak.

Does anyone have any pointers?  I've read several guides and forum posts and the consensus seems to be that Photoshop/Illustrator are not the best programs to use for these types of adventure games.  Is there one in particular that serves this purpose better?  I'm keen on learning, but if there's a program that is worth my time more than another than that would obviously be preferred.

Any criticism and/or feedback is welcome!

Thanks!

[Snarky]

Tip: Check the Lighting a Room thread further down the page.

[Kaycin]

Hey thanks for the reply.  I actually did check that out and read several of the guides you posted along with the users you linked as well.  But I'll take a closer look at what everyone has said.  Is there a program other than Photopshop to use?  I saw you guys talking about Kerkythea, but from what I understand that's more for 3D lighting?

Regardless, I'll go through that thread and see what I can find, Thanks!

[Anian]

That other thread is about lighting a scene in postproduction, that was made in 3d (but is 2d when it's already made). Which is basically what you're doing here. And you're doing a similar "mistake" in approaching it.
Take for example the wall under the lights, instead of having a flat surface, you used a gradient which makes it seem like there already is a light source. Light is not only what you see, but what it lights and what shadows it creates.
This is quick and terrible example, but I gave it a go on the first light:


btw the rails have a wrong perspective

[Snarky]

I think one of the key points in Anian's edit, and that I also tried to make in the previous thread, is that light falls on surfaces. It doesn't fall on the air (unless it's full of mist, heavy dust or smoke). So you can't just draw a transparent blob of light around a lamp; that's what makes it look like colored fog. You have to think about each surface individually, and how much light will reach it in various places (or whether it's in shadow from something else).

Also, all the light in the picture comes from somewhere. If there were no light sources, it would all be black. So you shouldn't first draw the picture with some things dark and some things light for no particular reason, and then afterwards try to add the light from the lamps on top. If the lamps are the main source of light (as it looks like you intended from your lighting attempt), keep that in mind from the beginning as you're assigning colors and shades to each object. (For example, see Anian's edit of the toppled trash can.)

[ThreeOhFour]

One thing that is important to learn is how hues can be used to add contrast to a scene - and lighting is easily thought of contrast between the dark and the light areas. When you lean towards one particular hue for coloring most of your background pre-lighting, it gives you the ability to make your lit areas really pop when you begin to add your lighting if you use a hue that is opposite on the color wheel. These are known as complementary colors, and their presence is quite noticeable when you look for them in games. Not only do they make your lit areas stand out better, they also enhance the atmosphere of a scene.

Also, using a yellow blob as a light doesn't really convey a sense of brightness. No matter what color I want a light to be, if it doesn't look bright enough, I'll always highlight the middle of it with pure white or close to pure white to really give it that bright feeling. The color of the light can be shown in the surrounding areas rather than the light itself.

In addition to Anian's/Snarky's notes on light falling on surfaces, keep in mind that light really shows up on edges. Lighting the edge of an object can really help a scene feel real.

Finally, keep in mind that you will almost always have more than one type of light. It's important to remember the effects of ambient light and how even things/edges away from your direct light sources may receive illumination from light sources shown offscreen.

Naturally, all this would be just ramble without a demonstration, so here's one I prepared earlier:



Edit: Don't forget to put shadows under stuff once you've added lighting or the lighting looks flat and/or the objects seem to float.

[Kaycin]

Awesome, thanks for the replies guys! Very helpful.

ThreeOhFour, when you talk about color wheels and complimentary colors, do you mean, add a hue that is opposite of the main light source?  In that photo of DIG it seems the primary colors used were Orange and Blue (which are opposite), and I think you used purple as a hue in the lighting you did for my picture?

Again, thanks guys.  I'll post back with results if I'm able to put this into practice.

[ThreeOhFour]

Yes, I turned the darker parts to a purpler hue, to complement the orange/yellow hue of your lights. Yellow and purple is one of the most common uses of complementary colors - but as I tried to show, other combinations such as orange/blue and green/purple are also very commonly used.

[Anian]

ThreeOhFour, when you talk about color wheels and complimentary colors, do you mean, add a hue that is opposite of the main light source?  In that photo of DIG it seems the primary colors used were Orange and Blue (which are opposite), and I think you used purple as a hue in the lighting you did for my picture?

If light is white then dark is black, if you were making a black and white photograph, white would represent lit areas and black would represent darkness/shadows, right?
In colored drawings you can use the same analogy. For example orange, red, yellow are considered "warm", while blue, purple, green are considered "cold" colors, so usually we perceive warm as a source of light (fire, sunlight etc.) and cold as shadows and darkness. The main thing is CONTRAST, like white-black, yellow-purple, orange-blue, orange-purple, orange-blue, yellow-blue.
Check out new movie posters as examples of usage of orange/blue as a contrast (Dark Knight, 127 hours, Hobbit and billion others).

Read about complementary colors if you really want to know more.

[Kaycin]

Thanks everyone for the pointers (thanks Anian for the info on contrasting and complimentary colors, will definitely be helpful when creating backdrops in the future), I spent most of the day trying to figure out how to recreate the image you created ThreeOhFour. 

I trashed probably a dozen attempts, here's the best I came up with:

(Ignore the shading in the back right corner, definitely messed that up)

I'm having a hard time drawing the lighting/shading without creating obvious "brush" marks.  Lighting doesn't seem to flow or mesh as well as in yours.  I'm not able to create subtle lighting on the walls and floors.

Lastly, Did you add hue by adding a Layer w/ a mask and just select the areas that were meant to be dark?

Thanks everybody for the help, much appreciated.

[ThreeOhFour]

May I ask what version of photoshop you're using? (This seems to make a different with regards to brushes, the older versions don't seem to have the same ones)

[Kaycin]

It's the most recent version of Photoshop and illustrator, CS6.  I might just have a weird brush selected.

[Kaycin]

Hey guys,

So I figured out a way around the brush issue, I just Polygon select the area I want then use a rather large brush to get the desired, gradual lighting effect. 

Here's my next try:


The lighting is much more fluid and realistic.  However, I'm finding it rather difficult to create darkness with the purple hue.  When I add an adjustment layer and fiddle with the hue, it just doesn't seem as a authentic and seems like it's be cut and paste on top of the image.

Any pointers for hue adjustments?

Thanks for the help!

[ThreeOhFour]

I usually prefer the "color" adjustment layer, because it also affects your luminosity and saturation. Hue always looks a little fake to me.

To adjust your hues really quickly, I used two color layers, one with dark purple and the other with bright yellow. Used a big (200px then down to 100px) to erase, then adjusted opacity roughly. The more you tweak, the happier you'll be with it, but this is a quick and easy way to start.

[Kaycin]

Ok I went about as far on this picture I think I'll go for now, thanks everyone for the help!  I'm amazed at how much information you guys were able to teach me.

Anyway, here's the finished copy of it, in case some of you were curious.  It's obviously not perfect, but it has come a long way:


Thanks again!

[Monsieur OUXX]

Ok I went about as far on this picture I think I'll go for now

There's still one thing you could do that would take just 3 seconds!
The part of each lamp that's immediately above the light source (i.e. the top part of each lamp) should be almost black.

Apart from that the scene has made enormous progress!

[Kaycin]

Ah! Good find, thanks!  Always room for improvement it seems