ImageMagickで、凹んだ影つきボタンを描画する

凹んだ影つきボタンを描画するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.9-Q16
%im%\convert.exe -size 110x30 xc:#d0d0d0 -pointsize 12 -gravity center -draw "text 0,0 'Search'" -gravity northwest -matte -channel rgba ( -size 110x30 xc:white -fill black +antialias -draw "roundrectangle 5,5 104,24 8,8" -transparent black ) ( +clone -background #000000 -shadow 40x2+3+3 ) -swap 1,2 -mosaic -crop 100x20+5+5 sample349a.png

上記バッチでは、以下の処理を実行しています。
１．灰色背景に文字列を描画
２．白背景に黒の角丸四角を描画して、黒色を透明に変換
3．２に対して影付け
4.２と３を入れ替え重ね合わせ、座標(x=5,y=5)から幅100px高さ20pxを切り取っています。

出力画像(sample349a.png)

ImageMagickで単色のアイコンからボタンを生成する

単色のアイコンからボタンを生成するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.8-Q16
%im%\convert.exe -size 20x20 xc:none -fill gradient:#bbddff-#f0f5ff -stroke #ffffff -draw "ellipse 10,10,9,9,0,360" ( home.png -fill #77bbee -opaque #000000 ) -gravity center -geometry +1+0 -composite ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample333a.gif

元画像(home.png:黒色以外は透過色になっています。)


出力画像(sample333a.gif)

ImageMagickで左上が明るいボタンを作成する

ImageMagickで左上が明るいボタンを作成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem ボタン画像1
%im%\convert.exe -size 100x20 xc:none -fill #fad759 -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" ( -size 100x20 xc:#f8f8ffff -channel A -fx "((w-i)/w)*((h-j)/h)*0.6+0.3" ) -composite -stroke none -fill #a0a0a0 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample117a.gif
rem ボタン画像2
%im%\convert.exe -size 100x20 xc:none -fill #c0c0c0 -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" ( -size 100x20 xc:#f8f8ffff -channel A -fx "((w-i)/w)*((h-j)/h)*0.6+0.3" ) -composite -stroke none -fill #707070 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample117b.gif
rem ２つのボタン画像を連結
%im%\convert.exe sample117a.gif sample117b.gif +append button.gif

出力画像(button.gif)

ImageMagickで横線の入ったボタンを生成する

ImageMagickで横線の入ったボタンを生成するには、以下のバッチファイルを
実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16

rem ボタン画像1
%im%\convert.exe -size 100x20 xc:none -tile gradient:#c0c0c0-#f2f2f2 -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" -fx "j%%2==0?p:p*0.8" +tile -stroke none -fill #a0a0a0 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample130a.gif

rem ボタン画像2
%im%\convert.exe -size 100x20 xc:none -tile gradient:#bbddff-#f0f5ff -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" -fx "j%%2==0?p:p*0.8" +tile -stroke none -fill #3070a0 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample130b.gif

rem ２つのボタン画像を連結
%im%\convert.exe sample130a.gif sample130b.gif +append button.gif

出力画像(button.gif)

ImageMagickでボタン画像を生成する

ImageMagickでボタン画像を生成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem ボタン画像1
%im%\convert.exe -size 100x20 xc:none -tile gradient:#c0c0c0-#f2f2f2 -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" +tile -stroke none -fill #a0a0a0 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample97a.gif
rem ボタン画像
2%im%\convert.exe -size 100x20 xc:none -tile gradient:#bbddff-#f0f5ff -stroke #ffffff -draw "roundrectangle 0,0 99,19 8,8" +tile -stroke none -fill #3070a0 -draw "font-size 12 text 32,15 'Search'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic sample97b.gif
rem ２つのボタン画像を連結%im%\convert.exe sample97a.gif sample97b.gif +append button.gif

Webページに上記画像を埋め込む場合、

スタイルシートに以下のように設定することで、

マウスオーバーしたときに、画像が切り替わるように
できます。
a.btn {
display: block;
width: 108px;
height: 28px;
background-image: url("./button.gif");
background-repeat: no-repeat;
background-position: 0px 0px;
text-decoration: none;
}
a:hover.btn {
background-position: -108px 0px;
}