Most real sheets of paper and card are not completely flat, but a standard Photoshop drop shadow can make an object look like its floating in mid air a lot of the time. However, a slightly curved or rolled page, a folded corner or a small crease is enough to go from looking too ‘Photoshop’ to looking quite natural. Using Photoshops ‘Selection’ tools you can crop your basic drop-shadows to make them appear much more realistic and more 3 dimensional.

1: Define Your Page Element

> Open a new Photoshop file to page requirements (72 dpi for web, 33dpi for print)
> Create a new layer and name it ‘Page’ (or a name of your choosing)
> Using the rectactangle selction tool – draw the page you want to apply the effect to

draw-rectangle

2: Apply a Drop Shadow to the Page

> Layers (from the main menu) > Layer Style > Drop Shadow

apply-shadow

The settings used for this tutorial are; Distance=”4px”, Spread=”0px”, Size=”16px”. You can adjust these drop shadow settings to be appropriate with the particular type of image you want to emphasise; a poster, a postcard, an old sheet of paper etc.

shadow settings

Basically you need to imagine the natural 3D quality of the physical object and recreate it. A new sheet of paper would have very little 3D quality when layed flat so you wouldn’t need more than 16px in size, but an old photo may have heavily curved corners for example – in which case you would increase the size of the shadow. Here we are aiming for something in between.

The more you increase the distance of your shadow – the more you can control the direction of light to your page.

4

3: Flatten and Rasterize the Page Layer

> Right-click and convert your rectangle into a ‘Smart Object’
> Right-click again and ‘Rasterize’ your new Smart Object

6

5

4: Start Cropping the Shadow

> Take the Spherical Select tool from your tools panel and draw yourself an extreme oval
> Place the bottom edge of this oval at the top edge of your page
> Hit the Delete/Backspace button to crop your 1st curve into the drop shadow

8

What you may find is that for darker or larger shadows – the crop looks to clinical and precise to be natural. The cure for this is to add a Feather effect to the Spherical Select Tool before you carry out the crop. The Feather setting is found at the top of your workspace window, below the main menu. The darker and more dramatic the shadow – the more you will need to increase this value.

10

Once you have cropped the top of the shadow do the same with the bottom. The distance that you applied to the shadow in the settings box will actually do most of the work for you in terms of simulating natural light direction.

9

Once both the top and bottom edges are cropped we have a more natural looking drop shadow than is possible with the standard Photoshop effect. The image now looks 3 dimentional without appearing to hover in mid-air. See below …

11

You may want to add some more depth to the image. To do this, apply the same cropping technique to both the left and right sides of the page as well.

12

Now you have the a more natural effect to plant your nice image or content on to. Here I have used a photo I took in Barcelona.

13

Now the finished image has a natural quality all of it’s own and now sits ON the page rather than hovering above it.!

14

*This is a taster of things to come. Help us to deliver the things you want to see by leaving constructive feedback and requests for future Photoshop tips!!

By Lee Mason, a freelance graphic / web designer based in Norwich.

  • http://www.adelineyaw.com Adeline

    This is a great tip, thanks!!

  • Eli

    Very interesting and useful, but my eyes really hurt of the white on black text :c

  • http://www.novicebloggers.com/ Senthil Ramesh

    Thats an fantastic and simple tut once again from design reviver. I am giving a try now to see whats the result will be.

    P.S: I am learning Photoshop now and these tuts are of great help to me.

  • Pingback: Better Drop Shadows in Photoshop | Lively Design Tuts

  • http://maxtarkhov.com max tarkhov

    this is awesome! thanks for a great article :)

  • http://www.nouveller.com/ Benjamin Reid

    Nice technique and well explained. I’ve never used this before, might give it a go.

  • Bryan

    I use a different technique to do the drop shadow like this. I make a selection from the element (photo), convert that to a path and then use the path handles to angle behind photo, fill with 50% grey, gaussian blur and your done.

  • Henry

    very nice.. i love that kind of simple technique with an awesome result

  • http://www.robbclarke.com Robb Clarke

    Forgive me if this is a stupid question… but 33dpi for print? Isn’t that a tad low? About 267dpi too low?

  • satrya

    Wow !
    Amazing friend ^_^ ..

  • http://www.taghouse.com.br/ Daniel Miguel

    Thanks Mate, this tutorial is totally simple and useful…

    Greetings from Brazil.

  • http://www.lucid.co.il Sagi

    Thanks, was looking for that technique. Very nice.

  • http://mrfloris.com Floris Fiedeldij Dop

    Great post, but a bit of a shame that a professional technique to improve / tweak the cut shadow with a mask blur is missing. It’s now not possible to afterwards change the size, or have the sharp edges that’s cut to slowly fade into a transparent background. Maybe a version 2 of this post could be made showing that technique off, including support for various background colors.

  • http://erikreagan.com Erik Reagan

    Very well put together tutorial. It’s amazing how some effects like this can be so simple to create, you just have to know how to do it. Now I do thanks to you. Thanks Lee

  • http://blog.vandenoostende.com Gilles Vandenoostende

    Good tip! Also, try right clicking the drop shadow in your layers palette & selecting “create layer” – that way you don’t have to convert & rasterize your entire object ;)

  • http://www.BrettMcdade.com BMcDade

    Nice tut! Will use this technique sometime soon.

  • http://www.base30.co.uk Nicola

    nice simple technique!

  • http://www.metacomdesign.com/blog Metacom Creative

    Fast, simple, effective. Nice tutorial. Thank you

  • http://relevantdevelopment.co.uk Ash

    This is a great effect, thanks.

    I’ve just had a look at your website Lee, and for someone whose focus is on “creating unique and powerfull brand identities on print and online.”, I don’t think your choice of logo is a particularly smart one.

    Are Lee Jeans aware of the fact that you’ve almost directly lifted their logo?

  • Joe

    I like this.. I’ve been doing something similar using gausian blur and black shapes underneath object.

    33dpi for print? You mean 300 right?

  • http://www.pontbren.com Andy

    Good tutorial – that “hover” effect always made me feel uncomfortable. Does anyone know how (if) this can be done in Fireworks?

  • Chris

    I’ve always wanted to know how to create that type of drop shadow so thanks for the great tutorial! If you get around to it, I’d love to see a tutorial on the type of shadow that makes something look as though it is peeling up from the page.

  • http://www.thatdeadpixel.com Mike

    Simple yet extremely effective tutorial! I like the harder edge of the drop shadow as it gets closer to the paper.

  • http://www.jamigibbs.com jami

    Great little tutorial to do while sipping coffee this morning. Thanks!

  • http://beckleyworks.com Beckley

    Nice. I have an immediate use for that. Heading to work right now to implement it. Thank you.

  • http://www.flickr.com/seventhstr1ng Nate G

    Cool article – generic drop shadows are hideous. An easier way to do this would be to create the drop shadow, Right click on the effect in the layers palette and choose “create layer”. The shadow is now separate from the shape. The use the transform>Warp tool to just pinch the middles in, or adjust it however you like. Warp both the paper and the shadow to match if you’d like.

  • Chris

    Nice Tip, ill definately use that

  • http://web-patterns.net Samoo

    Really nice tip. Gonna RT immediately! :)

  • http://www.mockup2psd.com Daniel

    Wow! love this tutorial – I’ve been erasing with the eraser tool and it never turns out this clean. Excellent article.

  • http://www.mainstreetfaces.com Aimeé

    You can also create a layer from the drop shadow and then free transform it. I love the way there are so many ways to achieve an effect!

  • http://www.kimguanzon.com Kim Guanzon

    Ditto what Nate G said… been using the same technique for years.

  • http://ajcates.com ajcates

    Thanks… but no thanks. I’ll stick with css3 for my drop shadows.

  • http://www.blog.joshmedranodesign.com josh

    this is a great technique!

  • http://magentoua.wordpress.com/ Magentoua

    Awesome tutorial. Thanks a lot!

  • Eric Peacock

    Nice way to go though I’d agree with the other commenters who mention that you should demo this using non-destructive Photoshop features.

    If you can’t edit this easily it’s not all that useful.

  • http://carmasnack.com/ Carmen

    It’s so much easier when someone can show you a Photoshop walk through… definitely will RT

  • http://www.blog.simoncrinks.com Mr. Crinks

    Interesting.. although as has been said, I’m not sure the sharp edges to the resulting shadows work.
    I achieve a similar effect by choosing ‘create layer from effect’ then using the warp tool to drag out the corners of the resulting shadow layer, and pushing the sides in.

  • http://www.amdzines.com/ Abhilash Mukundan

    I’ve been using the step told by mr. crinks for a long time now. Although this one saves a lot of time, The corner areas are not looking that good.
    I guess duplicating the layer, then zeroing the fill and blurring a bit will help.

  • Pingback: Mes favoris du 4-12-09 au 7-12-09

  • Pingback: dot Blog. The week in links 07/12/09

  • Pingback: Weekly Digest for December 7th |

  • http://anone.studiogbkk.com/ Anone Saetaeo

    Nice and Simply, thank!

  • http://www.chotrul.com/ Chotrul Web Design

    Yeah, I’d certainly agree about the mask on the blur, etc, so that the shadow can be modified afterwards.

    Nevertheless, nice tutorial, thanks for sharing.

  • http://www.crearedesign.co.uk Mike

    Simple and effective, I like the way this works and I like that fact that its very straight forward.

  • http://www.carousel30.com washington dc web designer

    Thanks for the simple and straightforward tutorial – I’ve done something similar to that before, but you’ve explained in a way that made it much simpler than the convoluted way I ended up at it :) Thanks!

  • http://www.isquaretechnologies.com A Web Design Company

    This is really a very good article. Very useful and effective. Nice shadow..

  • hans

    good, but i prever

    > making a slection of the paper
    > new layer under the paper
    > fill it black
    > expand the edges with free transform
    > blur it a little
    > hit “4”

    think it’s little faster.

  • http://pstutorial.ru pstutorial

    tnx for simply tip!

  • http://www.glendelmdesign.co.uk/ Web Design Cambridgeshire

    This is a fantastic tutorial. Standard drop shadows can get very boring, so it’s always nice to see new methods of spicing them up! Thanks.

  • Lee Mason

    Floris Fiedeldij Dop

    In this tutorial the shadow is transparent and can overlay any background image of your choosing.

    No, you can not change the size of the image after rasterizing it, why would you want to?
    It takes 2 mins to mock another one up slightly larger/ smaller.

    To all:

    I MEANT 300DPI !!!!!!!!!!!! AAAARRRRGGGGHHHH,
    IM CRAP

  • http://vsego.wordpress.com Raptor

    Great little tutorial! Thanks

  • annie

    Anyone got a tutorial for creating a shadow in the gutter of a spread, like it would appear in a book or magazine?

  • http://www.koneworks.com kone

    Thanks for sharing this one, saved my day. I have been looking for an answer how to achieve this particular drop shadow effect. Well, it wasn´t that hard :)

    Thanks a lot!

  • Mike

    I’d also add that you can right click on the layer style, select “create layer” and transform the shadow itself into a layer. This will let you feather/delete the shadow like you did above but also keep the top layer in tact (and allow you to blur the shadow, warp, etc.)

  • http://www.17ps8.com peter

    easy and effective

  • Pingback: Workshop – Polaroid frame effect with advanced drop shadow | Yi Cao on HCI

  • Pingback: Design Workshop – Polaroid frame effect with advanced drop shadow | Yi Cao on HCI

  • http://www.brettwidmann.com Brett Widmann

    This is a really great tutorial. Thanks for sharing!

  • http://www.pattayabeachvillas.com Pattaya Villas for Rent

    This is easy more than what I was doing. :) Thanks for great tutorial.

  • http://www.acuariopro.com Rai

    Excellent ! and easy.

    Thanks for sharing!

  • Tom

    Brilliant tutorial… takes a bit of practice to get it looking natural but a great way of creating this effect.

  • http://www.thesagestrawberry.com Heidi

    Lifesaver! Thanks :)

  • Pingback: Weekly Round-up Feb 18th | Stuff 4 Designers

  • fizz

    Glad I found this, amazing how something so simple looking can escape you when you want to apply the idea! Nicely done.

  • http://www.facebook.com/plainbellysneetch Amanda Woods

    I’m a newbie at web design and I’ve been seeing this effect on many beautiful websites and have been wanting to learn how to do it myself. This tutorial was perfect… the step by step instructions helped me a great deal. Thank you so much!

  • softnook

    Thanks! It was great!

  • http://inkbotdesign.com Stuart L. Crawford

    Simple and effective – thanks