HP作成実録 No.25

透過画像の作り方
このページ作り終わってから思いましたが、あまり意味ないかも (^^;)
基本的にはPhotoEditerを使っての作り方です。

2002.01.06 追記
ココで使っている画像をPNGに統一しました。
その関係で以前と少し文章が変更されてます。

■GIFの場合
GIFの場合は1色しか指定できません。背景を透過させるパターンが多いと思います。
下の画像の背景(青の部分)を透過させてみます。
●
PhotoEditerのツールバーにある「透過色に変更」という、
こんなPhotoEditerのボタンボタンを押してから、
背景(青の部分)を選択してGIFで保存すると出来上がりです。

コレだけで終わってしまうと(実際コレで終わりだけど)寂しいので、
違う方法も書きましょう。 (^^;)
GIFが作れるツールはあるけど、透過のやり方が判らない人だけに有効です。
フリーソフトのAnimation Gif Makerを使って作ります。
まずこのソフトでGIFファイルを開きます。
(「ファイル」タブでファイル名を選択して「追加」ボタンを押す)
そして「パラメータ」タブで「透過」をオンにし、「透過色指定」ボタンを押して、
出てきたパレットの中から透過色にしたい色を選択します。
終わったら下の方にある「更新」ボタンを押して、作成ボタンを押します。
警告ウインドウが出てきても、とりあえず「OK」して、
名前を付けて保存すると完成で、こんな風になるはずです。
●
背景が見えなくなって壁紙の模様が見えてますよね?
注意点として、パレットの数が多くなると、
どの色が透過させたい色だったか判らなくなる時があります。
16進数での色の指定(青なら0000FFとか)を控えておけば大丈夫ですが、
色数が少ないのであれば、Padie で減色しておくのも判りやすくなっていいです。

■GIFのオマケ
PhotoEditerでは2色のGIFは白黒のものしか(多分)出来ません。
コレだけで作るとこうなります。
●
見かけは変わらないのにさっきのは178バイトでコレは954バイトになりました。
(表示している画像はPNGです)
同じように2色のものでもファイルサイズが全然違います。
PhotoEditerだけで作るとパレット256色で作られるからです。
なので最初は白黒GIFで作っておいて、Animation Gif Makerでファイルを開いて、
「その他」タブの「カラーテーブル編集」で色を差し替えます。
こうする事でファイルサイズの小さい、カラー2色のGIFが出来ます。
順序は下の様になります。
●(色を差し替え)⇒ ●(透過色を指定)⇒ ●


■PNGの場合
PhotoEditerを使ってインデックスカラー256色のものを作る場合はGIFと同様です。
●
カラー2色のPNGではないのでファイルサイズが大きくなってます。
もう1つ、True Color (24ビット)で作るとこうなります。
●
IEでは背景が透過されずに灰色になってます。
NN6でのみ背景が透過されて見えているはずです。
これはブラウザが完全に対応していない為に起こるものらしいです。
IE4以降とNN4以降でPNGは見られますが、
透過処理に対応しているのはIE4以降とNN6で、
先ほどのTrue Color (24ビット)で作った様な、
アルファチャンネルを利用するとNN6でしか正確に表示されません。
ただ、True Color (24ビット)でも、
アルファチャンネルを使わない方法で透過色を指定した場合には、
(ブラウザによっては)キチンと表示出来るようです。
またアルファチャンネルを使ったものは、背景以外はキチンと表示されるようです。
透過処理しなければ、ほとんどのブラウザで表示できるようですが。

shinが今使っているペイント系ソフトでは、
まだPNGの透過の仕方に完全対応していない様です。
いや、判ってないだけかもしれないけど。(^^;)
PNGはフリーソフトで扱えるのでPhotoEditerにこだわる必要もないし、
アルファチャンネルの事ももっと使ってみて、(←よく判ってない?(^^;))
またココに追記する事にします。とりあえず今の所はPhotoEditerで作ってます。
フリーのコンバートソフト等も幾つか公開されてはいますが、
まだ使ってないのでその内に。(^^;)

2001.05.25 追記
なんて言ってたらPNG用のフリーソフトを作ってしまいました。(^^;)
透過色の設定はモチロンのこと、インターレースの設定、
アルファチャンネルを付けたりパレット色の交換もできます。
詳しくはコチラ!!です。使ってみて下さい。
バグレポートや感想や質問等もメールで送って下さいね!! (^o^)/

▲MENUに戻る