google maps icon shadow with convert

[romero619]

Im trying to create a shadow png image for google maps icons.
Here's a description from google.

"Every icon has (at least) a foreground image and a shadow image. The
shadow should be created at a 45 degree angle from the foreground image,
and the bottom left corner of the shadow image should align with the
bottom-left corner of the icon foreground image. The shadow should be
a 24-bit PNG images with alpha transparency so that the edges of the
shadow look correct on top of the map."

here are examples of google's default icon & its shadow:
http://www.google.co.uk/intl/en_uk/mapfiles/marker.png
http://www.google.co.uk/intl/en_uk/mapf ... adow50.png

I found a related post here...
http://studio.imagemagick.org/pipermail ... 16805.html

...but that post's examples were incomplete/didnt work out correctly.
example from the above post:

Code: Select all

convert -background none -shear 30x0 -scale x50% -shadow 50 i.png o.png

this command came close, but the base of the shadow was not aligned properly with the base of the image.

I was hoping someone might be able to help me figure out how to create such shadows using IM/convert.

Basically, I want to emulate what's being done on the following website:
http://www.cycloloco.com/shadowmaker/

this site dynamically, correctly creates "google maps shadows" for png images.
Id like to do the same using convert.

Please help,
thanks,

[fmw42]

see http://www.imagemagick.org/Usage/distorts/#shadow3d

[romero619]

Thanks,
I followed those examples, and it appears to work fine for a merged image of 'image+shadow'

however, I need two separate images, one for the original image, and one for the shadow, and the bases should line up...

I tried this (based on the example):

Code: Select all

convert board1.png   -flip +distort SRT '0,0 1,-1 0' \
 \( +clone -background none -shadow 60x5+0+0 \ 
 -virtual-pixel Transparent \ 
 +distort Affine '0,0 0,0  100,0 100,0  0,100 -100,50' \) \ 
 +swap -background none -fuzz 2% -trim +repage test.png

and this created two separate images, since I didnt add the '-layers merge' option.
However, the resulting images dont line up.
I also tried removing the '-trim' option to see if the images lined up correctly, but this also didnt work.

Any ideas on how I can (automatically) get the bases of each image to line up when creating two separate images???

[fmw42]

Here is one way to do it. You may want to further crop both images.

Start with minimal trimmed shape character:
convert -background none -virtual-pixel Transparent -fill DodgerBlue \
-pointsize 72 -font Helvetica label:A -trim +repage \
standing_shape.png


Create shadow image:
convert \( standing_shape.png -flip +distort SRT '0,0 1,-1 0' \) \
\( -clone 0 -background Black -shadow 60x5+0+0 \
-virtual-pixel Transparent +distort Affine '0,0 0,0 100,0 100,0 0,100 -100,50' \) \
\( -clone 0 -alpha transparent \) \
-delete 0 -background none -layers merge \
+repage standing_shadow.png


Create shape image in correct place:
convert \( standing_shape.png -flip +distort SRT '0,0 1,-1 0' \) \
\( -clone 0 -background Black -shadow 60x5+0+0 \
-virtual-pixel Transparent +distort Affine '0,0 0,0 100,0 100,0 0,100 -100,50' \) \
\( -clone 1 -alpha transparent \) \
-delete 1 +swap -background none -layers merge \
+repage standing_shape_new.png



Optionally, just for consistency, create merged image:

Method 1) Merge two separate images created above
convert standing_shape_new.png standing_shadow.png -background white -flatten standing_shadow_merge1.jpg


Method1 - Anthony's Original Technique
convert \( standing_shape.png -flip +distort SRT '0,0 1,-1 0' \) \
\( +clone -background Black -shadow 60x5+0+0 \
-virtual-pixel Transparent +distort Affine '0,0 0,0 100,0 100,0 0,100 -100,50' \) \
+swap -background white -layers merge \
+repage standing_shadow_merge.jpg



Once Anthony gets online, he can probably do this better and more efficiently.

_________________


Here is a simpler method, but does not have as nice a shadow. Again, you will have to trim the excess.

Create shape:
convert -size 100x100 xc:none -fill dodgerblue \
-pointsize 72 -font Helvetica -annotate 0x0+0+100 "A" \
standing_shape2.png


Create shadow:
convert \( -size 100x100 xc:white \) \
\( +clone -fill gray25 -pointsize 72 -font Helvetica -annotate 0x40+0+100 "A" \
-scale 100x75% -blur 0x3 -white-threshold 90% -transparent white \) \
\( -clone 0 -alpha transparent \) -delete 0 +swap \
-gravity southwest -composite standing_shadow2.png


To see that they align, composite together on white background:
convert standing_shadow2.png standing_shape2.png -background white -flatten standing_shadow_merged2.jpg

[anthony]

You may like to look at the next set of examples after shadow3d when it replaces the affine-blur
with a perspective-blur-perspective so that the top of the shadow is more blurred than the bottom.

http://www.imagemagick.org/Usage/distorts/#shadow3d_var

Of course as you need to keep the shadow separate to the marker image just don't overlay that marker image and use a "restricted trim" to only trim the top and right edges of the final shadow
http://www.imagemagick.org/Usage/crop/#trim_oneside

[fmw42]

To crop the lower left corner, you can use -gravity with -crop. For example to get a 60x60 area:

convert image -gravity southwest -crop 60x60+0+0 +repage croppedimage

see

http://www.imagemagick.org/script/comma ... s.php#crop
http://www.imagemagick.org/Usage/crop/#crop_gravity

[jdespatis]

Hello

Thanks for this post, I need also to create an icon for google maps

Anthony has been speaking about a better show shadow, he was saying:

"You may like to look at the next set of examples after shadow3d when it replaces the affine-blur
with a perspective-blur-perspective so that the top of the shadow is more blurred than the bottom.

http://www.imagemagick.org/Usage/distorts/#shadow3d_var"

But this link doesn't seem to work, I don't see any example of shadow 3d variable

Possible to reveal back this link ?

Thanks for your help

[fmw42]

perhaps it was a typo and he might have just meant http://www.imagemagick.org/Usage/distorts/#shadow3d

[anthony]

The "distorted variable blurred shadow" example was using two perspective blurs to first compress the distant part of the blur to just a few pixels, apply the blur, then a second perspective distort to the final 'affine blur coordinates'. This caused the 'compressed part' of the perspective distortion far more blurry.

Note that it works, but not well, and can fail in unexpected ways. It was also obsoleted by later addition of true variable blur mapping which works a lot better with more control.

See Distance Blurred Shadow for an example of using Variable Blurs


I came up with the perspective variable blur method (for lack of a true variable blur at that time), from thinking of pyramid images and how it 'merges and blurs' images for high compression distortions. Just instead of a pyramid I used perspective across the image. Fred could relate to this

The Wayback Machine has a record of that example! (Great site)
http://web.archive.org/web/200904302206 ... adow3d_var
And I also recovered the full example from personal backups (from a year ago!). Perhaps I should restore it (done)

Code: Select all

  convert standing_shape.png   -flip +distort SRT '0,0 1,-1 0' \
          \( +clone   -virtual-pixel Transparent -mattecolor None \
             +distort Perspective \
                '0,0 0,0  100,0 100,0   0,-100 45,-100   100,-100 60,-100' \
             -fuzz 2% -trim   -background Black -shadow 60x3+0+0 \
             +distort Perspective \
                '0,0 0,0  100,0 100,0   45,-100 -100,-50   60,-100 0,-50' \
          \) +swap -background white -layers merge \
          -fuzz 2% -trim +repage     standing_shadow_var.jpg

[jdespatis]

Thanks Antony for revealing this old link,

I understand however that the best way to create this shadow is to use Variable Blur Mapping.

Would it be possible to add an example near http://www.imagemagick.org/Usage/distorts/#shadow3d, that creates this variable shadow with the good way ?

As for Google Maps, I thought I had to have a single image that contains also the shadow, but it's not true. Google Maps needs an image A and another image B that contains the 3d shadow of the image A, so the problem encountered on a crappy border in a previous post (viewtopic.php?f=1&t=19153) is not a problem as it won't be merged in the final image that contains the shadow

[anthony]

The 'good' example is in the compound fonts area and is pointed to from the distort page.
http://www.imagemagick.org/Usage/fonts/#var_blur

Note that shadows are actually closely related to 'reflections', just using a solid color, and having a slight relaxation of the rules involved, (specifically the direction and length of the shadow) and with less 'surface texture effects'.
IM Examples, Advanced Techniques.
http://www.imagemagick.org/Usage/advanced/#reflections