Drop Shadows with GD Library

Part One: Creating the Drop Shadow Images

Part 2: Slicing up the Drop Shadow Graphic

The next step is to cut that image up so that we can use it in GD library.

Go to window > Info (or hit F8) on your keyboard.
Make sure that the Slice Tool is selected by pressing K on your keyboard.

Hold down Shift and in your image, draw a square going from the top left-hand corner of the canvas, keep drawing until the width and height in the info palette reads .88 inches.

Right click this slice and click Edit Slice Options, name it shadow_TL.

Near the center on the left hand side of the canvas draw a slice from the left side of the canvas going to the left side of the square. Make sure that that slice is 1 pixel in height.

Right click this slice and click Edit Slice Options, name it shadow_L.

 
// ----------------------------------------
// 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);