ImageMagickで文字が透明なタブを描画する

ImageMagickで文字が透明なタブを描画するには、以下のバッチファイルを実行します。

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

%im%\convert.exe -size 200x200 xc:black -fill white -draw "roundrectangle -5,30,49,59,6,6" -font Tahoma -pointsize 30 -fill black -draw "text 10,56 'SF'" -matte -channel a -fx "p.r" -channel rgb -fx "#E8F0F8" ( +clone -background #000000 -shadow 60x3+2+2 ) sf.jpg -swap 0,2 -flatten sample768a.png


元画像(sf.jpg)


出力画像(sample768a.png)


関連項目
ImageMagickで上部がギザギザになったタブ画像を生成する
ImageMagickで透過タブ画像を作成する

ImageMagickで上部がギザギザになったタブ画像を生成する

上部がギザギザになったタブ画像を生成するには、以下のバッチファイルを実行します。

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.8-Q16
%im%\convert.exe -size 80x30 xc:white -matte -channel rgba -fx "i%%10<=4&&j>i%%10?1:0" ( -size 80x30 xc:white -matte -channel rgba -fx "i%%10>4&&j>10-i%%10?1:0" ) -fill orange -opaque white -composite -font Comic-Sans-MS-Bold -gravity center -fill white -draw "font-size 12 text 0,0 'What\'s New'" sample344a.png

出力画像(sample344a.png)


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

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 ３つのボタン画像を連結
%im%\convert.exe sample172a.gif sample172b.gif sample172c.gif +append tab1.gif

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

出力画像(tab1.gif)

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 ３つの状態のタブ画像を連結
%im%\convert.exe sample125a.gif sample125b.gif sample125c.gif +append tab1.gif

背景画像(sample10.jpg)

出力画像(tab1,gif)

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

ImageMagickで光沢のあるタブ画像を生成する

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

rem 環境によって変えてね
set im=C:\Progra~1\ImageMagick-6.3.2-Q16
rem タブ画像1 - 非選択
%im%\convert.exe -size 100x30 xc:none -fill #c0c0c0 -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#c0c0c0-#f2f2f2 -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #909090 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133a.gif
rem タブ画像1 - 選択
%im%\convert.exe -size 100x30 xc:none -fill #bbddff -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#bbddff-#f0f5ff -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #3070a0 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133b.gif
rem タブ画像1 - hover
%im%\convert.exe -size 100x30 xc:none -fill #aaccf0 -stroke #ffffff -draw "roundrectangle 0,0 99,29 8,8" ( -size 94x10 xc:none -tile gradient:#aaccf0-#e0e5ff -stroke none -draw "roundrectangle 0,0 93,9 3,3" ) -geometry +3+3 -composite -stroke none -fill #3070a0 -draw "font-size 12 text 32,17 'Home'" ( +clone -background #000000 -shadow 40x2+3+3 ) +swap -background white -mosaic +tile -gravity south -chop 0x18 sample133c.gif
rem ３つのボタン画像を連結
%im%\convert.exe sample133a.gif sample133b.gif sample133c.gif +append tab1.gif

出力画像(tab1.gif)

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 ３つのボタン画像を連結
%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で文字が透明なタブを描画する