BACK  NEXT

透過GIFの利用

画像は本来四角形のものですが、背景を透過させることによって自由な形に見せることが出来ます。
透過GIFは、Webで大活躍するとても便利な手法です。

それではJTrimを使って透過GIFを作って見ましょう。

1.step1.gifファイル→新規作成 40×40
編集→文字入れ ● 文字色白 背景色黒 アンチエイリアスのチェックをはずしておく gifで保存
2.step2.gifイメージ→リサイズ 100×40
3.step3.gifカラー→二階調化 閾値のスライダーを動かして滑らかに見えるところを選ぶ
4.step4.gif編集→塗りつぶし 楕円(白い部分)を好みの色で塗りつぶし
5.step5.gifイメージ→テクスチャー→コンクリート壁
6.step6.gif編集→文字入れ
7.step7.gifイメージ→透過色設定
マウスポインターがスポイトの形に変わるので黒い部分をクリック
JTrim上では、背景は黒のままで何も変化はおこりません。ブラウザで見るとちゃんと透過されています。

この例ではテクスチャーを使う都合で、最初から背景を黒くして作業を進めました。

場合によっては先に画像を作っておいて、後で背景を塗りつぶしても結果は同じです。

塗りつぶす色(=透過色に指定する色)は適当で良いのですが、画像の中で使われていない色を選ばなくてはなりません。

hana.gif  touka.gif

自由な線を描くというのが苦手なJTrimですが、フォントを丹念に調べていくとなかなか面白い形があるものです。

font.gif この図柄はフォントWingdings、大文字のOで表示されます。これをペン代わりにして写真の上に形を描きます。次に font2.gif や font3.gif を使って周囲を塗りつぶしていきます。全部塗りつぶしたら周囲を透過させれば、右のような透過GIFの出来上がりです(実際には青ではなくて白で描き、仕上げに白でグラデーションをかけました)。

また透過gifをスペーサーとして使うという手法があります。1×1ピクセルの最小単位の透明画像を作っておき、必要なスペースをwidth、heightで指定します。 スペーサーGIFを使ってページをレイアウトする方法については、chikoさんのサイトが大変解りやすくてオススメです。是非参考になさってください。

BACK  NEXT