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)