: How can I achieve a better 3D lifting effect of a logo for a website? This is my current approach, only the shadow moves. http://tinkerbin.com/uekpe227 This is a second approach, both the shadow

@Hamm6457569

The real answer to this question comes directly from asking "How does it work in the real world?" An effect like this will seem artificial and wrong if it doesn't mimic what would happen with a physical object. This is a general principle that applies to all the effects we use on websites, on paper, or in movies. A classic error in Photoshop compositing is to have the light on the background coming from a different direction than the light on the subject. It can never look real, because the real world doesn't work that way. You have a similar problem here, so try this:

Put a flat object (a coin would work) on a white surface, shine a light on it, then lift it slightly. What happens to the object in your field of vision? What does the shadow do? They both move, but they move simultaneously, not one at a time. That's why none of your examples look right.

Any time you have a challenge like this, where you want something to give the illusion of a real-world analog, the thing to do is find that real-world analog or create it, then observe it until you are certainly you know what it looks like. Then go back to Photoshop or your application of choice and make it look the same there.

Vote Up Vote Down