項目別アクセス 集計

JTrim 017 / GIF画像の透過 ・・・ 使用環境に応じた透過の仕方

Enjoy JTrim > JTrim Lab > 透過 >
<2021.03.06 修正> 関連項目を見る  << 前ページへ  次のページへ >>
ご質問は 画像加工質問掲示板/Help Forum へどうぞ!

<透過処理の下ごしらえ> ※このページに記載している内容のポイントです。詳細はこのページをご覧ください。
◆ JTrim の「イメージ」メニューの一番下「透過状態を表示」をクリックして必ずチェックを入れる。
◆ 透過処理する画像が GIF 形式以外の画像形式の場合は、JTrim に取り込んで何もしないで一旦 GIF形式で保存してから透過処理する。
◆ 透過する部分とそうでない部分に同じ色があったときは、透過する部分だけを違う色に塗りつぶしてから透過処理する。
◆ 特にJPG画像は、透過する背景と輪郭付近の色がデジタル的に異なる場合が多いので、背景を同じ色に塗りつぶしてから透過処理する。
◆ 透過画像を使用する Web ページの背景色に塗りつぶしてから透過処理すると、表示したときの輪郭がキレイになる。

ここではGIF画像を透過するメニューをご紹介します。
「イメージ」→「透過色設定」で起動するこのメニューは、WEBページの背景に影響されることなく、画像を自然に表現するような場合に役立つでしょう。
※2005.02.05配布されたVersion 1.41 では、デフォルトで GIF に対応しています。
※2005.12.28配布されたVersion 1.52 では、透過処理すると格子模様に表示されます。

(注意)「イメージ」メニューの一番下「透過状態を表示」をクリックして必ずチェックを入れてください。 そうしないと、透過処理した部分が格子模様になりません。

<透過GIF作成の際のトラブル>
GIF以外の画像(JPG,BMP,PNG など)を JTrim で開き、透過処理した後に GIF形式で保存すると、 保存に失敗したり、透過されない場合があります。 そんなときは、透過処理する前の元画像を一旦 JTrim で開いて何もしないで GIF形式で保存し、 その保存した GIF画像を JTrim で開いて透過処理するとうまくいくと思います。 簡単に言えば、「透過GIF を作るときは、元画像を一旦 GIF形式にしてから透過処理」ということです。

■透過の考え方
GIF画像の透過は単一色またはそれに極めて近い色を対象としています。 上段左の画像は黒(#000000)の背景に赤(#FF0000)で文字を書いたものです。 ここで 黒(#000000)を透過したものが その右の画像です。きれいに透過されますね。

下段左の画像は 下半分の背景色は黒(#000000)で、上半分は黒に見えますが(#464646)です。 これで 黒(#000000)を透過したものが その右の画像です。デジタル的に #000000と#464646は異なっているので #464646の部分は透過されません。 つまり 画像といえどもパソコン上ではデジタルで扱われますから、見た目で同じ色でもデジタル的に異なって いれば透過されません。

#いくらデジタル的に異なっていても,かなり近い黒 #050505と #000000をいっしょに処理したら JTrimではどちらも透過されました。 JTrimに限らず、その辺の微妙なところはソフトを開発なさる方のさじ加減といったところでしょうか。。。

  

  

<No.1>
同じように見えるでしょう。





<No.2>
実は、このように上が透過されていないGIF画像、下が背景の「白」を透過した画像です。






<No.3>
それでは背景をJTrimで透過してみましょう。「透過したいGIF画像」をJTrimに読み込みます。
右上のペンのようなアイコンをクリックします。

<No.4>
このように「イメージ」→「透過色設定」からでもOKです。「イメージ」→「透過状態を表示」にチェックが入っていないと透過部分が格子状に表示されませんので、チェックが入っていることを確認してください。

<No.5>
マウスカーソルはペンの形に変わりましたね。このペン先を透過したい部分(色)のところでクリックします。
2006年12月28日リリースされたversion1.52以降では、透過部分が格子模様で表示されるようになりました。 格子模様に表示されない場合は「イメージ」→「透過状態を表示」にチェックを入れてください。



<No.6>
「ファイル」→「名前を付けて保存」でお好きなところに保存してください。(GIF形式で保存してください。)

<No.7>
透過したい部分と透過したくない部分が同じ色 の場合、どちらも透過されてしまいます。そんなときは、「カラー」→「色解像度の変更」でフルカラーにしてから、 透過したい部分を画像に使われていない色(この場合は「赤」)で一旦塗りつぶします。 その後に「赤」の部分を透過すれば解決します。
画像を用意しました。画像全体がわかるように背景をグレーにしています。この画像では周囲の色と帽子の色がデジタル的に同じ「白」です。
このまま周囲の白を透過すると、このように帽子も透過されてしまいます。
このような時は、透過したい部分(この場合は周囲の白)だけを別な色(この場合は赤)に塗りつぶします。  参考:JTrim 026/塗りつぶしの基本
周囲の赤の部分を透過処理します。透過する色が赤なので、帽子の白は透過されませんね。
背景をグレーにして元の画像と周囲を透過した画像を貼ってみました。透過処理後の画像は、周囲が透過されて背景のグレーになっています。
   

<No.8>
こんなJPG画像を用意してみました。この画像の背景を透過してみましょう。

<No.9>
JPGやBMPなどのGIF画像ではない画像を透過処理してGIFで保存すると、 透過処理されないケースがあるようですので、まず元のJPG画像をGIF画像に変換します。 画像をJTrimで開き、何もしないで「メニュー」→「名前を付けて保存」でGIF形式で保存します。

<No.10>
その画像を単に透過処理すると、こんなふうに画像の周囲に色が残ります。 これは、一見すると背景のすべてが同じ色のようですが、画像の周囲がデジタル的には同一でないために透過処理の際に色が残るんです。 デジタル写真に使われるJPG形式によく見られる現象です。(写真の場合は、自然な感じに見せるためにもこの曖昧さが必要なんですけど。。)
色を調べるフリーソフト「ゆなカラーピッカー」で調べてみました。このようにこの画像の周囲のほとんどが「#00fefe」で塗られています。
ところが、描かれている対象との境界付近は、デジタル的に異なった「#15eadb」となっています。ですから透過処理すると周囲の「#00fefe」の部分は透過されますが、境界付近は透過されないで残っちゃうんですね。

<No.11>
これを防ぐには、まず背景を同一色で「塗りつぶし」してから透過する方法があります。
「編集」→「塗りつぶし」で、「許容範囲」を「50」程度に指定して塗りつぶします。(画像に使われていない色が望ましい)

<No.12>
その後に透過処理すると、このようにうまくいきます。

<No.13>
でも、透過処理した画像をこのような濃いグレーの背景で使うと、画像の周囲に白っぽい部分が残ってしまいます。

<No.14>
で、どうすればいいか。。。というと、「透過処理した画像を使う背景と同じような色で、許容範囲を広くして塗りつぶす」 ということでうまくいきます。
この場合は、塗りつぶしの色を「濃いグレー」とし、塗りつぶしの許容範囲を「80」としました。 元の背景色(ここでは明るい青緑)に対しての許容範囲なので、元の背景色は画像に使われている色と極端に違う色でないと、 画像部分に影響しますので注意が必要です。

<No.15>
こうしてから透過処理したものがこれです。

<No.16>
グレーの背景に使ってみましょう。画像の周囲もきれいになりましたね。
このように、GIF画像を透過処理する場合は、透過後の使い方で工夫することが大切です。

<No.17>
このサイトのタイトル画像がこれです。茶色の背景に使うと決めて透過したので境界の部分に茶色が残ってしまい、白背景では使えませんね。
   
でも、茶色の背景に使えば問題ありません。要するに、使う場所にあった透過の仕方をすればいいわけです。
こちらが参考になります。→ JTrim 068 / 背景色に応じた画像文字の作り方