Here is a simple example of creating a reflection of an image. The reflection is created by flipping the image and overlaying a gradient on it. Then both, the original image and the reflection is overlayed on a canvas.
This example is created for Imagick 2.1.x but with a little tuning it should work with earlier versions.
- <?php
- /* Read the image */
- $im = new Imagick( "strawberry.png" );
- /* Thumbnail the image */
- $im->thumbnailImage( 200, null );
- /* Create a border for the image */
- $im->borderImage( "white", 5, 5 );
- /* Clone the image and flip it */
- $reflection = $im->clone();
- $reflection->flipImage();
- /* Create gradient. It will be overlayd on the reflection */
- $gradient = new Imagick();
- /* Gradient needs to be large enough for the image
- and the borders */
- $gradient->newPseudoImage( $reflection->getImageWidth() + 10,
- $reflection->getImageHeight() + 10,
- "gradient:transparent-black"
- );
- /* Composite the gradient on the reflection */
- $reflection->compositeImage( $gradient, imagick::COMPOSITE_OVER, 0, 0 );
- /* Add some opacity */
- $reflection->setImageOpacity( 0.3 );
- /* Create empty canvas */
- $canvas = new Imagick();
- /* Canvas needs to be large enough to hold the both images */
- $width = $im->getImageWidth() + 40;
- $height = ( $im->getImageHeight() * 2 ) + 30;
- $canvas->newImage( $width, $height, "black", "png" );
- /* Composite the original image and the reflection on the canvas */
- $canvas->compositeImage( $im, imagick::COMPOSITE_OVER, 20, 10 );
- $canvas->compositeImage( $reflection, imagick::COMPOSITE_OVER,
- 20, $im->getImageHeight() + 10 );
- /* Output the image*/
- header( "Content-Type: image/png" );
- echo $canvas;
- ?>
The source image:

And the result:

P.S. Please send me some new images which I can use in these examples
#1 by Peter Schumacher on November 20, 2007 - 1:44 am
Quote
Here’s a version that works with 2.0.1
thumbnailImage( 200, null );
/* Create a border for the image */
$im->borderImage( new ImagickPixel('white'), 5, 5 );
/* Clone the image and flip it */
$reflection = $im->clone();
$reflection->flipImage();
/* Create gradient. It will be overlayd on the reflection */
$gradient = new Imagick();
/* Gradient needs to be large enough for the image
and the borders */
$gradient->newPseudoImage( $reflection->getImageWidth() + 10,
$reflection->getImageHeight() + 10,
"gradient:transparent-black"
);
/* Composite the gradient on the reflection */
$reflection->compositeImage( $gradient, imagick::COMPOSITE_OVER, 0, 0 );
/* Add some opacity */
$reflection->setImageOpacity( 0.3 );
/* Create empty canvas */
$canvas = new Imagick();
/* Canvas needs to be large enough to hold the both images */
$width = $im->getImageWidth() + 40;
$height = ( $im->getImageHeight() * 2 ) + 30;
$canvas->newImage( $width, $height, new ImagickPixel('black'));
$canvas->setImageFormat('png');
/* Composite the original image and the reflection on the canvas */
$canvas->compositeImage( $im, imagick::COMPOSITE_OVER, 20, 10 );
$canvas->compositeImage( $reflection, imagick::COMPOSITE_OVER, 20, $im->getImageHeight() + 10 );
/* Output the image*/
header( "Content-Type: image/png" );
echo $canvas;
?>
#2 by Peter Schumacher on November 20, 2007 - 1:45 am
Quote
Oh no…
WordPress ate the first line…
Here it is..
/* Read the image */
$im = new Imagick( “strawberry.png” );
#3 by kakapo on November 20, 2007 - 5:21 am
Quote
Thanks! I really don’t know how to use newPseudoImage until you give the example. I used my function instead of newPseudoImage before. Here is my function to create a gradient image;
/**
* create a gradient image
* @param integer $height
* @param float $start
* @param float $end
* @param float $percent
* @return void
*/
function createShadeImage($height,$start,$end,$percent=1){
$im = new Imagick();
$im ->newImage(10,$height,”white”,”png”);
$im ->setImageMatte( true );
$it = $im->getPixelIterator();
$i=$start;
$middle = intval($height*$percent);
$interal = ($end-$start)/$height*$percent;
foreach( $it as $row => $pixels )
{
foreach ( $pixels as $column => $pixel )
{
$pixel->setColorValue(imagick::COLOR_OPACITY ,$i);
}
if($row>=$middle){
$i=$i+$interal;
}else{
$i=$i+($end-$start)/$height;
}
$it->syncIterator();
}
// header( “Content-Type: image/png” );
// echo $im;
return $im;
}
Pingback: » Blog Archive » Création d'une réflexion - Mikko Koppanen
#4 by kakapo on November 20, 2007 - 12:24 pm
Quote
Mikko, look at the image http://photo1.yupoo.com/20070206/230133_1800749220_yyekpdso.jpg.
Can you show me how to make a button like this, althouth it is created by photoshop, and the steps is here:
http://photo1.yupoo.com/20070206/225622_661526768_abokctwh.jpg
Trackback: PHPDeveloper.org
Pingback: developercast.com » Mikko Koppanen’s Blog: Creating a reflection
#5 by timäääääää on November 20, 2007 - 10:23 pm
Quote
kakapo, that picture does not exist on that server
#6 by kakapo on November 21, 2007 - 4:33 am
Quote
this one:
http://photo1.yupoo.com/20070206/230133_1800749220_yyekpdso.jpg
#7 by Mikko Koppanen on November 21, 2007 - 9:21 am
Quote
kakapo,
I can give it a shot. I’ll try to create a few button tutorials!
Pingback: Creating an image reflection | MT-Soft Website Development
#8 by Azure on November 23, 2007 - 3:08 am
Quote
I’m not very familiar with PHP’s Imagick library, would you please do a example with Imagick’s text manipulating methods?
Pingback: reflexion d’image
#9 by open source cms on November 29, 2007 - 11:03 pm
Quote
Library looks fine
#10 by Kevin van Zonneveld on December 7, 2007 - 2:21 am
Quote
This article again goes to show what an amazing blog you have with all just great quality articles. But this reflection post would have to be my favorite up until now.
So little code yet the result it so pleasing for the eye. Credits to Imagick as well of course.
Keep up the good work Mikko!
#11 by Adaptiv Media on February 14, 2008 - 2:08 pm
Quote
Great blog post. I’ve seen this effect on a few web design/development company website portfolios and always had assumed that because they design websites they probably manually created the reflection effect in photoshop or something. After considering that the web development team could probably give the designers a feature like this it would probaby be used and is the most likely method. This posting has just proved it to me. Good work here! Keep it up.
#12 by Felix on August 18, 2008 - 11:11 pm
Quote
Hi, about example pics, you can use pics from Wikimedia Commons site: http://commons.wikimedia.org/wiki/Main_Page
#13 by rejik on November 3, 2008 - 12:05 am
Quote
very nice
#14 by schnueptus on December 9, 2008 - 4:00 pm
Quote
i just improve this by adding real transparency
http://magdeburg.unihelp.de/blog/user/schnueptus/archives/162
#15 by Erika on January 20, 2010 - 3:39 pm
Quote
Hey! Thanks for your articles with Imagemagick, they really helped me. Still Its hard to find working examples in internet, and the documentation on php.net is very poor.
thanks
You saved my day!
#16 by Simon on June 7, 2010 - 6:02 pm
Quote
Great article, thanks! One question: I have a alphatransparent (24bit) png in the start and want to create the reflection while maintaining the alphatransparency in the reflection. How can I achieve that?
#17 by Cosmin Dorobantu on November 26, 2010 - 12:21 pm
Quote
Thank you for this article, it helped me a lot!
Keep up the good work.
#18 by maggie on April 28, 2011 - 1:13 pm
Quote
Hi there! I’m reviving this blog. I love the effect of creating the reflection. It is really superb. The colors blend very well. The after-effect remains eye-catching.
http://www.tech1repairs.com.au