Win版IEを利用して、チェック柄の画像を作る


Webの背景用素材などにいかがですか？


　普段Webを作成する時には、Mac＋Netscapeでも見られることを目標にしておりますので、HTMLタグ辞典の後ろの方を見ることは余り無かったのですが、最近、 いろいろと調べているうちにクロマキー合成という機能が有ることを知りました。GIF画像の透過色の様なイメージで、画像やテキストのなかの一色を選 んで、下の画像の色を透かして見えるようにできる機能のことです。IE4(Win版)から有ったんですね、この機能。
試してみますとこのクロマキー合成は２重にしても使えることが分かり、それによって、下の表のようにチェック柄が簡単に作れることが分かりましたので、やり方をここに 書いておこうと思います。

縦じま画像横じま画像マスク画像
小さすぎるので
4倍で拡大表示		合成した画像

ジーンズなどと
同じあや織り
（サージ？）

綾織で
糸が太い！！

平織りで
糸が太い！！


チェック柄を作るためのHTMLソース(for Win IE4)
　　実行例はここをクリックブラウザによってはおそらくマスク画像のみになります。
<META HTTP-EQUIV="content-type" CONTENT="text/html;charset=SHIFT_JIS" >
<HEAD>
<TITLE>壁紙てすと</TITLE>
</HEAD>
<BODY BACKGROUND="tate.gif" STYLE="margin-left:0cm;margin-right:0cm;margin-top:0cm">
<TABLE STYLE="position:absolute;top:0px;left:0px;filter:Chroma(color=#010101)" BACKGROUND="yoko.gif" WIDTH="100%" HEIGHT="600px"><TR><TD>
<TABLE STYLE="position:absolute;top:0px;left:0px;filter:Chroma(color=#fefefe)" BACKGROUND="mask.gif" WIDTH="100%" HEIGHT="600px"><TR><TD>
</TD></TR></TABLE>
</TD></TR></TABLE>
</BODY></HTML>

　このソースのtate.gifに縦じま画像、yoko.gifに横じま画像、mask.gifに縦糸が見えている部分と横糸が見えている部分のパターンを指定する画像を入れてやればチェック柄が合成されます。(gifだけでなくbmpでも使えます。）tate.gif、yoko.gifに白や黒を使いたかったので、mask.gifには白に近い灰色"#fefefe"と黒に近い灰色"#010101"を使っています。お試しになる場合は、mask.gifをダウンロードして色はそのまま利用してペイントなどで加工して使用すると便利です。

　Web素材として利用の際は、画像をキャプチャーしてgifやJPEGファイル等に直して、最小繰り返し単位の部分で切り抜いて使うことになります。東芝Librettoで画像キャプチャーのやり方は、 です。これはPCによってやり方が違うと思いますので、分からない方は調べる必要が有ります。

　縦じま画像と横じま画像とマスク画像はそれぞれ正方形で、縦じま画像と横じま画像がマスク画像の整数倍の大きさに成るように作るとわかりやすいと思います。

クロマキー合成によるチェック柄合成の仕組み


１．先ず最初に、横じま画像の上にマスク画像の"#fefefe"の色を透過にして重ねることにより、縦糸の部分のみ"#010101"でマスクしている画像が合成されます。
 +  → 

２．次に１で作った画像の"#010101"の色を透過にして縦じま画像の上に重ねることによって、縦じまと横じまが上手く合成されます。
 +  → 

この原理を使えば、IEでなくてもペイントの背景色の設定機能や透過gifなどを使ってのチェック柄の合成も可能ですね！！（やりたいかどうかは別として…笑。）

2003.04.19

[HOME][とまて週報TOP]