Drop Shadows

This tutorial will show you how to add a drop shadow to your images. I have chosen a small image for this tutorial for the sake of being able to show it in a smaller screenshot on this page, but this can be used on any sized image. While being a relatively simple effect, it is very useful.

Below is the image I started off with.

I will start off by adding a border. Rather than just using the pencil tool to draw a 1px border around the image, I find the following way better as it does not decrease your image size.

Firstly make your background color black by clicking on the second, lower square and sliding all the pointers to the far right, as shown below.

Click on Image -> Canvas Size

You will be brought up with a dialog box as shown below. Change the dropdown choice from 'cm' to 'pixels' and make each value in the left box 2px larger. So in my example the image size changed from 100 x 75 to 102 x 77. Also make sure the middle box in the section with the arrows is clicked, this will make the change happen in all directions.

Your new image should look something like this, with a 1px black border all around it..

Now we need to add a couple more layers, and rename our current layer. Firstly double click on the 'background' layer which should be your only layer at this point and rename it to what ever your want, I have named it 'thumb'. Next click on the New Layer icon, which is highlighted in the image below. Create two new layers, name one 'background' and name the other 'drop shadow.' You will also need to make the 'thumb' layer the top layer, so drag it to the top of the list.

Make your primary color white by clicking on the first square and sliding all the pointers to the far left, as shown below.

We will need some more room to work with, so go to Image -> Canvas Size as before and select 'percentage' from the drop down. Change the values to '150' making sure the middle box is selected in the section with the arrows. Don't worry, the background will not be black as we have no real background layer.

Now select the flood tool by clicking on the 'Paint Bucket Tool,' or more easily, by pushing the 'G' key on your keyboard. If you seem to have the Gradient tool selected instead, click and hold on the Gradient Tool icon and a little popup will come up, choose the 'Paint Bucket Tool' from that. Now click on the 'background' layer on the layer list, so it is selected and then click on an empty part of your image to fill the background white.

We need to make this into a 'real' background. So click Layers -> New -> Background From Layer.'

Now, holding down the Ctrl key, click on the 'thumb' layer on the list. This will select everything from both layers. Now, without holding anything down, select the 'drop shadow' layer but clicking once on it. With this layer active, click Select -> Modify -> Contract. Choose 1 as the value. br>

With your Primary colour still as White and your Background colour still as black (as defined earlier) click on Edit -> Fill. On the box that comes up, select 'Background Colour' from the dropdown. Under the second 'Mode' dropdown, keep 'Normal' selected, and leave the Opacity at 100%. After doing this click ok.

It will look like nothing has changed, but on the small preview on the layers list, you will see a block of black behind the picture on the 'thumb' layer. Now click Select -> Deselect so deselect all that you have selected right now. Check to make sure you still have the 'drop shadow' layer selected, then click on Filters -> Blur -> Gaussian Blur, and choose a value of '10.' After clicking ok, you will see the beginnings of our drop shadow we are creating.

Now, if you are unhappy with the drop shadow's position, now is your chance to move it. Select the 'Move' tool, or press the 'V' key. Click and hold the drop shadow and drag it to reposition it to your liking. Try edging it a little to the right, and a little bit downwards, so it looks like the one shown below.

Now this is the last stage of this tutorial. As you may notice, the image still has a white background, which on most webpages isn't the case. So we must match the background of this image with the background of your page. First select the 'background' layer. Then select the 'Flood' tool. Change your primary colour to match that of your site. For my example I will use one to match the [old] color of this site. Once you have chosen your color, click on the image with the Flood tool and the background will change colour.

That's it! Your drop shadow is now complete.