Gradient instead of solid fill color

[hknight]

Hello,

This creates a button with a solid red background.

Code: Select all

convert mask.png -fill red -draw 'color 0,0 reset' \
          mask.png +matte  -compose CopyOpacity -composite \
          -font 'tahomabd.ttf' -pointsize 11 -fill black \
          -gravity Center -annotate 0 'Hello World' \
          button.png

I want the background to start red at the top left corner and end up blue at the buttom right corner.

How can this be done?

Thanks!

[Bonzo]

I would create a gradiant and rotate it; then use that for the background. Something like this http://www.rubblewebs.co.uk/imagemagick ... adiant.png
One problem I can see is the angle of rotation will depend on the width of the button.

[anthony]

Other gradient producion methods are provided in IM Examples...
http://www.imagemagick.org/Usage/canvas/#gradient

[hknight]

Thank you both.

Anthony, I tried the examples at the link you provided but could not get anything to work. I think that -fx might be the best tool, but I did not understand how to use it.

I use the following code to DYNAMICALLY create a button:

Code: Select all

## Based on this: http://www.imagemagick.org/Usage/advanced/#3d-logos-2
## Thanks, Anthony!

convert -background transparent -fill transparent \
           -pointsize 12 label:'Hello Cruel World' \
           -format 'viewbox 0 0 %[fx:w+7] %[fx:h+7]  \
            fill white roundRectangle 1,1 %[fx:w+5] %[fx:h+5] \
            5,5' \
            info: > rounded_corner.mvg

convert -background black +antialias rounded_corner.mvg mask.png

convert mask.png -fill pink -draw 'color 0,0 reset' \
          mask.png +matte  -compose CopyOpacity -composite \
          -pointsize 11 -fill black +antialias \
          -gravity Center -annotate 0 "Hello Cruel World" \
          button.png

convert button.png  -fx A  +matte -blur 0x2  -shade 110x30  -normalize \
          button.png  -compose Overlay -composite \
          button.png  -matte  -compose Dst_In  -composite \
          3dButton.png

The problem is that the button is pink. I want the button to start out green in the top left corner and end up yellow in the bottom right corner.

So I need a gradient at a 135° degree angle.

[anthony]

The problem is generating a gradient at the specific size of an existing image.
This is currently difficult, almost as difficult as generating a rounded rectangle
at the right size. Both problems have a solution whcih is in the think tank, but not yet resolve enough for implementing.

Hmmm...

Code: Select all

convert -background transparent -fill transparent \
           -pointsize 12 label:'Hello Cruel World' \
           -format '%wx%w'  -write info:size1.txt \
           -format '%wx%h'  -write info:size.txt \
           -format 'viewbox 0 0 %[fx:w+7] %[fx:h+7]  \
            fill white roundRectangle 1,1 %[fx:w+5] %[fx:h+5] 5,5' \
            info:rounded_corner.mvg

convert -size `cat size1.txt` gradient:green-yellow -rotate -45 \
           -gravity center -crop `cat size.txt`+0+0 +repage \
           mask.png +matte  -compose CopyOpacity -composite \
          -pointsize 11 -fill black +antialias \
          -gravity Center -annotate 0 "Hello Cruel World" \
          button.png

[hknight]

Thanks, Anthony. You are a true hacker!

Now the only problem is that the final canvas size is too big. There is extra transparent space on all sides of my button.
I looked through the documentation for a way to crop all extra transparent canvas space but found nothing.

Code: Select all

convert -background transparent -fill transparent \
           -pointsize 12 label:'Hello Cruel World' -border 10 +repage \
           -format '%wx%w'  -write info:size1.txt \
           -format '%wx%h'  -write info:size.txt \
           info:grad.mvg

convert -background transparent -fill transparent \
           -pointsize 12 label:'Hello Cruel World' \
           -format 'viewbox 0 0 %[fx:w+7] %[fx:h+7]  \
            fill white roundRectangle 1,1 %[fx:w+5] %[fx:h+5] 5,5' \
            info:rounded_corner.mvg

convert -background black +antialias rounded_corner.mvg mask.png

convert -size `cat size1.txt` gradient:'#C27A08'-'#FE9800' -rotate -35 \
           -gravity center -crop `cat size.txt`+0+0 +repage \
           mask.png +matte  -compose CopyOpacity -composite \
          -pointsize 11 -fill black +antialias \
          -gravity Center -annotate 0 "Hello Cruel World" \
          button.png

convert button.png  -fx A  +matte -blur 0x2  -shade 110x30  -normalize \
          button.png  -compose Overlay -composite \
          button.png  -matte  -compose Dst_In  -composite \
          3dButton.png

[anthony]

It it is transparent just "-trim +repage"

See http://www.imagemagick.org/Usage/crop/#trim