Syndicate

Feed

DIY Advanced Paper Shadow in Photoshop

I have an idea for a tutorial.

The following Photoshop tutorial shows how to apply realistic drop shadows to photos. Once satisfied with your result, you can slice your image up and, using CSS rules, apply creative shadows, hence 3d effect, to any image, Drupal block, Drupal box, etc. Similar tutorials are all over the web — well, not exactly, but there are many. However, I had difficulty understanding the best of them. I clarified the whole process for myself, and have decided to dump it here. Lovely photo. Attached is my Photoshop CS2 file.

Here is my tutorial, scanned from an Hilroy loose-leaf.

Full tutorial.

Just kidding! Although this image sums it up really well, you may not be able to read it. You'll end up with four layers (as shown on the scan), with 'effects' applied to the two top layers.

Let's go through the process step by step.

  1. Create a new document in Photoshop. Any 'ol version of Photoshop will do. You'll either create your new document as transparent or pre-fill it with some color. Does not matter. However, you might want to create it right off in larger proportions than your photo's. To give you some room. Of course, you can fix it all later using Image → Canvas Size (ALT-CTRL-C in Windows). Me, I created a 800 by 600 pixels document with 72 ppi, pre-filled with white.

    Your bottom layer.

  2. Go head and open your photo in Photoshop. Then place your photo in your Untitled document. Know how? Select the layer where your photo is — that layer is probably locked, that's fine, then drag it and drop it onto the window of your Untitled document. This will effectively add a new layer to your Untitled document, on which your photo will reside. Now I realize, doin' it on my end, that my photo is not in 72 ppi, so it is way too big. So I delete my new layer, and resize my photo first (in its own document) using Image → Image Size (ALT-CTRL-I in Windows) and setting the Resolution to 72 ppi. Then I reselect the layer and drag & drop it onto my other document. Done.

    Your layer 2 has been added.

    I now have 2 layers. I rename my bottom layer to 'background' and my top layer to 'photo'.

    Your layers panel.

  3. Now comes the fun part, in which we'll create the shadow. This shadow will reside on its own layer, and we will *not* use any effect to create it. Go ahead and create a new layer (SHIFT-CTRL-N in Windows), and name that layer 'shadow'.

    Here is our next goal: create a selection that we will fill with black-ness, and we'll start by shaping this selection after our photo's outline. So, go and select the 'photo' layer. Then, go to Select → Load Selection. In the 'Load Selection' dialog that'll pop up, select 'photo Transparency' as 'Channel'. Click OK. You now have a blinking selection surrounding your photo.

    The next goal is to create a path out of this selection. We want to change the shape of our selection. Once we're happy with the shape, we'll turn in into a selection again and fill it with black-ness. So, how do we do it? Press 'M' to use the Marquee tool. Place your cursor over your image, right click, and from the context menu select 'Make Work Path...' (with Tolerance set to 2.0 pixels). You've now created a path out of your selection.

    Tools used to play with the shadow path

    To distort the path, we'll use these tools: the Direct Selection Tool and the Convert Point Tool. Press 'A' to grab the Direct Selection Tool. Select the top left point of your path. You might have to click twice. You'll know that your point is selected when its little square has turned gray — as opposed to the other 3 points along the path. Move that point away from the photo. Use the Convert Point Tool (from your Tools box, just below) to change that 90-degrees corner to one with handlebars. Play with the handlebars using the Direct Selection Tool. To break the connection between the 2 handlebars of a point, you have to select one of the 2 handlebars with the Convert Point Tool. (And there is another way to achieve this, but I forget...) Repeat the procedure for the other 3 points. At the end, you'll end up with something like this:

    Your path.

    Notice on the last screen capture that the bottom left point is selected: it is gray.

    Important: make sure that there is 1 or many sides to your photo where the shadow is hidden, not showing *at all*. Why? Because if you don't do that — and there is a shadow showing all around your image — your photo will look as if it is floating on the page. That ain't too realistic.

    Now we will turn this path into a selection again. Access the 'Paths' panel, and click on the selection icon, shown here:

    Your path.

    We will now fill our selection with black-ness. Make sure that your 'shadow' layer is selected. Then go to Edit → Fill. Select 'Black' from the drop-down. Then deselect all (CTRL-D). Set the Opacity of your 'shadow' layer to ~50%, right now or later. Then, apply a Gaussian blur to your layer. Make sure that when you apply this filter your shadow is no longer selected, because if it's still selected your filter will only apply to your selection, and we want to apply the 'blur' to the entire layer. You'll end up with a layer that looks like this, when others layers are hidden from view:

    Your shadow after a gaussian blur has been applied.

    We now have 3 layers. Reorder your layers so that the shadow is under the photo.

    Your layers panel.

  4. We will now create our white border. This part is easy. Create a new layer (SHIFT-CTRL-N in Windows), and name that layer 'outline'. We need to create a selection based on the photo outline. We did this before in step 2, but we hadn't saved our selection. Go ahead and select the 'photo' layer. Then, go to Select → Load Selection. In the 'Load Selection' dialog that'll pop up, select 'photo Transparency' as 'Channel'. Click OK. You now have a blinking selection surrounding your photo. Press 'M' to revert to the Marquee tool. Then press the ALT key. Do not move your finger from that key. Placing your cursor above your current selection, you'll see that your cursor has turned into a plus sign with a smaller minus sign next to it. What that means? It means we'll subtract from our current selection. Draw a rectangle selection within your current selection. You're creating a selection in the shape of a border. In the process of creating your border, you'll hide part of your photo, you will effectively crop it. (I wish I'd told you this before, please do not slap me.) Once done, select your 'outline' layer, then go to Edit → Fill, and select White as your fill. Then deselect all (CTRL-D). You have a white outline, border, whatever, on your 'outline' layer.

    Your white border.

    We now have 4 layers, like so:

    Your layers panel.

Time to add 2 Photoshop effects

  1. We'll apply a gray-to-white gradient on the white border. Right-click on the 'outline' layer, in your Layers palette, and choose 'Blending Options...' from the context menu. Check 'Gradient Overlay' in the list on the left in the dialog box. Double-click on 'Gradient Overlay' to access the gradient properties. Make sure you play with the Angle. Look at the preview. Decide for yourself where the Light is coming from.

    The gradient overlay properties

  2. A final touch will consist in applying some light effect on the photo itself. This step is useless if you slice up the resulting image for use in CSS-styling. Right-click on the 'photo' layer, in your Layers palette, and choose 'Blending Options...' from the context menu. Check 'Inner Shadow' in the list on the left in the dialog box. Double-click on 'Inner Shadow' to access the shadow properties. Make sure you play with the Angle here as well. Look at the preview. Decide for yourself where the Light is falling.

    The inner shadow properties

Time to slice up the image for CSS-styling

And time to have supper.

AttachmentSizeHitsLast download
advancedShadow.psd1.39 MB485 years 23 weeks ago
Last edited by Caroline Schnapp about 4 years ago.

One file is attached to this posting. Login or register to download this file.


Comments

Thanks for the tutorial

I was googling around for tips on how to do these types of shadow effects, and was fortunate enough to stumble upon you very useful blog. I feel a little less stupid using PS thanks to you. :)

Regards,

Ed.

I am so glad :-)

It took me a little practise to get good results with that technique. Hopefully, the attached file will be a good starting point for most people — it's the project file used to create the effect shown in this very post (ie: photo with the kid).

Thank you for dropping me a note like this. :-)

Positive site, where did u

Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include.
list of ipod Touch apps

Nice site and the article

Nice site and the article are posting are very nice. There is obviously a lot to know about this. I think you made some good points in Features also ffxibank.com

This posting is great and

This posting is great and what an excellent study which you did. It's helped me a great deal. Thanks very much. Feel free to see my purchase profile light site..
the greywood

thanks for posting

i have been learning photoshop for 2 months and this post save me time !

Hi there, I found your blog

Hi there, I found your blog via Google while searching for such kinda informative post and your post looks very interesting for me.
Amsterdam Jobs

Oh Great !

oh great info, so many people do photoshop and this article help me much !

Thanks !

Thanks !
There are many people who can get a lot of knowledge and skills of reading on a blog or other people's websites on the internet today. We were able to get a lot of useful tutorials.

Thanks for your post

Yes, over the course of training and practice gradually we will have to solve the problem better.

thanks

I'm using Photoshop cs5

Great help !

i thank you so much ! i have been learning photoshop !

Test complete with 151

Test complete with 151 respondents! Results up on the blog... I think many would find the results surprising.
luis ortiz

great article. There are

great article. There are many people who can get a lot of knowledge and skills of reading on a blog or other people's websites on the internet today. We were able to get a lot of useful tutorials.

Your work is very good and I

Your work is very good and I appreciate you and hopping for some more informative posts. Thank you for sharing great information to us.
CupInfo

Useful Tutorial 4 Everyone and Me

Hi post master,

This is really very useful tutorial, actually I was looking to learn this kind of effect in photoshop and this tutorial is really very helpful for me. Now I can apply the effect on my image very easily. Thanks

Wow! that was was fantastic.

Wow! that was fantastic. I learned a very useful lesson in ps. I did not know that I could do it so easily. I want to also mention to you that I had started in photography during my student days with a black and white 120 format camera. Maybe, you might see these cameras in some museum. I did a lot of work in 35 mm format. Those were exciting days, when we had to first complete the entire roll of film, wait for the film to be processed and a lot of suspense was involved in it. Thanks to PS and digital photography, life is much more simpler and easier.

I just got to this amazing

I just got to this amazing site not long ago. I was actually captured with the piece of resources you have got here. Big thumbs up for making such wonderful blog page
seoprofessionals.snappages.com/

Thanks given where thanks due..

This tutorial is great, everything else I found until now messed with either old Bill Occam's razor (basically, simple is best) or the miniskirt rule (keep things long enough to cover the essentials, but short enough to keep folks interested).
Brava Caroline! And thank you...

Awesome

This is a really great post I found some really good information here I've got lots of followers on twitter and I will tell all of them about this as I really think it's great information that more people should see keep up the good work be back again soon.

Your website is really cool

Your website is really cool and this is a great inspiring article.
Galoor

be great !

thanks ! this article help me a lot !

Very helpfull article, even works in The GIMP.

Just the article that I was looking for. Thanks very much. I haven't got Photoshop on my laptop as I run Linux so just applied the instructions and general process to the software that I do use ( The GNU Image Manipulation Program ) and the results are just as fantastic. So I'm very happy!

Cheers.

So it works in Ubuntu

I am glad you could follow along well... in the GIMP! If I'd do it all over again, I would add more screen captures to this tutorial.

To use adobe photoshop seems

To use adobe photoshop seems not difficult and can be done by anyone. I think that adobe has many attractive features for editing photos and is easy to operate so that the application is widely used by professional photographers or layman like me. recuperar hd

hi to all.

sell my rolex A Completely different browser to check out Things! Also, I put a link to your blog at my site, hope you do not mind.

hi to all.

sell my rolex A Completely different browser to check out Things! Also, I put a link to your blog at my site, hope you do not mind.

hi to all.

A Completely different browser to check out Things! Also, I put a link to your blog at my site, hope you do not mind.

This is the good news.The

This is the good news.The information you provide is very useful for me.Thank you for sharing it.I will come to see if you have new post every day. cleaning service Chicago

Excellent! I like it!

Excellent! I like it!

How did you slice for CSS

Am I getting something wrong here ??? How did you slice for CSS ?

Slice Tool.

How did you slice for CSS ?

Using Shopify's slice tool.

hi

30,000 school buildings are in dangerous condition, posting a threat to the well being of children. Whereas 21,000 schools have no building whatsoever.

I am definitely enjoying

I am definitely enjoying your website. You definitely have some great insight and great stories.
Prayer Is The Answer

thx for your tutorial.. this

thx for your tutorial..
this is what i wanna learn..finally i can make it..
altho it's not so good yet..ill keep practiced it..haha
thx anyway :D

Nice

Good work, I use a similar method for shading comics. -Slumberg

I like all your post. I will

I like all your post. I will keep visiting this blog very often. It is good to see you verbalize from the heart and your clarity on this important subject can be easily observed.

There are many people who

There are many people who can get a lot of knowledge and skills of reading on a blog or other people's websites on the internet today. We were able to get a lot of useful tutorials.

Very good work

Thank you for this great tutorial, indeed is very helpful... I created a very elegant shadow for my web site based on your tutorial... Thanks again.

Great Post

Great Post. Ive been looking for this tutorial for about 4 days now. I just asked another web designer friend of mine if they knew how to do the tutorial. And ironically i find here today.

Thanks so much man. I didnt know there were so many layers involved in this one effect.

Awesome topic

I had the full version of Photoshop loaded on my last PC and it was thoroughly wasted on me. The majority of the features were unnecessary for photo adjustments and it took ages to open and close the program. I also did not like having a separate program running as a file browser. This made it slower and more cumbersome still.

Thanks for the DIY technique

I have been using Photoshop for a while to create banners for my online store. When I found this information on how to shadow an image in this way I was very excited to try it. So I went ahead and step by step following you instructions. Guess what it worked! and it looks great. I can't thank you enough.

Thanks for share!

Thanks for taking the time to explain how to do it!

Great Tut

Great tutorial! And it is also nice to know I m not the only one with a less than legible handwriting. It looks strangely similar to mine.:)

Pretty

The little girl in the photo above is so pretty.

Faultless

Thank you so much, i found it difficult to find a good tut on this type of skill, but yours is really good,

thanks for showing me

will

cool tut

pretty neat and quick, love the way shadow casts on the corners.

This is really well done

This is really well done tutorial and very nice effect to especially to black/white images like the one in example. I hope you have time to write more photoshop tutorials sometime in the future. It took me some time to do it in the first place but now I have a template that I can use later on other photos.

Just the article that I was

Just the article that I was looking for. Thanks very much. I haven't got Photoshop on my laptop as I run Linux so just applied the instructions and general process to the software that I do use ( The GNU Image Manipulation Program ) and the results are just as fantastic. So I'm very happy!

Excellent Tips

Thanks very much for sharing these excellent photoshop tips!

Excellent tutorial

Absolutely brilliant photoshop tutorial. Best of all is that it is si,ple to follow through the steps without you missing out anything.

I am quite familiar with

I am quite familiar with Adobe Photoshop, I often use this application for editing photos that I have. Although the results were not as good as the famous photographer, but I am quite satisfied with the goal should edit my own photos.

Edit photos using Adobe

Edit photos using Adobe Photoshop is an activity that I normally do because I am a photographer. In my opinion, to experiment with using this program is quite interesting and fun and can also result in quite satisfactory.

I found this much

I found this much informative, as to what I was exactly searching for. Thanks for such post and keep it up.

Edit photos by using Adobe

Edit photos by using Adobe Photoshop is quite interesting to do. Although I have not mastered the theory of this application, but I could use a self-taught.

Greatly appreciated!

I have heard great that awesome things you have in your weblog. Is there anyway I can transfer all my word-press content into it. Any help would be greatly appreciated!
Himachal Honeymoon Packages | Himachal Honeymoon Tour Package

good twist on things

It gives a nice individual twist on things. I guess having something useful or substantial to say is the most important factor.

I do have a basic

I do have a basic understanding of what most consulting work is--a consultant is brought in for a fixed period of time to perform a specific task that only needs to be performed once or only within a certain time frame.

Lots of steps you can take

Lots of steps you can take when using a neighborhood. An excellent neighborhood can be a neighborhood that will provide a lot ideas as well as distinctive tips to its people. check it out

I've found that people are

I've found that people are not interested in a huge vocabulary or impressive graphics on a website. Keep it short, sweet and to the point.

Randeep Grewal

Adobe Photoshop is a pretty good application for editing photos that I have. In my opinion, with this application I can express to the photos that I have.

The following Photoshop

The following Photoshop tutorial shows how to apply realistic drop shadows to photos. Once satisfied with your result, you can slice your image up and, using CSS rules, apply creative shadows, hence 3d effect, to any image, Drupal block, Drupal box, etc.
beauty schools

There are a lot of people

There are a lot of people are confused about how to use a software application or when first using it. It has become a natural thing, since you can not learn all at once. Dallas IT Support

There are many tutorials

There are many tutorials that can be easily viewed and obtained at this time. we really should be a lot of reading in order to gain insight and be able to easily solve all the problems. Fishing Lodges Alaska

If you are applying for

If you are applying for upper level position, don't overstate your previous accomplishments too much. Instead, state what you feel you will be able to bring to the table that will bring positive results.

Using Adobe Photoshop is not

Using Adobe Photoshop is not a difficult thing to do. Many guidelines can be found through the internet or books. In my opinion, this application is quite good because it can make a photo look more perfect.

A useful information it will

A useful information it will certainly provide many benefits for many people to know many things after reading it. We are able to easily find a lot of things. juicing benefits

Internet Technology contains

Internet Technology contains articles that explain how different aspects of the Internet function. Learn about the Internet on our Internet Technology Channel. thanks for sharing the informative post.
Regards,
Robert - personalized necklaces

Use adobe photoshop to edit

Use adobe photoshop to edit photos is something I often do. In my opinion, this application is quite easy to operate and also provide satisfactory results.

We really should learn a lot

We really should learn a lot of good things because there are many people who do use a lot of interesting things to learn through the internet and websites. drainage solutions

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <css> <html> <javascript> <mysql> <php> <span> <a> <b> <i> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <sup> <sub> <dd> <del> <blockquote> <img> <q> <p> <div>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <css>, <html>, <javascript>, <mysql>, <php>, <rails>, <ruby>.

More information about formatting options

CAPTCHA
I have to wonder if you're a human spammer or a machine, or less likely someone who cares to leave his or her thoughts behind.