透過GIFのギザギザ

ブログが作りたい!GIMPで画像編集 > 透過GIFのギザギザ

透過GIFのギザギザ

GIFで透過保存した時にでるギザギザについて

GIFで透過保存した時にでるギザギザ

知らないふりをして、GIFで透過保存してきましたが、実のところどうにもギザギザが気になります。何か良い方法はないのかしら?

いろいろと試してみたところ、条件付ですが、ひとつ方法が分かったので、次の順番で、お話は進みます。

GIMPの導入(インストール)手順については、記事「GIMP2の導入手順」が参考になります。


どうしてギザギザになるの?

どうしてギザギザになってしまうのか?答えてくれセニョール!

1:透過GIFとは?

透過GIFは、画像内の背景が透過状態にあるGIFのことです。

例えば、次のようにWebサイトの背景が白色の場合は、あまり違いが分かりませんが・・・。

透過GIF 背景白色GIF

透過GIF

背景白色GIF

次のようにWebサイトの背景に色が付いていると、違いがよく分かります。

透過GIF
背景白色GIF

透過GIF

背景白色GIF

つまり、透過GIFにしておけば、Webサイトの背景がどのような色であっても、対応してくれるわけです。こりゃ便利だね。

2:ジャギー

とても便利な透過GIFですが、ジッと見てみると、斜め線や曲線のあたりが、ギザギザになっていることに気が付きます。

このギザギザは、「ジャギー」と呼ばれており、どうやら、解像度が低い場合に起こるようです。

透過・アンチエイリアス有、背景色なし

デジタル画像の基本的なこと」でも書きましたが、きれいに表示するには、それなりの解像度(ピクセルの密度)が必要なのです。

3:GIFで透過保存した場合

ただ、今回の透過GIFについてのギザギザ(ジャギー)は、低解像度だけの話ではなさそうです。

なぜなら、「GIMP2でファイルを保存する」で試したように、解像度が同じでも、pngで透過すると、gifよりギザギザ(ジャギー)は目立ちませんでした。

gifに何か問題がありそうです。

調べてみると、どうやらgifは、画像を保存する場合に色数を減らすようです。(インデックスカラーかグレースケールでしか保存できない)

つまり、根本的な原因は低解像度ですが、今回の透過gif問題は、低解像度を補う技術による効果が、色数を減らすことで消失してしまっていると考えられます。

4:アンチエイリアス

どうして色数が少ないと、ギザギザに見えてしまうのか?

それは、隣り合っているピクセルの色が、はっきりと違いすぎてしまうために、ギザギザ(ジャギー)が強く感じられるからです。

ジャギー

これを解消するために、「アンチエイリアス」という技法にて、境界となる箇所に、中間色を配置し、視覚的な色の段差をゆるやかにします。

アンチエイリアス

gifで保存したときに、ギザギザ(ジャギー)になるのは、このアンチエイリアスによる中間色が、色数の減少に伴って消失しているからだと思います。

しかし、Web素材を配布しているサイトを拝見すると、たいていGIFで配っています。そして、素材を見ると、ギザギザを感じさせることがありませんから、何かしら方法があるはずです。


ギザギザを軽減する方法

今回ご紹介する方法は、条件付きです。Webサイトの背景が分かっている場合にだけ有効な方法になります。

1:新規ファイルの作成

次のような形で、新規の画像ファイルを作成して試してみましょう。

  • (01)ファイルの新規作成をクリックする。([ファイル]-[新規])
  • (02)サイズを100×100に設定する。
  • (03)表示サイズがあわなければ、合わせる。
  • (04)新規レイヤーを作成する。

2:文字を書く

(05)

道具箱の「文字ツール」を、クリックします。

文字ツールをクリック

(06)

適当な文字を入力してください。フォントは、曲線の多いものを選んだ方が分かり良いです。

私は、次のようにしました。(アンチエイリアシングは、ONになっています)

  • フォント「CommercialScript BT」
  • 大きさ「130px」
文字を入力

3:文字の位置を調整

(07)

文字を入力したら、位置がへっぽこな場所にあると思うので、移動ツールで調整しましょう。

4:エッジを作る

(08)

レイヤーを切り替えます。

レイヤーを切り替える

(09)

レイヤーを、Webサイトの背景と同じ色で塗りつぶします。

背景と同じ色で塗りつぶす

(10)

レイヤーを切り替えます。(文字のレイヤーにします)

レイヤーを切り替える

(11)

文字のレイヤーを右クリックし、メニューを表示させて、「下のレイヤーと結合」を選びます。

下のレイヤーと結合する

レイヤーが結合されて、レイヤー1つと、背景だけになります。

レイヤーが結合された

(12)

上部メニュー「選択」から「色で」を選びます。([選択]-[色で])

選択から色でを選ぶ

(13)

画像の塗りつぶした方を、クリックします。(文字以外が選択されます)

文字以外を選択

(14)

「編集」から「消去」を選びます。([編集]-[消去])

文字以外を削除

これを行うことで、文字の回りに少しだけ背景色が残るわけです。(エッジが作成されました)

文字の回りに少しだけ背景色が残る

5:背景はいりません

(15)

忘れずに「背景」を、不可視にしましょう。

背景を不可視

6:確認

(16)

GIFで保存して、比較してみましょう。

右側のひと手間加えた透過GIFの方が、ギザギザが少ないのが分かるかしら。

透過GIF ひと手間 透過GIF

透過GIF

ひと手間
透過GIF

次のようにWebサイトの背景が同じ色であれば、さらに効果を発揮します。なめらかプリン並になめらかです。

透過GIF
ひと手間 透過GIF

透過GIF

ひと手間
透過GIF

しかし、弱点はこれです。色の薄い背景に合わせて作ると、色の濃い背景では、チラチラが出てしまいます。

透過GIF
ひと手間 透過GIF

透過GIF

ひと手間
透過GIF

うーん、世の中ってば厳しいね。


ギザギザやチラチラは無くせないのか?

1:チラチラは無くせるか?

前述のチラチラを無くす方法を調べてみると、いろいろと出てきますが、試してみてもうまくいきませんでした。

  • アンチエイリアスをOFFにする。
  • ぼかす。([フィルタ]-[ぼかす]-[ガルシアンぼかし])

結局のところ、チラチラが無くなったら、今度はギザギザが出てきます。背景色の濃淡に関係なく、ギザギザもチラチラも無くせる色があれば良いんだけどねぇ。

継続して、調べてみます。

2:png使っちゃいなよ

pngを使えば、すべて解決するのですが、残念ながら現状IE6がネックになっているようです。

「古いブラウザならしょうがないかな」とも思うんですけれど、本当にMicrosoftはいつもいつも、どうしてこう・・・。

2007年1月頃に、「to-R」さんで、pngのIE6問題を、JavaScriptで解決するための方法が紹介されています。この方がスマートかもね。『アルファ画像を扱うalphafilter.jsライブラリ

追記(2009/04/30)。alphafilter.jsは、さらに進化しているようです。『alphafilter.jsが透過pngのロールオーバーに対応』したとのこと。

前の記事へ
次の記事へ

次回予告

次回は、よく見かける「床が鏡面になって文字が映っているような感じ」をやってみようかと思っています。


関連記事

画像編集ソフトGIMPに関連する記事を、一部ご紹介します。

GIMPに関するすべての記事をご覧になりたい場合は、『GIMPで画像編集(カテゴリ記事一覧)』をご利用ください。

作成日:2008/02/15 更新日:2008/02/15

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

本当に

本当に・・・IE6はいつもいつも・・・
やってくれますね・・・

PNGはスクリプトで背景を透過することが出来ますが・・・
そもそもPNG画像のIE6の背景が灰色にある仕様さえ無ければまともに
使えるはずなんですよね・・・

最近IE8のRC版(最終リリースとほぼ同じ)が公開されましたが、
できれば早くセキュリティー上の欠陥が多い&CSSのバグが多い
IE6からユーザーには乗り換えてもらいたいものです。

IE6

暗黒の鬼神さん、こんばんは。
コメントありがとうございます!(・∀・)/


そうですねぇ、IE6はほんと・・・。(´Д`;)ねぇ

最近のNet Applicationsさんの調査結果によると、
IEのシェアが、けっこう減っているそうですね~。

7割きったとか。


IE8が実際にリリースされて、
また、復権できるものかしら。

このまま、他のブラウザに、
ずるずる侵攻されるのかしら。


このブログでは、調べてみたら次のようなシェアです。

 IE7:43%
 IE6:23%
 IE8:0.3%

 Firefox:32%

まだまだ、IE6も人気です。

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/187-bff1f75b
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて