Thursday, July 05, 2007

ImageMagickで上部がカーブしたタブ画像を作成する

ImageMagickで上部がカーブしたタブ画像を作成するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.4-Q16
rem タブ画像1 - 非選択
%im%\convert.exe -size 100x10 gradient:#f4f4f4-#cccccc ( -size 100x20 xc:#cccccc ) -append -background none -wave -4x200 -gravity north -crop 100x25+0+0 +repage -extent 102x25 -gravity center -fill #707070 -pointsize 15 -font "c:/winnt/fonts/msmincho.ttc" -draw @lbl.txt sample172a.gif
rem タブ画像1 - 選択
%im%\convert.exe -size 100x10 gradient:#ffffdd-#f8c749 ( -size 100x20 xc:#f8c749 ) -append -background none -wave -4x200 -gravity north -crop 100x25+0+0 +repage -extent 102x25 -gravity center -fill #8c8769 -pointsize 15 -font "c:/winnt/fonts/msmincho.ttc" -draw @lbl.txt sample172b.gif
rem タブ画像1 - hover
%im%\convert.exe -size 100x10 gradient:#ffffdd-#fce769 ( -size 100x20 xc:#fce769 ) -append -background none -wave -4x200 -gravity north -crop 100x25+0+0 +repage -extent 102x25 -gravity center -fill #f29719 -pointsize 15 -font "c:/winnt/fonts/msmincho.ttc" -draw @lbl.txt sample172c.gif
rem 3つのボタン画像を連結
%im%\convert.exe sample172a.gif sample172b.gif sample172c.gif +append tab1.gif

lbl.txtには、以下の内容をUTF-8で保存します。
text 0,2 '詳細設定'

出力画像(tab1.gif)

No comments: