Facebook Play Ideas are worthless An empty cup How I learned to become a failure Designisnowhere The Junior & The Art Director A Case for Space Crappy club for jerks Boxed In Zero for hire HiiDef Inc. Identity A New Page (& Year) Portfolio Building Ignorance Avoidance Dynamic Columns Flat Shadows Upright Shadows The real Jim Shady Design with a point of view TweetDeck icons Get creative, you hack MacUser Magazine Expression Engine: Quick & dirty Back in business Swiss for WordPress Stepping into web design Navigation spacing in Photoshop .NET mag fame Design by numbers Proper propaganda Stats: One month in Pimped! The ever-watchful subconscious Designing for the web: 5 things I love & hate Ripped! Fun with a tablet Incestuous design A New Beginning Logo marathon Making it real What’s in a name? Tippin’ the Balance
—Published 10 May, 2009
So last week I wrote about shadows for upright objects and this week I’ll be running very quickly through shadows for objects sitting flat. The article I wrote for Smashing Magazine on light and shadow had a few examples that some people wanted explained more fully. So here we are.
Those with ‘skills to pay the bills’ in Photoshop may want to sit this one out. But for those not sure how I did the shading in the coke can examples, here is the second installment showing really simple shadow tricks you can use in Photoshop.
Create a drop shadow using layer styles. In my example I’ve put the distance to 6px and kept the size and spread at 0 — later on, if we want to make the shadow more dispersed, we can groom it with the blur tool.
Put the opacity up to full (this simply gives us more darkness to play with should we need it).
TIP: Make sure your object is properly cut out (ie: no white edges) or this effect is going to fail.
Right-click on the shadow and choose ‘Create Layer’. This will put the drop shadow on it’s own layer and let us play around with it.
In the top menu go to Filter > Blur > Motion Blur
You’ll see you’ve got just two variables to play with — Angle and Distance. The Angle should be determined by where your light source is coming from that’s casting the shadow. So in my example, the light’s coming from the top left, so it’s at an angle of 45°.
The Distance should be how long you want the shadow to be cast.
Using the Eraser tool, gently remove all the shadow that’s been blurred on side where the light is coming from. In my example, all the shadow that’s on the top left needs to go (but notice I’ve left the shadow being cast by the arm).
At this stage you can also drop down the opacity of the shadow layer so it’s a little more subtle and realistic.
Lastly, in the layers panel Ctrl-click / ⌘-click the layer thumbnail with your object (to select it). Now create a new layer and with a softish round black brush on 30-50% opacity add a little shading to the side of the object where the shadow falls.
I’ve hidden the object layer to better show the shading.
Hopefully you can reproduce this effect without too much trouble. Just remember it’s all about making gentle changes. Good luck with it.