|
ネットサーフィンをしたことのある人なら、透明なGIFイメージを目にしたことがあると思います。透明なGIFイメージの輪郭に白いピクセルが含まれているものに遭遇したことがある人もいることでしょう。このチュートリアルでは、Canvasの吸着機能とカメラツールを使ったいくつかの基本的なイメージのレンダリングテクニックを振り返りながら、透明なGIFイメージの輪郭が背景色と自然になじむようなWeb用のGIFイメージの作成方法をご紹介します。
GIF は「Graphic Interchange Format」の頭字語で、主にインターネット上で使用されるビットマップのグラフィック形式です。GIF形式のイメージでは、あるイメージカラーを透明にする、または“見えなく”することが可能です。このGIFイメージの特性を利用して、イメージの背景を透明にし、Webページに使われている背景色、背景のイメージや柄を透かして見せることができます。
このチュートリアルでは、架空の自転車販売会社（Solar-Cycleｓ）のWebページに使う透明なGIFイメージを作成してみましょう。このWebページの背景色にはブルー系統の色を使い、透明なGIFイメージは縦横が「１４５ピクセル
X １７０ピクセル」のサイズで作成してほしいと依頼されたと仮定します。
|
