Friday, June 22, 2007

ImageMagickで透過タブ画像を作成する

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

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

rem 元画像から下部分を切り出し
%im%\convert.exe sample10.jpg -gravity southwest -crop 300x20+0+0 +repage bar.png

rem タブ画像1 - 非選択
%im%\convert.exe -size 300x30 xc:none -stroke none -draw "fill #000000 font-size 12 text 32,16 'Home' fill #ffffff font-size 12 text 30,14 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background none -mosaic +tile -gravity northwest -crop 108x20+0+0 bar.png -insert 0 -composite -crop 108x20+0+0 +repage sample125a.gif
rem タブ画像1 - 選択
%im%\convert.exe -size 300x30 xc:none -tile gradient:#bbddff-#f0f5ff -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" +tile -stroke none -fill #3070a0 -draw "font-size 12 text 32,15 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background none -mosaic +tile -gravity northwest -crop 108x20+0+0 bar.png -insert 0 -composite -crop 108x20+0+0 +repage sample125b.gif
rem 透過タブ画像1 - hover
%im%\convert.exe -size 300x30 xc:none -fill #808080 -stroke #ffffff -draw "opacity 0.5 roundrectangle 0,0 99,29 8,8" +tile -stroke none -draw "fill #000000 font-size 12 text 32,16 'Home' fill #ffffff font-size 12 text 30,14 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background none -mosaic +tile -gravity northwest -crop 108x20+0+0 bar.png -insert 0 -composite -crop 108x20+0+0 +repage sample125c.gif
rem 3つの状態のタブ画像を連結
%im%\convert.exe sample125a.gif sample125b.gif sample125c.gif +append tab1.gif

背景画像(sample10.jpg)


出力画像(tab1,gif)