Friday, March 23, 2007

ImageMagickで光沢のあるタブ画像を生成する

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

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16
rem タブ画像1 - 非選択
%im%\convert.exe -size 100x30 xc:none -fill #c0c0c0 -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#c0c0c0-#f2f2f2 -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #909090 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133a.gif
rem タブ画像1 - 選択
%im%\convert.exe -size 100x30 xc:none -fill #bbddff -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#bbddff-#f0f5ff -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #3070a0 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133b.gif
rem タブ画像1 - hover
%im%\convert.exe -size 100x30 xc:none -fill #aaccf0 -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#aaccf0-#e0e5ff -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #3070a0 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133c.gif
rem 3つのボタン画像を連結
%im%\convert.exe sample133a.gif sample133b.gif sample133c.gif +append tab1.gif

出力画像(tab1.gif)

No comments: