How to create a realistic shadow between wall and floor in Photoshop or GIMP?

Question

I'm inexperienced with Photoshop/GIMP and was hoping someone could tell me how to create a realistic (or as realistic as possible) shadow between a wall and a floor as a background image for a web page, to give the impression of a room for a more three-dimensional effect (either Photoshop or GIMP is fine).

The image is just two colors, one for the wall (about 2/3 height) and the other for the floor. There's no angles involved.

I've tried using two separate black gradients with reduced opacity where the "wall" and "floor" meet, one at the bottom of the "wall" and the other at the top of the "floor". The result isn't great, I'm sure it could be a lot better, but I don't really know what else to do. Any tutorials I've checked out regarding shadows are more focused on creating shadows cast by objects or drop shadows for text, things like that. Here's my attempt:

Can anyone help me out with this, or maybe point me in the direction of some good tutorials?

Answer 1

Linear gradients on flat surfaces have the disadvantage that we easily mistake them as shadows from rounded surfaces such as two bordering cylinders.

This can be overcome by rendering the shadows with an imaginary light source on one of the sides rather than in the middle.

1. Imaginary light source

Imagine a light source on the top right in front of the wall but outside of your example image above. Then the wall will be lit most on the top right corner, as this is closest to the light. The floor's most lit corner is on the bottom right corner of the image (this again is the floor's closest point to the light source).

2.Linear Gradient

To make this with Gimp I made a very basic and simple approach using a linear gradient from starting point dark to transparent at the end point for a light source far away. A radial gradient may be used for a small imaginary light source close to the object.

3. Floor

The floor is selected, ready for filling. To achieve a light corner at the right bottom we draw our gradient line from the left upper corner to the lower right corner of the image.

4. Wall

After having inverted the selection we can now fill the wall with a linear shadwo gradient. Note that for a brightly lit upper right corner we draw our gradient fill line just the opposite, i.e. from the lower left corner to the upper right.

5. Some blur is also a good idea

To make the scene look a bit more "realistic" we may want to add some blur to the corner between wall and floor. Here I added a light motion blur effect:

Of course I was overdoing the effects here for demonstration purpose. To get nice results you will have to apply much less shadow, and keep the light source distance less off the center.