透過画像・半透明の画像を作る方法

　『半透明の画像や透明のグラデーション加工した画像の作り方と、それをWordやプレゼンテーション用のファイルとホームページに貼りたいのだが…どうすればいいの？』という質問を友人Ｎ氏からいただいていたので、今回は透過画像の作成とその取り扱い方について解説します。

半透明画像の作り方

　［背景］レイヤーを右クリックして表示されるメニューで［アルファチャンネルを追加］をクリックしてから、レイヤーの［不透明度］で値を下げると、値に応じた半透明の画像ができます。

透明グラデーションの画像を作る

　グラデーションで透過させる方法は、クイックマスクを使う方法と、レイヤーマスクによる方法が考えられます。

クイックマスクを使って作成する方法

　［クイックマスクの切り替え］ボタン（画面左下）をクリックします。［ブレンド］（グラデーションで塗りつぶす）をクリックして、グラデーションリストから黒→白のグラデーションを選択します。図のようにドラッグしてグラデーションを塗ります。

　右図がグラデーションを塗った状態です。赤いマスクの色が右に行くにしたがって薄くなっていることで確認できます。

　もう一度［クイックマスク切り替え］ボタンをクリックして領域選択状態にします。そして［Ctrl］キー＋［X］キーを押すか、［編集］タブをクリックして表示されるメニューで［切り取り］をクリックすればこのような画像になります。

レイヤーマスクを使って作成する方法

　［背景］レイヤーで右クリックして表示されるメニューで［レイヤーマスクの追加］をクリックして、レイヤーマスクを追加します。

　追加したレイヤーマスクをクリックして選択状態（編集可能な状態）にしてクイックマスクと同様にグラデーションを塗ります。ちなみにグラデーションの向きがクイックマスクとは逆になる（黒いほど透過する）ので、塗る方向を逆にするかオプションメニューで［反転］にチェックを入れてからグラデーションを塗ります。クイックマスクと違って切り取る必要はありません。もとの画像がそのままの状態で残ります。

保存するファイルタイプに注意

　JPGファイルやBMPファイルは半透明にはなりません。またウェブで使用できる一般的な画像ファイルはJPG、GIF、PNGなどがありますが、ウェブでもオフィス製品のドキュメントなどにも汎用的に使えて、且つ透過する画像ファイルとして適しているのはPNGファイルです。保存するときはPNGファイルで保存すると良いでしょう。

透過画像ファイルをドキュメントに貼った例

　右図がオープンオフィス（OpenOffice）のプレゼンファイルに貼った例です。マイクロソフトのワードやパワーポイントにも同様に貼れると思います。と言いますのも、私が持っているマイクロソフトのオフィス製品は古いので、透過部分がディザ処理されてしまいます。現在頒布されている製品で試していないのでなんともわかりません。たぶんOKなのでは？

そのままWebには使えません

　PNGのアルファ値（透明度）を適切に表示処理できないブラウザにインターネットエクスプローラ６（以降IE6と表示）があります。IE6のシェアはまだまだ多く、2007年11月時点でこのサイトでもおよそ半数の方が使われています（私も仕事上で高い頻度で使っています）。ですのでそのままでは使わないほうが無難でしょう。もしどうしても透過させたい場合は、透過部分をディザ処理する方法があります。

　［画像］タブをクリックして表示されるメニューで［モード］の［インデックス］をクリックします。表示された「インデックスカラー変換」で「ディザリング」の［透明部分のディザリングを行う］にチェックを入れて［OK］ボタンをクリックしてディザリング処理を行ってからウェブ用に保存すると良いでしょう。*1

　下図の左が普通のアルファ値をもったPNGで右がディザ処理をしたPNGです。IE6以外のブラウザではどちらも背景色がちゃんと透過されて表示されていると思います。IE6では左の画像が右端に向かって白くグラデーションになっているはずです。でもIE6のためにディザ処理した画像を使うのも…今どきちょっとカッコ悪いですね。ウェブに使用する画像はディザ処理しないできれいに表示できるような使い方、つまり半透明の画像を使わないで他の方法で見せたほうがベターだと思います。それから、写真をアルファ値を持ったPNGファイルにすると、JPGに比べて格段にファイルサイズが大きくなります。この例では100キロバイトを超えています。ウェブで使用する場合はこのことを充分考慮に入れる必要があります。

*1:レイヤーマスクの場合は右クリックメニューでマスクを適用してください。