Drop Shadows with GD Library

1. The graphic that you want to have the shadows go under.
2. The shadow images that you just created.
3. And a canvas to put the two together.

The canvas is the base for everything, the shadow graphics go on top of the canvas creating a kind of picture frame.
Then your image goes inside the shadow picture frame.

Ok, the idea seems simple enough. Time to get started.

The Code:

Open up your text editor and make a new file. Save it to the folder we called dropshadow and name it img.php.

Copy the following code into your file. For an explanation, please read the comments included.

// ----------------------------------------
// Image Storage
// ----------------------------------------

//STORING YOUR IMAGE

$graphic = "image.gif"; 						 //the path to your image
list($width, $height) = getImageSize($graphic);  //the width and height of your image

//storing the image into memory so that we can use it with GD Library
$image = imagecreatefromgif($graphic);

/*
Definition: imagecreatefromgif("folder/image.jpg");
This function creates a copy of an image and stores the image in a variable in php.
*/

//STORING THE DROP SHADOW IMAGES
//Below I'm storing all 8 shadow images into memory.

$tl = imagecreatefromgif("images/shadow_TL.gif");
$t  = imagecreatefromgif("images/shadow_T.gif");
$tr = imagecreatefromgif("images/shadow_TR.gif");
$r  = imagecreatefromgif("images/shadow_R.gif");
$br = imagecreatefromgif("images/shadow_BR.gif");
$b  = imagecreatefromgif("images/shadow_B.gif");
$bl = imagecreatefromgif("images/shadow_BL.gif");
$l  = imagecreatefromgif("images/shadow_L.gif");

//We now have stored all images that we are going to use.
//Next we have to create one more (the canvas) to put them together.

//CREATING THE CANVAS
/*
Remember, that the canvas has to be larger than the image, otherwise the image will hide the shadow images.
In this case the width of the canvas should be the width of the image plus twice the width of one of the side shadow image.

In other words: Width of Canvas = Width of Image + 2(Width of Side Image)

Read that again, it's easier than it sounds.
*/

//First we find the dimensions of the side images
$w = imagesx($l); 	//Width of the left shadow image
$h = imagesy($l);	//Height of the left shadow image

/*
Next we get our new heights and widths for the canvas. This creates an image that is slightly larger than
your image.
*/
$canvasHeight = $height + (2*$w);
$canvasWidth  = $width + (2*$w);

//Third we create a blank canvas with these new dimensions
$canvas = imagecreatetruecolor($canvasWidth, $canvasHeight);

// ----------------------------------------
// Putting your images together
// ----------------------------------------

/*
We have our graphic image, shadow images and canvas ready. Now it's time to paint!
In the first section we're adding the top, left, bottom and then right sections.
*/

imagecopyresized($canvas, $t,0,0,0,0,$canvasWidth,$w,$h,$w);
imagecopyresized($canvas, $l,0,0,0,0,$w,$canvasHeight,$w,$h);
imagecopyresized($canvas, $b,0,$canvasHeight-$w,0,0,$canvasWidth,$w,$h, $w);
imagecopyresized($canvas, $r,$canvasWidth-$w,0,0,0,$w,$canvasHeight,$w,$h);

//here I'm doing the same thing again, only this time I'm setting $w and $h to be the width and heights of the corners.
$w = imagesx($tl);
$h = imagesy($tl);
imagecopyresized($canvas, $tl,0,0,0,0,$w,$h,$w,$h);
imagecopyresized($canvas, $bl,0,$canvasHeight-$h,0,0,$w,$h,$w,$h);
imagecopyresized($canvas, $br,$canvasWidth-$w,$canvasHeight-$h,0,0,$w,$h,$w,$h);
imagecopyresized($canvas, $tr,$canvasWidth-$w,0,0,0,$w,$h,$w, $h);

/*
At this point the canvas has all the drop shadow images attached, all we need to do now is attach the image and we're done!
I changed $w back to the size of the perimeter in order to properly place the image.
*/
$w = imagesx($l);
imagecopyresampled($canvas, $image, $w,$w,0,0,  imagesx($image), imagesy($image), imagesx($image),imagesy($image));

//Notice that I used imagecopyresampled, the reason for this is I get a much higher quality image than with imagecopy
//resized. However, I sacrifice speed for this quality.

// ----------------------------------------
// OUTPUTTING THE IMAGE
// ----------------------------------------
header("content-type: image/gif"); 	//This sets the header type (what kind of file is this?) quite literally this php file turns into a gif.
ImageGif($canvas);
ImageDestroy($canvas);

A lot of the functionality of the code is explained in the comments but I’ll spare a few minutes and summarize what it does.

There are three parts to this code.

1. Image Storage and preparation
2. Image manipulation
3. Image Output (the easiest part)

Image Storage

We store the images so that we have access to them in the GD Library. What it is actually doing is creating a copy of the image and
storing them into memory.

In this instance we also create a blank canvas by using the function createimagetruecolor. It is like making a new canvas in photoshop. From here
the possibilities are almost limitless.

Image manipulation

Like photoshop, the power of manipulation is where the real strength lies. In this instance we are using the imagecopyresized function
to place the pictures onto each other (as illustrated in the picture above). The behavior is very similar to that of Photoshop. Click here for
more information about this powerful function.

Image Output

This is the most straightforward part of the script. We simply set what kind of file this, ouput the file and then destroy the file and free up resources.

Result:

And here is the final result of all our hard work!

Conclusion

I hope you found this tutorial useful. If you have any questions or suggestions please feel free to post in my comments.