Saturday, July 07, 2007

ImageMagickで境界を半透明グラデーションにして2つの画像を重ね合わせる - その3

ImageMagickで境界を半円状の半透明グラデーションにして2つの画像を重ね合わせるには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.4-Q16
%im%\convert.exe sample2bg.jpg -extent 170x100 ( sample3b.jpg -channel A -fx "i<((1-sin(pi*j/h))*10)?0:1" -fx "(((1-sin(pi*j/h))*10)<=i)&&(i<((1-sin(pi*j/h))*10+20))?(i-((1-sin(pi*j/h))*10))/20:p" ) -geometry +70+0 -composite sample177a.jpg

元画像(sample2bg.jpg)


元画像(sample3b.jpg)


出力画像(sample177a.jpg)


2008/01/04追記
Ver6.3.7では、以下のバッチファイルのように-matteを追加します。
rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.7-Q16
%im%\convert.exe sample2bg.jpg -extent 170x100 ( sample3b.jpg -matte -channel A -fx "i<((1-sin(pi*j/h))*10)?0:1" -fx "(((1-sin(pi*j/h))*10)<=i)&&(i<((1-sin(pi*j/h))*10+20))?(i-((1-sin(pi*j/h))*10))/20:p" ) -geometry +70+0 -composite sample177a.jpg

関連項目
ImageMagickで境界を半透明グラデーションにして2つの画像を重ね合わせる
ImageMagickで境界を半透明グラデーションにして2つの画像を重ね合わせる - その2
ImageMagickとPHPで、2つの画像を連結する

Friday, July 06, 2007

ImageMagickで境界を半透明グラデーションにして2つの画像を重ね合わせる - その2

ImageMagickで斜めの境界を半透明グラデーションにして2つの画像を重ね合わせるには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.4-Q16
%im%\convert.exe sample2bg.jpg -extent 180x100 ( sample3b.jpg -channel A
-fx "i<(10-10*j/h)?0:1" -fx "((10-10*j/h)<=i)&&(i<(20-10*j/h))?(i-(10-10*j/h))/10:p" ) -geometry +80+0 -composite sample176a.jpg


元画像(sample2bg.jpg)


元画像(sample3b.jpg)


出力画像(sample176a.jpg)

2008/01/04追記
Ver6.3.7では、以下のバッチファイルのように-matteを追加します。
rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.7-Q16
%im%\convert.exe sample2bg.jpg -extent 180x100 ( sample3b.jpg -matte -channel A
-fx "i<(10-10*j/h)?0:1" -fx "((10-10*j/h)<=i)&&(i<(20-10*j/h))?(i-(10-10*j/h))/10:p" ) -geometry +80+0 -composite sample176a.jpg

関連項目
ImageMagickで境界を半透明グラデーションにして2つの画像を重ね合わせる
ImageMagickで境界を半透明グラデーションにして2つの画像を重ね合わせる - その3
ImageMagickで、2つの画像が交互にスクロールするアニメーションGIFを作成する
ImageMagickとPHPで、2つの画像を連結する

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)