Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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:

enter image description here

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

share|improve this question
    
Depending on the type of wall you want to indicate, and with the slight impression that it's a house wall from your example, maybe a skirting board and even a plug socket would give the undoubted impression that it's a wall. –  DumbNic Sep 8 '13 at 21:00

1 Answer 1

up vote 3 down vote accepted

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

enter image description here

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

enter image description here

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:

enter image description here

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.

share|improve this answer
1  
This is a great answer, thanks! It never occurred to me to consider a light source (I don't have enough rep to upvote you yet) –  RTF Sep 8 '13 at 13:42

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.