SMAC: CG Workshop---Photoshop LE

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

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

減色してからGIF形式で書き出しという手順は、さまざまなグラフィックソフトにおいて最もスタンダードなやり方だと思います。透過色を自分で決められるのがポイント。

[1] RGBモードの画像を用意します。この状態では背景は白になっています。

[2] イメージメニュー＞モード＞インデックスカラー...を実行します。レイヤーを統合しますか？というダイアログが出た場合はOKと答えます。
パレットを「使用中の色に合わせて割り付ける」にし、適当な色数を選んで減色します。

ディザの種類は、色数の多いイラスト調の画像なら「誤差拡散法」、ベタ塗り部分が多いものなら「なし」を選ぶときれいにできます。

[3] ファイルメニュー＞出力用プラグ＞GIF89a 書き出し...を実行します。

透明インデックス
カラーが
グレーならば、
このように見えます。

ブラウザ上の見た目には
影響ありません。

[4] 右下にあるスポイト型のボタンを選んで、カーソルがスポイトに変わったら背景の色をクリックします。この色で塗られている部分が、ブラウザ上での透過部分になります。

下側に並んでいる色は、画像に使われている色の一覧です。ここからも透過色をクリックで選択することができます。

スポイトのそばのマークが+になっている時は色を複数指定できます。たとえば、この画像で白い部分とピンクの部分をクリックすると、両方の色で塗られている部分が透過になります。
スポイトアイコンのままコマンドキー（WinではAltキー）を押しているとそばのマークが-になり、選択した色を一つずつ取消しできます。

「透明インデックスカラー」は、前の作例に出てきたのと同じ機能で、透過になる領域をこの色で表示してくれます。色の部分をクリックして確認しやすいカラーに変更することもできます。
この色を変えても、ブラウザ上で見る時は透明になっているわけですので実際の見た目には影響ありません。

[5] OKを押して保存すれば、できあがり。

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

しかし濃い色のバックの上だと
なかなかきれいに表示できなかったりします。
次は、もっときれいに透過させるための
いろいろな方法を見てみましょう。

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

その3・背景色との関係（近日掲載予定）＞＞　

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