Unreal Media

In this tutorial I’m going to show you how to make reflections using the GD just like the image below.

So here is a walk-through of the code…

The first bit is defining the image you want to reflect…

$im = 'yourimage.gif';

The second bit gets the size of the inputted image to make sure it is reflected correctly.

$size = getimagesize($im);

This part is the reflection height. In the script it is set to 50 pixels which I think is a good ammount, however this can be adjusted to what you want.

$rH = 50;

The next bit is the starting transparency. Sort of speaks for its self.

$tr = 30;

There is also an option to have a divider line. I havent got it however if you feel you need to you can adjust it, this is also in pixels.

$div = 0;

The next bit is just the height and width. This can be ignored, you dont need to change this other wise the reflection will be wrong.

$w = $size[0];

$h = $size[1];

This bit essentially makes the canvas that the reflected image will go on. This is quite important because in the reflection there is transparency so we need to adjust the background image according to the background of the webpage.

Where is says //background colour obviously change it to the background colour of your web page.

$im = imagecreatefromgif($im);

$li = imagecreatetruecolor($w, 1);

$bgc = imagecolorallocate($li, 255, 255, 255); // Background colour

imagefilledrectangle($li, 0, 0, $w, 1, $bgc);

$bg = imagecreatetruecolor($w, $rH);

$wh = imagecolorallocate($im,255,255,255);

This bit of code flips the image upside down. This is basically the first part of the reflection process.

$im = imagerotate($im, -180, $wh);

This next bit is quite complicated and there is nothing you will need to adjust here. What it basically does it puts everything together. (the image, background colours, ect…)

imagecopyresampled($bg, $im, 0, 0, 0, 0, $w, $h, $w, $h);

$im = $bg;

$bg = imagecreatetruecolor($w, $rH);

for ($x = 0; $x < $w; $x++) {

imagecopy($bg, $im, $x, 0, $w-$x, 0, 1, $rH);

}

$im = $bg;

$in = 100/$rH;

for($i=0; $i<=$rH; $i++){

if($tr>100) $tr = 100;

imagecopymerge($im, $li, 0, $i, 0, 0, $w, 1, $tr);

$tr+=$in;

}

imagecopymerge($im, $li, 0, 0, 0, 0, $w, $div, 100); // Divider

Now we need to create the image. The code below will do this…

header('content-type: image/gif');

imagegif($im, '', 100);

Now once the image has been created we need to delete it to stop server lag.

imagedestroy($im);

imagedestroy($li);

Full Source Code

$im = 'php.gif'; // The input image

$size = getimagesize($im);

$rH = 50; // Reflection height

$tr = 30; // Starting transparency

$div = 0; // Size of the divider line

$w = $size[0];

$h = $size[1];

$im = imagecreatefromgif($im);

$li = imagecreatetruecolor($w, 1);

$bgc = imagecolorallocate($li, 255, 255, 255); // Background color

imagefilledrectangle($li, 0, 0, $w, 1, $bgc);

$bg = imagecreatetruecolor($w, $rH);

$wh = imagecolorallocate($im,255,255,255);

$im = imagerotate($im, -180, $wh);

imagecopyresampled($bg, $im, 0, 0, 0, 0, $w, $h, $w, $h);

$im = $bg;

$bg = imagecreatetruecolor($w, $rH);

for ($x = 0; $x < $w; $x++) {

imagecopy($bg, $im, $x, 0, $w-$x, 0, 1, $rH);

}

$im = $bg;

$in = 100/$rH;

for($i=0; $i<=$rH; $i++){

if($tr>100) $tr = 100;

imagecopymerge($im, $li, 0, $i, 0, 0, $w, 1, $tr);

$tr+=$in;

}

imagecopymerge($im, $li, 0, 0, 0, 0, $w, $div, 100); // Divider

header(’content-type: image/gif’);

imagegif($im, ”, 100);

imagedestroy($im);

imagedestroy($li);

?>