Office Background. Need Texture/Shading Suggestions

[Dread Spectacle]

Hello Critics Loungers.  I've finally decided to stop lurking in these forums and post something.  I've been working on improving my art abilities and have created some backgrounds that I feel are good but still badly need some texturing and/or shading.  What appears to be a chalkboard on the left wall is actually a window.  I'll probably be putting blinds on it eventually.  The door on the right is also still unfinished.  I know it is sparsely furnished, this is a plot element.  I'd really love some simple texture/shading techniques you might have in your repertoire.  Thank in advance for your help.

[Eric]

In the interest of helping out and getting a thread started for you, I'll try and point out some ideas that I think are correct, and hope that if they're incorrect, someone will correct me and we can both learn something from it.

First thing I'd do is figure out what your light sources are. Looks like you've got a handful: the window, two desk lamps, and probably an overhead light (otherwise that corner with the door will be pretty dark. I'd start by shading according to where those lights wouldn't hit.

(I didn't realize there was a window until re-reading -- I thought it was a blackboard, so add it to the lightsources I demonstrate below.)

First, figure out where that overhead light would cast shadows. I'm working on my wife's Netbook, and I hate touchpads, so this is really, really, really rough:



I work in Photoshop, and use layers. I've made this one purple so you can see it more easily. I think there's a rule about warm lights casting cool shadows, and vice versa, so you should figure out what kind of overhead light you have, and where it is in the room.



Back off the opacity of that layer, and you've got a nice clump of shadows that start giving the room some depth. You might want to not make all of these the same opacity. I'm pretty sure the rule is something like shadows get shorter and softer the further they are from the light source. I might be wrong on some of that.



Now, figure out the other light sources. I've done a very basic circle + Gaussian blur on these desk lamps. You can do this much better than me, even if by just having a mouse. Can we trade back computers, honey? She says no! Carry on!



Find where shadows would be cast by these light sources. You can see them in purple again!



Back those off in opacity, but not as much as for the previous shadows. These shadows will be shorter, but darker, because they're closer to the light source.



The computer monitor will give off a soft diffuse light, but fairly weak shadows. I didn't even bother to draw them in here.

These are some very, very basic, rough, and in many cases, incorrect shadows.  Were I you, I'd look around for some basic tutorials on light and shadow. DeviantArt might be a good place to start. I haven't even gotten into highlights, or textures here. Hopefully someone more helpful than myself will chime in soon!

[Andail]

If you want to pursue some sort of whacky DOTT-esque graphics, that perspective can work, but for a more realistic art style it doesn't. I think you should draw up a proper perspective system with vanishing points and a horizon etc and use reference lines to get it right. Remember that in a two-point perspective system, you can't position objects outside an imaginary circle that touches both vanishing points, or the angles will be rendered too extreme.

[EchosofNezhyt]

If you want to pursue some sort of whacky DOTT-esque graphics, that perspective can work, but for a more realistic art style it doesn't. I think you should draw up a proper perspective system with vanishing points and a horizon etc and use reference lines to get it right. Remember that in a two-point perspective system, you can't position objects outside an imaginary circle that touches both vanishing points, or the angles will be rendered too extreme.

I didn't know that... I'm terrible with perspective.


My suggestion is to go get google sketchup and make a 3d layer and use that for guide lines. It should be easy enough.

But honestly it doesn't look bad I like it.

If I find time I'll try and help you with the shadows.

[Dread Spectacle]

Eric: I appreciate you spending time to do paint-overs.  They look good and your suggestions seem to be within my scope of abilites.  I'll try a few out and hopefully post an updated version.
Andail: Thanks for the criticism. I'm certainly not going for a wacky style.  The below image shows my perspective sketch.  I did bend the rules a bit with the far wall.  It's flat but I thought that this would make it seem less wacky.  Maybe it would have been better to adhere more closely to the perspective I had laid out.

[Andail]

hm, ok... first of all, do you realize that the way you've drawn the that room, the nearest desk is like three inches tall? Follow the help lines towards the door to the right (which hasn't been drawn in perspective, for some reason), and you'll see that the height of the desk is only like a tenth of the door.

You can't let the drawing area occupy such a big portion of the entire perspective "field", or things will just look skewed and weird. Start with a horizon, then position the vanishing points really far apart, and just let a small area somewhere in between be where you draw your room.

So instead of:

   DRAWING DRAWING DRAWING
X-----------o-------------X
   DRAWING DRAWING DRAWING
      DRAWING DRAWING

You get:

         DRAWING
X-----------o-------------X
         DRAWING

The reason for this is that a room isn't infinite, like a cityscape with streets converging in the distance. A room has a rather limited depth of field.

[Theme]

The perspective seens correct, but placing the vanish points near the draw makes it look very distorted.
The tables at far looks huge compared to the near one.

[Armageddon]

I'd suggest practicing placing perspective lines and points, anyone can follow the points to make objects, but it's very hard to set up a proper horizon line. Try looking at some other drawings you like and figure out the vanishing points. As for the background I'd say it needs to be redrawn, almost all of your vertical lines are skewed which makes no sense because this isn't a three-point perspective.

[Khris]

I don't think that perspective is the biggest problem here, it's the proportions.
Dread, start with a basic grid of 1m² squares, or 1ft² ones. Then make sure that everything's properly sized.

Also note that horizon = eye height, so when you draw a door, 70% to 80% of the door should be below the horizon (unless you want a very high/low camera position).

One other problem is that you'll need characters that scale well. In a setup like this, the characters should be scaled down to about 50% at the far end of the room.
It's much easier to squash the room depth-wise, i.e. put the entire floor on a relatively small y-distance. So basically we don't want a fish eye lens but the opposite. In other words, move the VPs further apart, like the others said.

[Shane 'ProgZmax' Stevens]

Yeah, the proportions are way off.  Just look how massive the door is in relation to the desk nearest the viewer.  The door should be considerably smaller or the desks considerably larger.

[Snarky]

Regarding the shadows, don't be afraid to make them count. Of all Eric's paintovers, this is easily the best one:

[Eric]

While we're picking on your perspective, make sure you fix the lid flaps of the box too.

[Moresco]

Since the perspective and proportion issue has been addressed, how about a bit more on shading and shadows.  For shading, it helps to understand value.  That is, the black and white and all gray values in-between that remain when you subtract all color from your image.  A great way to check this in photoshop is throw a solid black layer over top of your image and set the layer to Saturation.  For cast shadows, there is a rule called halfway to black that some people use to help determine what value to use for the core-shadows and cast-shadows.  Like this shows:



Ignore the top-left portion for now, that's just showing you some bounced light and it's pretty simple but focus on getting your basic values right first before you worry about that.

What you should also take away from this is something called a 1-2-3-read and this pertains to your choice of value.  So if you take a box like in the image, it's easiest to "read" the box when there is contrast between the 1:top of the box, the 2: left-side of the box, and the 3: right-side of the box.  Depending on what you want to be seen in the image, you can adjust this read to your liking by making two sides a similar shade, or make it "read" better by making the jump between shades larger for contrast. ***this is within reason here, you can't adjust it and ignore your light sources completely or anything, the light source will largely determine what you can actually get away with.

When it comes to your background as a whole, you should think about your values and try to emphasize or de-emphasize the areas of importance, which is a hard thing to do at first, but do many different lighting scenarios as throw-aways and see what works best.  Thumbnails help here to keep from taking a long time looking for values, but maybe for the first studies you might not do thumbnails.  Hopefully that helps in some way, I'm not a teacher so maybe someone has a better explanation or a better guide to explain these things more clearly if I've failed. Cheers.

[Eric]

For cast shadows, there is a rule called halfway to black that some people use to help determine what value to use for the core-shadows and cast-shadows.

Thanks for this, Moresco. I hadn't heard of this rule before!

[Moresco]

Thanks for this, Moresco. I hadn't heard of this rule before!

No problem.  Most of what I know is from the industrial design school of thought, or concept design is another name for it, if you feel like looking into it.  You can learn a lot more about it here if you're curious:
FZDSchool youtube

This one he talks a little bit about value in the beginning, but I don't remember how much...they're all worth watching though.  He doesn't give too many fundamentals away though because, he has students who pay a lot of money for that.  Anyway check it out:
http://www.youtube.com/watch?v=mH_g_e-fIzo&feature=plcp

[theo]

The right wall is out of whack perspective wise.