透過GIF

画像背景の透過処理　(安倍 08/1/20　15/1/23改）

イラスト画像をホームページに挿入する際、GIF画像は背景を透明にできる。　JPEG形式はこの機能はないのでGIFに変換して使用する。 PNGも透過にできるがブラウザによっては透過にならないので注意　※）。

ネット入手のイラスト画像は周辺が透過処理されているものと、されていないものがある。　透過処理されていないサンプルの場合は背景色に合わせるために透過処理が必要です。　この処理はソフトによって２種類ある。

1）透過色を指定 　ーー Homepage Builderなどホームページ作成ソフトで透過色を指定（１色のみ）　操作簡単
　Homepage Builder：　画像を右クリック　→　画像の編集　→・・の調整　→・・の詳細　→・・透明化　→　透明化部分を指定（１色のみ）
　操作は簡単だが、ノイズが多量に入って修正が必要になる場合が多い。

2）透過範囲を指定 ーー画像ソフト使用。　　範囲指定が面倒。

PhotoShop/Illusrator CS　：ファイル → 保存 → GIF → 透明

PhotoShop-E ：イメージモードをRGBに指定 → 透明レイヤーを作成して背景に移動 → 画像レイヤーの透明化部分を範囲指定 → Delete → レイヤー結合
　　　　　　　　　　ネットでの解説参照

PaintShop Pro9：　ファイル　→　エクスポート　→　GIFイメージ　→　透過させる複数色を指定可

FireWorks ：　　ファイル　→　書き出しウィザード　→　・・・　→　WEB 　→　GIFで透過させる複数色を次々指定

1）2）いずれの場合もアンチエリアス処理された画像は周辺に白色ノイズが入っているのでこの除去のための設定に注意が必要となる。
GIFアニメの場合は各フレームごとにこの処理が必要である。
また、 JPEG画像はGIF へ変換する際、設定に注意しないと画質が大きく低下する。

制作例

1）透過色を指定

	0→0
原画		背景の白1色を透過色とした。		背景の色とトマトの赤の２色を透過色とした。

	0→0
原画		1）背景の白1色を透過色とした。	2）背景の白色系約10色を透過色とした。
		1）では、透過色１色だけでは透過が不十分だった。

2）透過範囲を指定

	→
背景色を範囲指定して透過色とした（PhotoShop）

3）写真、あるいは複雑模様が背景の場合
・写真あるいはイラストで複雑模様が背景の場合、背景色が多くなるので通常の透過処理は難しい。
下図の場合でも背景が　薄青～濃青　に変化しているので通常の透過処理では全256色中、40色以上を透過色にしないと多量のノイズが残る。
・このような場合は、目的画像を切抜きして透明背景に貼り付けるとよい。
その際、ノイズが視認しやすい濃色レイヤーの上に貼付けして周辺ノイズを除去後このレイヤーを削除するとノイズ除去作業が確実にできる。

→

上の写真の場合のGIF変換条件
PhotoShop ：　ローカル（知覚/特定）、透明、256色、WEB、誤差拡散75％
PaintShop：　標準
FireWorks： 256色

4）ノイズ除去
多くの場合、透過処理した画像にはノイズが残存する。　この除去は
・濃色レイヤーの上に、透明化した画像を乗せて作業すると視認性がよく作業しやすい。
・作業は、10倍程度に拡大して、目的周辺の白色ノイズを消ゴムあるいはブラシで修正する。
・ノイズ除去後、濃色レイヤーを消去して、GIFで保存する。
ただし、この処理は透過GIFの場合、 PhotoShop、FireWorks ではできるが PaintShop Pro ではできないようだ。 PaintShop Pro9 は透過GIFの生成機能はあるが,このソフトのレイヤーでは透過GIFは機能しない。

	→		→		⇒		→
1) 原画		2) 透過処理		3) 濃色レイヤー上でノイズ除去作業				4) 濃色レイヤーを消去して完成

	⇒
3) のノイズ除去作業 (画像を１０倍拡大で実施)

応用例

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
補足説明：　なぜ GIF に透過機能があり、JPEGにその機能がないのか？
透過機能とは、「その色を使用しない」という意味です。
GIFは２５６色表示ですから、この内の１色のみを使用しないで表示させることによりその色が透過となります。
残り２５５色がありますから、透過前の色調をほぼ犠牲にせずにすみます。
一方、JPEGは 256×256×256＝1677万色を高圧縮で表示します。　一見単色に見える背景も無数の色で構成されていますから色指定の透過はできず、 GIF変換で２５６色に減色したとしても多量のノイズが残ります。

※）PNGの透過： PNG 形式は GIF と同一機能があるがブラウザの種類や Version によっては透過にならない。下記画像は画像の周囲を透過処理したPNG画像です。　Internet Explorer Ver.6 では周囲が白く残ります。

ホームページ作成体験