旅行

文学

美術

音楽

宗教

パソコン

海外旅行


トップページ 透過色の設定 メニューへ

 ウェブページには、ボタン画像やアイコン類画像を配置して、ページ間の移動などさまざまな目的に利用するのが普通です。
それらの画像を画像処理プログラムで作成してウェブページに貼ってみると、画像の境界部分が作成者の意図とは異なる見え方になる場合があります。

ボタン画像1
角円形のボタン

 左図は、「人材募集」という角円形のボタンを作成し、背景色がグレーのウェブページに貼った場合です。
ボタンの青紫の部分が丸くなっている左右端の外側に、白い部分が角ばって表示されているのが見られます。これはもちろん作成者が意図したものではありません。

ボタン画像2
元のボタン画像

 ウェブページに貼る前のボタン画像がどうなっているのか調べましょう。左図は、そのボタン画像を拡大表示したものです。

上図から、この画像が背景色が白の長方形のスペースに角円形の画像を作成したものであるのがわかります。そのため、ボタン画像の左右端の部分に白の背景色が余白として残って表示されているわけです。

この問題にはいくつか解決する方法がありますが、もっとも簡単な方法は、上図ボタン画像の余白部分をウェブページの背景色と同じ色で塗りつぶすことです。
たいていの画像処理プログラムには「バケツツール」というのがあるので、それを利用して上図の余白部分を塗りつぶすことができます。

しかしこの方法では、ウェブページの背景色が変わると、またそれに合わせて上図ボタン画像の余白部分の色を塗り直さなければなりません。一つのボタン画像を背景色の異なる多数のウェブページで利用するのは困難になります。

gif 画像の透過処理

 現在は、これらのボタン画像などはたいてい "gif"(ジフ) という画像形式で作成されます。gif形式では、取り扱う色の種類を256に制限するため、画像データのサイズを大幅に圧縮することができます。

このgif形式では、「画像の透過色の設定」という画像処理が可能となっています。これは、gif形式で取り扱う上記256色のうちの特定の1色を、その画像の置かれる背景の色で置き換えるというものです。
これにより、ボタン画像などの余白部分の色を、そのボタン画像が置かれているウェブページの背景色と同じ色に設定できるのです。

この機能はウェブ制作者にとって大変有難いので、たいていの画像処理プログラムではメニューから透過色の設定ができるようになっています。ここでは、Windows用画像処理プログラムの定番PaintShop Pro 8での透過色設定を解説します。

透過設定する色

 下図のように、まず透過設定をするボタン画像を PaintShop Pro 8 で表示します。この画像はgif形式でなければなりません。もしjpg形式など他のタイプで作成したら、gif形式に変換してセーブしてください。

ボタン画像を必要に応じてやや大きく表示しておいて、透過指定したい色の部分をスポイドツール(左側のツールボックスの中にあるスポイドの形をしたツール)でクリックします。すると、その色の「インデックス」が表示されるので、それをメモしておきます。
インデックスというのは、gif形式で取り扱う256種の色の中でのその色の番号です。この場合には透過指定したい色は白で、そのインデックスは0でした。

透過設定する色

透過色の設定

 次に、下図のように、画面上部の「画像」メニュータブから「パレット」を選択し、その中の「透過色の設定」をクリックします。

透過色の設定

すると、次の画面が表示されるので、「次のパレットインデックスを透過に設定する」のラジオボタンを選択しておいてその右の枠内で透過指定する色のインデックス 0 を選択あるいは記入してください。
終了したら、OKボタンをクリックします。以上でこのボタン画像の透過色設定は終了です。

透過色の設定


透過設定されたボタン画像
透過設定されたボタン画像

 このようにして透過色設定作成されたボタン画像を上記ウェブページに貼ると、左のような画面となり、ボタンの部分だけがきれいにグレーのページに表示されました。

この技術は簡単な割には効果が大きいので、皆様もぜひマスターして見栄えのいいウェブを制作してください。

トップページ メニューに戻る