Webサイトのアイコンやロゴ画像の、背景を透過させる方法です。 GIFまたはPNGで保存する場合に、透明に見せる色を指定することができます。
透明なレイヤ(チェック柄の部分)に、リンゴの絵を描きました。
このままアルファ付きPNG以外の形式で保存すると、透明な部分は白になります。
その画像を、背景が白以外のWebサイトで表示させると、リンゴの周りに白い四角の部分が出てしまいますね。
それではみっともない(笑)ので、リンゴ以外の部分を透過表示させる必要が出てくるわけです。
まず透明な部分を、絵に使っていない色で塗りつぶします。
「ファイル」⇒「名前を付けて保存」をクリックします。
適当なファイル名を付け、ファイルの種類でGIFまたはPNGを選びます。
透過GIF/PNGにチェックを入れて、「保存」ボタンをクリックします。
すると透明(透過)色設定の画面が出ます。
カーソルがスポイト形になっているので、透過表示させたい色の部分(左図では黄色)をクリックします。
上にある、カラーボックスの色が変わったことを確認してください。
OKをクリックすると、これで透過GIFまたはPNGでの保存が完了です。
うまく透過されているか、確かめてみましょう。
保存したファイルを、画像ビューアなどで開きます。
左はWindowsXPの付属ビューア(Windows Picture and Fax Viewer)で見たものです。
黄色だった部分が、透過されていますね。
こちらはビューアのIrfanViewで、背景色を青に設定して開いたものです。
きれいに透過されています。
このように背景を透過すると、その画像をどんな背景色の上で表示させても、四角い縁が付いてしまうことはありません。
つまり同じ画像を、色々な背景色の上で使い回せるのです・・・便利ですね。
ところがこの透過GIFやPNGで、困ることがあります。
例えば左図のように、絵(や文字)の縁と背景部分の境界が、線を滑らかに見せるため色が段階的に変化している画像です。
いわゆる「アンチエイリアスがかかっている」状態ですね。
(左図はわかりやすいように拡大表示しています)
この画像を、先ほどと同じように透過させて、青い背景色の上で表示してみました。
あれあれ?・・・リンゴの縁に明るい色の部分が見えて、汚いですね。
これは、画像の縁に残った黄色っぽい部分と背景の青で、色や明るさが大きく違っているために起こります。
残念ながら、アンチエイリアスがかかっている画像は、透過GIF/PNGでは「どんな背景色でも使い回せる」ようにはできません。
ですが、ある程度限定された色の上では、きれいに見せることができます。
例えば、青系の背景で使いたいなら、背景を青(全く同色でなくても、大体の色味や明るさが同じならOK)にして、アンチエイリアスがかかった画像を作ります。
この青を透過色に指定して、保存します。
それを、青に水色のドット背景で表示してみました。
綺麗に透過されていて、汚い縁も見えませんね。
★ なおGIFやPNGの透過色とは、ブラウザやビューアが「表示しない色」という意味です。
実際にピクセルが透明になっているわけではありません。
そこがアルファ付きPNGと違います。
また、半透明・・・のような状態にもできません。
知らない方が多いかもしれないので、オマケ機能の説明です。
Webサイトの背景など、特定の色を描画色にしたい時、その部分を表示させて(Webサイトならブラウザで開いて)、描画色のカラーボックス上を右クリック、さらに「デスクトップ上の色を取得」をクリックします。
出てくる「スポイト」画面の指示に従うと、目的の色が描画色にセットされますよ♪
GIFについて|PNGについて|アルファ付きPNG