サイトで使うアイコンの背景を透過させたい GIFの透過処理のやり方を教えて

0911_00.jpg

特にアイコンで多く使われているのが、背景が透過処理されている「透過GIF」画像。ウェブでよく使わ
ているが、ペイントソフトで作成するのは結構面倒。画像ビューワーソフトのIrfanViewを使った、簡単な作り方を解説しよう。

透過GIFは、ウェブやアプリのアイコンでよく使われている。背景色が透過になるので、どんな場所に配置してもフィットしてくれるのが便利だ。
IrfanViewでは、透過GIFの作成に必要な、「画像のGIF形式への変換」「バレット色の調査」「透過GIFの変換処理」を、すべてまとめて行える。本格的なペイントソフトを使うまでもない作業なので、IrfanViewを使って、ちゃっちゃっと作ってしまおう。

■ IrfanViewでGIF画像の白色の背景に透過処理を施す

gif_01-thum.jpg
透過させたい画像ファイルを「IrfanView」で開こう

gif_04-thum.jpg
まずは透過GIFを作成できる規格「Compuserve GIF」形式に変換する。「ファイル」→「名前を付けて保存」をクリック

gif_05-thum.jpg
「GIF - Compuserve GIF」を選択して保存しよう

gif_02-thum.jpg
次に、減色の設定を行う。「画像」→「減色」をクリック

gif_03-thum.jpg
「配色」で「256色」もしくは「16色」を選択して「OK」をクリックしよう

gif_06-thum.jpg
透過色を適用するパレット番号を調べる。「画像」→「パレット」→「パレットの編集」をクリック

gif_07-thum.jpg
「パレットの編集」が開くので、透過色にしたい色をこの中から指定しよう。といっても、微細な色の違いのある画像では、目的の色がどれか分からないことがあるはず……

gif_08-thum.jpg
そんなときは、「パレットの編集」を開いたままで、画像上の透過したい色の部分をクリックする。「パレットの編集」上でクリックした色が選択される

gif_09-thum.jpg
透過したい色を選択したら、左下の「Index:数字」の数字の部分を覚えておこう。これがパレット番号となる

gif_10-thum.jpg
「ファイル」→「名前を付けて保存」をクリック。「設定ダイアログを表示する」にチェックを入れる

gif_11-thum.jpg
「GIF」の項目の「透過色を保存」のチェックを有効にする

gif_12-thum.jpg
「透過色のパレット番号」を選択して、先ほど調べた色の番号を入力する

gif_13-thum.jpg
そのままファイルを保存すると、指定したバレット番号の色が透過されたGIFファイルが作成される

2013年09月11日 14時52分
©教えて君.net All Rights Reserved.