Game authors and players, please read this thread!

Author Topic: Office Background. Need Texture/Shading Suggestions  (Read 1565 times)  Share 

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.

Re: Office Background. Need Texture/Shading Suggestions
« Reply #1 on: 04 Jul 2012, 07:21 »
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

  • Global Moderator
  • Mittens Baronet
  • Cultured man of mystery
    • I can help with backgrounds
    •  
Re: Office Background. Need Texture/Shading Suggestions
« Reply #2 on: 04 Jul 2012, 22:01 »
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.
Be vigilant, citizen!
Check out my GiP, The Samaritan Paradox
Also, check my blog at http://faravidinteractive.wordpress.com/

Frito Master

  • 0% Trans-Fat 100% Toxic
    • I can help with animation
    •  
    • I can help with backgrounds
    •  
    • I can help with characters
    •  
    • I can help with voice acting
    •  
Re: Office Background. Need Texture/Shading Suggestions
« Reply #3 on: 04 Jul 2012, 23:02 »
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.
Your favorite brandname chip friend.

Re: Office Background. Need Texture/Shading Suggestions
« Reply #4 on: 04 Jul 2012, 23:26 »
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

  • Global Moderator
  • Mittens Baronet
  • Cultured man of mystery
    • I can help with backgrounds
    •  
Re: Office Background. Need Texture/Shading Suggestions
« Reply #5 on: 04 Jul 2012, 23:42 »
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.
« Last Edit: 04 Jul 2012, 23:46 by Andail »
Be vigilant, citizen!
Check out my GiP, The Samaritan Paradox
Also, check my blog at http://faravidinteractive.wordpress.com/

Re: Office Background. Need Texture/Shading Suggestions
« Reply #6 on: 04 Jul 2012, 23:46 »
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

  • Likes apples and nuts
Re: Office Background. Need Texture/Shading Suggestions
« Reply #7 on: 05 Jul 2012, 00:12 »
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

  • Evil Dark Emperor Death-Kill
    • Lifetime Achievement Award Winner
    •  
    • I can help with play testing
    •  
    • I can help with scripting
    •  
    • I can help with translating
    •  
Re: Office Background. Need Texture/Shading Suggestions
« Reply #8 on: 05 Jul 2012, 01:31 »
http://whathaveyoutried.com/

The other day on yahoo answers:
"Can you print colored images with black ink? If so tell me how please Thanx Kimberly"

Shane 'ProgZmax' Stevens

  • Local Moderator
  • AGS Project Admins
  • RON PAUL JUST GOT HUGE!
    • I can help with animation
    •  
    • I can help with characters
    •  
    • Lifetime Achievement Award Winner
    •  
    • I can help with AGS tutoring
    •  
    • I can help with proof reading
    •  
    • I can help with scripting
    •  
    • I can help with story design
    •  
  • Shane 'ProgZmax' Stevens worked on a game that was nominated for an AGS Award!Shane 'ProgZmax' Stevens worked on a game that won an AGS Award!
Re: Office Background. Need Texture/Shading Suggestions
« Reply #9 on: 05 Jul 2012, 07:11 »
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

  • Global Moderator
  • Mittens Baronet
  • Private Insultant
    • I can help with proof reading
    •  
    • I can help with translating
    •  
Re: Office Background. Need Texture/Shading Suggestions
« Reply #10 on: 05 Jul 2012, 10:55 »
Regarding the shadows, don't be afraid to make them count. Of all Eric's paintovers, this is easily the best one:



Re: Office Background. Need Texture/Shading Suggestions
« Reply #11 on: 05 Jul 2012, 23:44 »
While we're picking on your perspective, make sure you fix the lid flaps of the box too.

Moresco

    • I can help with AGS tutoring
    •  
    • I can help with animation
    •  
    • I can help with backgrounds
    •  
    • I can help with characters
    •  
    • I can help with proof reading
    •  
    • I can help with story design
    •  
    • I can help with web design
    •  
Re: Office Background. Need Texture/Shading Suggestions
« Reply #12 on: 06 Jul 2012, 05:37 »
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.
« Last Edit: 06 Jul 2012, 05:47 by Moresco »

Re: Office Background. Need Texture/Shading Suggestions
« Reply #13 on: 06 Jul 2012, 17:05 »
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

    • I can help with AGS tutoring
    •  
    • I can help with animation
    •  
    • I can help with backgrounds
    •  
    • I can help with characters
    •  
    • I can help with proof reading
    •  
    • I can help with story design
    •  
    • I can help with web design
    •  
Re: Office Background. Need Texture/Shading Suggestions
« Reply #14 on: 07 Jul 2012, 01:35 »
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


Re: Office Background. Need Texture/Shading Suggestions
« Reply #15 on: 26 Jul 2012, 12:44 »
The right wall is out of whack perspective wise.