Friday, March 16, 2007

ImageMagickで消えていく角丸を描画する

ImageMagickで消えていく角丸を描画するには、
以下のコマンドを実行します。

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

%im%\convert.exe -size 100x100 xc:none -channel RGBA -fill #ffffff -draw "roundrectangle 10,10 89,89 10,10" ( +clone -background #000000 -shadow 90x2+0+0 -channel A -fx "p*((w-20-i)/w)*((h-20-j)/h)" ) +swap -background white -flatten -gravity southeast -chop 20x20 +repage sample114a.jpg

出力画像(sample114a.jpg)

Thursday, March 15, 2007

ImageMagickで円をぼかした背景画像を描画する

ImageMagickで円をぼかした背景画像を描画するには、
以下のコマンドを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe -size 150x100 xc:#bbddff -fill white -draw "ellipse 50,50 40,40 0,360" -blur 0x20 -fx "j%%3==0?p*1.1:p" sample104.jpg

出力画像(sample104.jpg)

Wednesday, March 14, 2007

ImageMagickで端がグラデーションの半透明四角形を描画する

ImageMagickで端がグラデーションの半透明四角形を描画するには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe -size 120x120 xc:#ffffffff -channel RGBA -fill #000000FF -draw "rectangle 10,10 110,110" -blur 0x7 -crop 100x100+10+10 +repage -channel A -fx 0.3 sample108a.png

出力画像(sample108a.png)




重ねあわせ例1:
%im%\convert.exe sample1.jpg sample108a.png -geometry +10+10 -composite sample108b.jpg

出力画像(sample108b.jpg)


%im%\convert.exe -size 120x120 xc:#ffffffff -channel RGBA -fill #000080FF -draw "rectangle 10,10 110,110" -blur 0x7 -crop 100x100+10+10 +repage -channel A -fx 0.6 sample108c.png

出力画像(sample108c.png)


重ねあわせ例2:
%im%\convert.exe sample1.jpg sample108c.png -geometry +10+10 -composite sample108d.jpg

出力画像(sample108d.jpg)

Tuesday, March 13, 2007

ImageMagickで角丸四角画像の端をグラデーションで塗る

ImageMagickで角丸四角画像の端を
グラデーションで塗るには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe sample2bg.jpg -border 10x10 ( -size 120x120 xc:none -channel RGBA -fill white -draw "roundrectangle 10,10 110,110 10,10" -negate -fx "p!=1?0:#F0F0F0" -blur 0x3 ) -composite -crop 100x100+10+10 +repage -channel RGBA sample102a.png
%im%\convert.exe -size 150x100 xc:none -channel RGBA -fill white -draw "roundrectangle 0,0 149,99 10,10" sample102b.png -compose src_in -composite sample102b.gif

元画像(sample7.jpg)



出力画像(sample102b.gif)


2008/01/04追記
ver6.3.7では、以下のバッチファイルを実行します。
rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.7-Q16
%im%\convert.exe sample7.jpg -border 10x10 ( -size 170x120 xc:none -matte -channel RGBA -fill white -draw "roundrectangle 10,10 160,110 10,10" -negate -fx "p!=1?0:#404040FF" -blur 0x5 ) -composite -crop 150x100+10+10 -channel RGBA sample102b.png
%im%\convert.exe -size 150x100 xc:none -fill white -draw "roundrectangle 0,0 149,99 10,10" sample102b.png -compose src_in -composite sample102b.gif

関連項目
ImageMagickで画像の上下・左右をグラデーションで塗る


Monday, March 12, 2007

ImageMagickで画像の端をグラデーションで塗る

ImageMagickで画像の端をグラデーションで塗るには、
以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe sample2bg.jpg -border 10x10 ( -size 120x120 xc:none -channel RGBA -fill white -draw "rectangle 10,10 110,110" -negate -fx "p!=1?0:#F0F0F0" -blur 0x10 ) -composite -crop 100x100+10+10 sample101a.gif

元画像(sample2bg.jpg)


出力画像(sample101a.gif)

画像の端を暗くする場合は、以下のバッチファイルを実行します。
%im%\convert.exe sample7.jpg -border 10x10 ( -size 170x120 xc:none -channel RGBA -fill white -draw "rectangle 10,10 160,110" -negate -fx "p!=1?0:#404040" -blur 0x5 ) -composite -crop 150x100+10+10 sample101b.gif

元画像(sample7.jpg)


出力画像(sample101b.gif)


2008/01/04追記
Ver6.3.7では、以下のバッチファイルを実行します。
rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.7-Q16
%im%\convert.exe sample2bg.jpg -border 10x10 ( -size 120x120 xc:none -matte -channel RGBA -fill white -draw "rectangle 10,10 110,110" -negate -fx "p!=1?0:#F0F0F0FF" -blur 0x10 ) -composite -crop 100x100+10+10 +repage sample101a.gif
%im%\convert.exe sample7.jpg -border 10x10 ( -size 170x120 xc:none -matte -channel RGBA -fill white -draw "rectangle 10,10 160,110" -negate -fx "p!=1?0:#404040FF" -blur 0x5 ) -composite -crop 150x100+10+10 +repage sample101b.gif

関連項目
ImageMagickで画像の上下・左右をグラデーションで塗る

Friday, March 09, 2007

ImageMagickでタブ画像を生成する

ImageMagickで以下のバッチを実行することで、
タブ画像を生成できます。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem タブ画像1 - 非選択
%im%\convert.exe -size 100x30 xc:none -tile gradient:#c0c0c0-#f2f2f2 -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" +tile -stroke none -fill #a0a0a0 -draw "font-size 12 text 32,15 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample100a.gif
rem タブ画像1 - 選択
%im%\convert.exe -size 100x30 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 white -mosaic +tile -gravity south -chop 0x18 sample100b.gif
rem タブ画像1 - hover
%im%\convert.exe -size 100x30 xc:none -tile gradient:#aaccf0-#e0e5ff -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 white -mosaic +tile -gravity south -chop 0x18 sample100c.gif
rem 3つのボタン画像を連結
%im%\convert.exe sample100a.gif sample100b.gif sample100c.gif +append tab1.gif

出力画像(tab1.gif)


以下のようなCSSを指定することで、マウスオーバーした場合に
切り替わるように指定できます。
ul.mytab {
list-style: none;
}
ul.mytab li {
display: block;
float: left;
}

a.tab1 {
display: block;
width: 108px;
height: 20px;
background-image: url("./tab1.gif");
background-repeat: no-repeat;
background-position: 0px 0px;
text-decoration: none;
}
a.tab1selected {
display: block;
width: 108px;
height: 20px;
background-image: url("./tab1.gif");
background-repeat: no-repeat;
background-position: -108px 0px;
text-decoration: none;
}
a:hover.tab1 {
background-position: -216px 0px;
}


HTMLでは以下のように指定します。
<ul class="mytab">
<li><a class="tab1" href="#"></a></li>
<li><a class="tab1selected" href="#"></a></li>
</ul>

関連項目
ImageMagickで文字が透明なタブを描画する

ImageMagickで重ね合わせの位置を指定する - その2

-gravityオプションと-geometryオプションを併用することで、
たとえば、右下から指定の座標に重ねあわせをするといったことが
できます。

元画像(sample7.jpg)


ロゴ画像(logo.png)


rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem 左上(10,10)に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity northwest -geometry +10+10 -composite sample98a.jpg

出力画像(sample98a.jpg)


rem 中央上に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity north -geometry +0+10 -composite sample98b.jpg
出力画像(sample98b.jpg)


rem 右上に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity northeast -geometry +10+10 -composite sample98c.jpg

出力画像(sample98c.jpg)


rem 中央左に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity west -geometry +10+0 -composite sample98d.jpg

出力画像(sample98d.jpg)


rem 中央右に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity east -geometry +10+0 -composite sample98e.jpg

出力画像(sample98e.jpg)


rem 左下に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity southwest -geometry +10+10 -composite sample98f.jpg

出力画像(sample98f.jpg)


rem 中央下に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity south -geometry +0+10 -composite sample98g.jpg

出力画像(sample98g.jpg)


rem 右下に配置
%im%\convert.exe sample7.jpg yourlogo.png -gravity southeast -geometry +10+10 -composite sample98h.jpg

出力画像(sample98h.jpg)

Thursday, March 08, 2007

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 2つのボタン画像を連結%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;
}

Wednesday, March 07, 2007

ImageMagickでリボンを描画する

ImageMagickでリボンを描画するには、polygonを使用して
リボンの形を描画します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem シンプルな単色リボン
%im%\convert.exe -size 200x20 xc:none -fill #f1ede1 -draw "polygon 0,0 5,9 0,19 199,19 194,9 199,0" sample96a.gif

出力画像(sample96a.gif)


rem 枠線付きリボン
%im%\convert.exe -size 200x20 xc:none -fill #f1ede1 -draw "polygon 0,0 5,9 0,19 199,19 194,9 199,0" -stroke #c9bfaa -fill none -draw "polygon 0,0 5,9 0,19 199,19 194,9 199,0" sample96b.gif

出力画像(sample96b.gif)


rem 2重枠線付きリボン
%im%\convert.exe -size 204x24 xc:none -stroke #c9bfaa -strokewidth 3 -fill #f1ede1 -draw "polygon 2,2 7,11 2,21 201,21 196,11 201,2" -stroke white -strokewidth 1 -fill none -draw "polygon 2,2 7,11 2,21 201,21 196,11 201,2" sample96c.gif

出力画像(sample96c.gif)

Tuesday, March 06, 2007

ImageMagickで光沢のある文字列を描画する

ImageMagickで光沢のある文字列を描画するには、
-fxオプションを使用して、画像の半分の高さの位置の
上下でグラデーションを適用します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16
%im%\convert.exe -size 120x30 xc:none -fill #bbddff -font "Tahoma-Bold" -draw "font-size 30 text 5,23 'Sample'" -fx "(h/2>j)?(j/(h/2)*0.1+p):(p-((h-j)/(h/2)*0.1))" -background white sample132a.png

出力画像(sample132a.png)

ImageMagickで様々な角丸四角を描画する

roundrectangleの第5(width)・第6(height)パラメータにより
丸みを指定することで、様々な角丸四角を描画できます。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe -size 100x100 xc:none -fill #bbddff -draw "roundrectangle 0,0 100,100 50,10" sample95a.gif

出力画像(sample95.gif)


%im%\convert.exe -size 100x100 xc:none -fill #f1ede1 -draw "roundrectangle 0,0 100,100 5,50" sample95b.gif

出力画像(sample95b.gif)

Monday, March 05, 2007

ImageMagickで影の方向を変える

ImageMagickで影の方向を変えるには、-shadowオプションの
第3(X)・第4(Y)パラメータを変更します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16
rem 左上に影
%im%\convert.exe sample128a.png ( +clone -background black -shadow 40x3-3-3 ) +swap -background white -flatten sample129a.jpg

出力画像(sample129a.jpg)


rem 左下に影
%im%\convert.exe sample128a.png ( +clone -background black -shadow 40x3-3+3 ) +swap -background white -flatten sample129b.jpg

出力画像(sample129b.jpg)


rem 真下に影
%im%\convert.exe sample128a.png ( +clone -background black -shadow 40x3+0+6 ) +swap -background white -flatten sample129c.jpg

出力画像(sample129c.jpg)

ImageMagickで端がグラデーションになった雲を描画する

ImageMagickで端がグラデーションになった雲を描画するには、
雲を一度描画してからぼかして、再度雲形でマスクします。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16
%im%\convert.exe -size 200x130 xc:none -fill #ffffff -draw "ellipse 50,50 40,40 0,360 ellipse 80,40 30,30 0,360 ellipse 110,60 50,50 0,360 ellipse 140,40 30,30 0,360 ellipse 160,50 30,30 0,360 ellipse 150,80 30,30 0,360 ellipse 40,80 30,30 0,360 ellipse 80,80 40,40 0,360" ( -size 200x130 xc:#bbddff -fill #ffffff -draw "ellipse 50,50 40,40 0,360 ellipse 80,40 30,30 0,360 ellipse 110,60 50,50 0,360 ellipse 140,40 30,30 0,360 ellipse 160,50 30,30 0,360 ellipse 150,80 30,30 0,360 ellipse 40,80 30,30 0,360 ellipse 80,80 40,40 0,360" -blur 0x20 ) -compose src_in -composite sample128a.png

出力画像(sample128a.png)

ImageMagickで様々な角丸を描画する

角丸四角をカットすることで、ImageMagickで様々な角丸の
画像を描画することができます。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
rem 左上だけ角丸の四角形
%im%\convert.exe -size 100x100 xc:none -fill #fee6e6 -draw "roundrectangle 0,0 100,100 10,10" -gravity southeast -chop 10x80 sample94a.gif

出力画像(sample94a.gif)



rem 右上だけ角丸の四角形
%im%\convert.exe -size 100x100 xc:none -fill #cabfab -draw "roundrectangle 0,0 100,100 10,10" -gravity southwest -chop 10x80 sample94b.gif

出力画像(sample94b.gif)




rem 左下だけ角丸の四角形
%im%\convert.exe -size 100x100 xc:none -fill #edd3d2 -draw "roundrectangle 0,0 100,100 10,10" -gravity northeast -chop 10x80 sample94c.gif

出力画像(sample94c.gif)


rem 右下だけ角丸の四角形
%im%\convert.exe -size 100x100 xc:none -fill #f8c749 -draw "roundrectangle 0,0 100,100 10,10" -gravity northwest -chop 10x80 sample94d.gif

出力画像(sample94d.gif)



rem タブ画像
%im%\convert.exe -size 100x100 xc:none -fill #bbddff -draw "roundrectangle 0,0 100,100 10,10" -gravity south -chop 0x80 sample94e.gif

出力画像(sample94e.gif)


Sunday, March 04, 2007

ImageMagickで上下グラデーションの角丸四角を描画する

ImageMagickで上下グラデーションの角丸四角を描画するには、
以下のコマンドを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe -size 200x200 xc:none -fill white -draw "roundrectangle 0,0 199,199 15,15" -fx "s.p==0?0:((1-sin(pi*j/h))*0.8)" -matte sample123a.gif


出力画像(sample123a.gif)



関連項目
ImageMagickで、角丸四角のグラデーションにハーフトーンを重ね合わせる
ImageMagickで任意の2色の上下グラデーションの角丸四角を描画する

ImageMagickで画像の幅・高さを取得する

ImageMagickで画像の幅・高さを取得するには、
identifyコマンドを使用します。-formatオプションで
出力書式を指定できます。
%wが幅、%hが高さです。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16
%im%\identify.exe -format "%%w %%h" sample7.jpg

出力結果
>C:\Progra~1\ImageMagick-6.3.2-Q16\identify.exe -format "%w %h" sample7.jpg
150 100

関連項目
ImageMagickとVBで画像の幅・高さを取得する

ImageMagickでエッジ抽出を行う

ImageMagickでエッジ抽出を行うには、-edgeオプションを
使用します。

元画像(sample7.jpg)


rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.1-Q16
%im%\convert.exe sample7.jpg -edge 0 sample93a.gif

出力画像(sample93a.jpg)


%im%\convert.exe sample7.jpg -edge 1 sample93b.gif

出力画像(sample93b.jpg)


%im%\convert.exe sample7.jpg -edge 2 sample93c.gif

出力画像(sample93c.jpg)


%im%\convert.exe sample7.jpg -edge 3 sample93d.gif

出力画像(sample93d.jpg)


%im%\convert.exe sample7.jpg -edge 5 sample93e.gif

出力画像(sample93e.jpg)


%im%\convert.exe sample7.jpg -edge 10 sample93f.gif

出力画像(sample93f.jpg)

Saturday, March 03, 2007

ImageMagickでモノトーンアイコン画像の色を変える

フリーで配布されている大量のアイコン画像などの色を
変更したい場合は、ImageMagickで一括変換すると便利です。
今回のデータは、以下のサイトからダウンロードしました。
http://2pt3.com/news/twotone-icons-for-free/

元画像(cart.psd, cart.gif)


配布データがPhotoshopのデータ(*.psd)だった場合は、レイヤーごとにページが
作られるので必要ないレイヤーは削除したのち白色を任意の色に変更します。
(ちなみに、このデータの場合、カートのビットマップが書かれているレイヤーの
サイズが12x12なので16x16に変更しています。)
rem 環境によって変えてねset im=C:\Progra~1\ImageMagick-6.3.2-Q16
%im%\convert.exe cart.psd -delete 0 -delete 0 -background none -gravity center -extent 16x16 +repage -fx "p==#FFFFFFFF?#FAD759FF:#00000000" -background white cart.png

出力画像(cart.png)


psdのアイコン画像の白色をグラデーションで塗り替える場合は、以下のコマンドを実行します。
%im%\convert.exe cart.psd -delete 0 -delete 0 -background none -gravity center -extent 16x16 +repage ( -size 16x16 gradient:#80ffff-#e0ff80 ) -compose src_in -background white -composite cart2.png

出力画像(cart2.png)


元データが透過gifの場合は、透明色をいったん別の色で塗り替え後、
白色を任意の色で塗りつぶし、それ以外を透明色とします。
%im%\convert.exe cart.gif -channel RGBA -fx "p.a==0?#0000EEFF:p" -channel RGBA -fx "(p.r==1 &&amp;amp; p.g==1 && p.b==1)?#FAD759FF:#00000000" cart3.png

出力画像(cart3.png)


gifアイコン画像の白色をグラデーションで塗りつぶす場合は、いかのコマンドを実行します。
%im%\convert.exe cart.gif -channel RGBA -fx "p.a==0?#0000EEFF:p" -channel RGBA -fx "(p.r==1 &&amp;amp; p.g==1 && p.b==1)?#FFFFFFFF:#00000000" ( -size 16x16 gradient:#80ffff-#e0ff80 ) -compose src_in -composite cart4.png

出力画像(cart4.png)