SMAC: CG Workshop---Photoshop LE

■■■ 透過GIFを作る ■■■

● その1・一番簡単な方法 ● その2・割と一般的な方法 ● その3・背景色との関係 ● その4・正確な領域コントロール ●

● その1・いちばん簡単な方法

とりあえず一番手っ取り早いのがこの方法ではないでしょうか。
欠点は、ソフトにおまかせ状態であるため、自分で透過領域をコントロールできないことです。

[1] RGBモードの画像を用意します。
画像をレイヤー上に置いた状態、つまり周囲が透明な状態にしておきます。
背景レイヤーは非表示にするか削除してしまってください。

[2] ファイルメニュー＞出力用プラグ＞GIF89a 書き出し...を実行。
レイヤーを統合しますか？というダイアログにOKと答えます。

[3] こんなダイアログが出てきます。
パレットで「適応させる」を選んでから色数を決め、減色します。

色数を少なくすればファイルサイズは軽くなりますが、少なすぎると画像が汚くなってしまいます。
色の少ないアイコンなどは16～32色、少しカラフルなものでも32～64色くらいで結構きれいに見えると思います。

[4] OKを押して保存すれば、レイヤー上の透明だったところが自動的に透過部分になります。おしまい。簡単簡単。

[3] のダイアログをちょっと補足。急いでる人は読まなくても大丈夫。

「プレビュー」で見られる画像は、実際に書き出される状態より少し汚くなっていたりします。参考程度に見ましょう。プレビュー画面の下のほうに並んでいるのは、画像中に使われている色の一覧です。

透過になる領域は、プレビュー画面上では「透明インデックスカラー」に指定されている色で表示されます。ここをクリックして確認しやすいカラーに変更することもできます。この色を変えても、ブラウザ上で見る時は透明になっているわけですので実際の見た目には影響ありません。めんどくさい場合は無視してヨシ。

「インターレース」とは、ブラウザでページを見たときにGIF画像が全体的にジワジワ少しずつ表示される方式のことです。
ここのチェックを外せば少しだけ画像ファイルが軽くなりますが、実際にページを見てくれる人のことを考えると、どんな内容の画像があるかあらかじめ判るインターレース形式のほうが良い場合も多いです。このへんは自分のページの内容と相談して決めてみましょう。わからなかったらとりあえずチェックを入れておきます。

完成品。色つきの背景の上に置いて、
透過の具合を確認してみました。

その2・割と一般的な方法＞＞　

-- CG Workshop入り口へもどる --