Hatena::ブログ(Diary)

みんなのIT活用術 このページをアンテナに追加 RSSフィード

パソコン・インターネット・デジカメ・無料画像ソフトGIMP他

2007-11-06

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

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

半透明画像の作り方

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

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

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

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

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

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

透過部分をグラデーションで切り取る もう一度[クイックマスク切り替え]ボタンをクリックして領域選択状態にします。そして[Ctrl]キー+[X]キーを押すか、[編集]タブをクリックして表示されるメニューで[切り取り]をクリックすればこのような画像になります。

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

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

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

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

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

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

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

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

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

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

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

アルファ値を持つPNG画像ディザ処理したPNG画像


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

投稿したコメントは管理者が承認するまで公開されません。

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/kadokura/20071106/p1