Wednesday, June 28, 2017

website design - How should I add a realistic shadow to this?


I'm working on a mockup of a jQuery slider which can be found here.


Now, I'm not the best graphic designer by any stretch of the imagination, and I can't seem to be able to get a realistic looking shadow. What I want is for the phone to appear as if it's standing on its side, but all of my attempts in Photoshop usually result in the phone looking like it's floating at a weird angle.


What I've tried so far (and failed at):



  • Added an elipse near the bottom of the phone and blurred it. This sorta worked but just doesn't look right.

  • Added a rectangle and did the same as the previous bullet, but this looked worse.

  • Tried using a drop shadow layer effect. This looked horrible.


Can anyone give me some suggestions?




Answer



EDIT: [ After looking again, something was just not right.... So, the first thing I would do is rotate the phone 180°. It won't sit on the buttons therefore the buttons need to be on top. ]


Then....


The key is the initial shape. Narrower at the base of the phone then slightly wider at the lower edge. You want to start with a trapezoid.


Shadow Shape


Add Filter > Blur > Gaussian Blur


blur


Lower opacity to your liking.


Opacity


For additional realism add a second shadow smaller and slightly darker above the first shadow.



Second Shadow


No comments:

Post a Comment

technique - How credible is wikipedia?

I understand that this question relates more to wikipedia than it does writing but... If I was going to use wikipedia for a source for a res...