Gradient reflection on a transparent background

[thica]

Hello,

I try to create a reflection of a picture on a transparent background, which fades out. All I found are examples of reflections on solid color backgrounds or on picture backgrounds. Tried now for hours by myself with no success. Does anybody has an idea how to do this like in this example (notice_ background is transparent)



Thanks in advance and greetings from Germany

[fmw42]

Mirror the image and crop to size of desired ramp, create gradient of height=ramp percent of image height, compose the ramp into the alpha channel of the mirrored image, then append the image, some transparent spacer and then the ramped mirrored image.

Start image:


infile="zelda3.png"
ramp=30
spacer=20
ww=`convert $infile -format "%w" info:`
hh=`convert $infile -format "%h" info:`
hhr=`convert xc: -format "%[fx:$hh*$ramp/100]" info:`
convert $infile \
\( -size ${ww}x${spacer} xc:none \) \
\( -clone 0 -flip -crop ${ww}x${hhr}+0+0 +repage \
-size ${ww}x${hhr} gradient: +level 0x50% \
-compose copy_opacity -composite \) \
-channel rgba -alpha on -append zelda3_vreflect.png

[thica]

Hello,

thanks for your support, unfortunately it does not lead to the result.

1) It will not work, if the "source" contains transparent parts on the left and/or right side
2) even if I eliminate those transparent parts, it does not work for the rounded corners.

[thica]

Hello,

found a solution, whill post a result later

[fmw42]

try this: (need to extract the alpha channel from the image, mirror and multiply by gradient)



infile="rounded_corner.gif"
ramp=40
spacer=10
fade=50
ww=`convert $infile -format "%w" info:`
hh=`convert $infile -format "%h" info:`
hhr=`convert xc: -format "%[fx:$hh*$ramp/100]" info:`
convert $infile \
\( -size ${ww}x${spacer} xc:none \) \
\( -clone 0 -flip -crop ${ww}x${hhr}+0+0 +repage \) \
\( -clone 0 -alpha extract -flip -crop ${ww}x${hhr}+0+0 +repage \
-size ${ww}x${hhr} gradient: +level 0x${fade}% \
-compose multiply -composite \) \
\( -clone 2 -clone 3 -alpha off -compose copy_opacity -composite \) \
-delete 2,3 -channel rgba -alpha on -append rounded_corner_vreflect.png

[jatimon]

what would be the perlmagick equivalent to get that sort of mirror?

[fmw42]

sorry I no nothing about PerlMagick. perhaps you should post a link on the PerlMagick forum and point a link back to this forum.

[anthony]

More information of handling reflections is in IM Examples, Advanced Techniques...
http://www.imagemagick.org/Usage/advanced/#reflections

[jatimon]

sorry I no nothing about PerlMagick. perhaps you should post a link on the PerlMagick forum and point a link back to this forum.

No problem, I will do just that.

Thanks

[jon_the_eye]

Hi

My first posting, so sorry to re-open an old post.

This is exactly what I am looking to do. However, I need to generate "shell" command lines in my web server middleware app, (which in my case is "Lasso" -similar to php) and I am having problems translating this into a single command line, or even multiple command lines which generate intermediate images.

try this: (need to extract the alpha channel from the image, mirror and multiply by gradient)

infile="rounded_corner.gif"
ramp=40
spacer=10
fade=50
ww=`convert $infile -format "%w" info:`
hh=`convert $infile -format "%h" info:`
hhr=`convert xc: -format "%[fx:$hh*$ramp/100]" info:`
convert $infile \
\( -size ${ww}x${spacer} xc:none \) \
\( -clone 0 -flip -crop ${ww}x${hhr}+0+0 +repage \) \
\( -clone 0 -alpha extract -flip -crop ${ww}x${hhr}+0+0 +repage \
-size ${ww}x${hhr} gradient: +level 0x${fade}% \
-compose multiply -composite \) \
\( -clone 2 -clone 3 -alpha off -compose copy_opacity -composite \) \
-delete 2,3 -channel rgba -alpha on -append rounded_corner_vreflect.png

I would be very grateful if anyone could help me break this down.

jon

[fmw42]

infile="rounded_corner.gif" <-- input image
ramp=40 <-- percent of image to crop for reflection
spacer=10 <-- space between input image and reflection
fade=50 <-- amount of gradient fade for reflection
ww=`convert $infile -format "%w" info:` <-- width of input and reflection
hh=`convert $infile -format "%h" info:` <-- height of input
hhr=`convert xc: -format "%[fx:$hh*$ramp/100]" info:` <-- cropped height of reflection based upon ramp
convert $infile \ <-- input file
\( -size ${ww}x${spacer} xc:none \) \ <-- create transparent spacer
\( -clone 0 -flip -crop ${ww}x${hhr}+0+0 +repage \) \ <-- copy input image, flip vertically and crop
\( -clone 0 -alpha extract -flip -crop ${ww}x${hhr}+0+0 +repage \ <-- copy input, extract its alpha channel, flip and crop similary
-size ${ww}x${hhr} gradient: +level 0x${fade}% \ <-- then create a gradient of same cropped size and fade the gradient appropriately
-compose multiply -composite \) \ <-- multiply the flipped cropped alpha channel with the faded gradient
\( -clone 2 -clone 3 -alpha off -compose copy_opacity -composite \) \ <-- composite the modified alpha channel back onto the cropped flipped image
-delete 2,3 -channel rgba -alpha on -append rounded_corner_vreflect.png <-- delete tmp files, then append the image, the spacer and the fipped cropped image with the new faded alpha channel

[sharifmacky]

Thanks for a such a complete example with vars for fade, spacer etc. For the myriad of novices out there (myself included) to execute this in php, say, the shell command would need ;'s after each line and of coarse \'s escaped... so:

$cmd =
'infile="$src"; ' .
'ramp=40; ' .
'spacer=0; ' .
'fade=70; ' .
'ww=`convert $infile -format "%w" info:`; ' .
'hh=`convert $infile -format "%h" info:`; ' .
'hhr=`convert xc: -format "%[fx:$hh*$ramp/100]" info:`; ' .
'convert $infile ' .
'\\( -size ${ww}x${spacer} xc:none \\) ' .
'\\( -clone 0 -flip -crop ${ww}x${hhr}+0+0 +repage \\) ' .
'\\( -clone 0 -alpha extract -flip -crop ${ww}x${hhr}+0+0 +repage ' .
'-size ${ww}x${hhr} gradient: +level 0x${fade}% ' .
'-compose multiply -composite \\) ' .
'\\( -clone 2 -clone 3 -alpha off -compose copy_opacity -composite \\) ' .
'-delete 2,3 -channel rgba -alpha on -append rounded_corner_vreflect.png';

$rv = exec($cmd);