2：画像の種類と減色・透過を学ぼう！ ◆◇知らないとカッコ悪いサイトになってしまうかも？◇◆
2：画像の種類と減色・透過を学ぼう！ |
|
 |
超カンタンGIFアニメ！ |
WEB上の画像には主に2種類あります。JPEGとGIFです。どちらの形式で保存するかはその画像の種類によります。このGIFアニメ講座ではもちろんGIF形式を使います。
JPEG形式に向いているもの（写真など）
ジェイペグ・Joint Photographic Expert Group
1670万色のフルカラーが使える。
圧縮すると画像が劣化し、にじんだような汚れが目立つ。
単一色でべた塗りされた広い部分は、劣化によるにじみが目立つ。
写真のような階調が多い画像に向く。
GIF形式に向いているもの（イラストなど）
ジフ・ギフ・Graphics Interchange Format
最大256色までしか使えない。
べた塗りされた広い部分もにじみがなく、美しい。
透明色が使える。
アニメーションが作れる。
圧縮による劣化が少ない。
さらに別のファイル形式を学びたい方は、フォトショップ道場7日目「画像ファイルの種類いろいろ」を見てみてくださいね☆
「ジフ」と読むか「ギフ」と読むかはどっちでもいいんですが、アメリカでは「ギフ」と発音することが多く、日本では「ジフ」が一般的です。
わざと「ギフ」と読んで、誰かに「それジフだよ」と笑われたら、「あれ？ アメリカではみんなギフって発音してたけどなあ」と遊んでみたりするのは……ちょっとイジワルですね。
ウェブ用になるべく軽く作るという意味で、減色処理は非常に重要です。特にアニメでは減色しないと重い画像になってしまいます。
画像A
GIF画像
重さ：27キロバイト
256色で保存
画像B
GIF画像
重さ：12キロバイト
32色で保存
まずは上の画像を見てください。画像Ａ、画像Ｂの画像はほとんど同じように見えますが、重さが2倍以上も違います。それは使用している色の数が違うからなんです。では画像を軽くする方法を学びましょう。
最適化パレット
【ウィンドウ→最適化】で表示してください 。
1……「ファイル形式選択」のポップアップです。GIF形式、JPEG形式を選ぶことができます。
2……GIF画像のパレットを設定できます。「知覚的・特定・割付・WEB…・」と項目が並んでいます。以下の4種類が重要です。
・知覚的……人間の眼に自然に見えるようにした色のパレット
・特定……主にWEBで使われる色に重点を置いたパレット
・割付……画像で最も多く使われている色を元に作られたパレット
・Web……Webで使われる216色のパレット
画像を見ながら、どれか一つ適切なものを選びます。自分がいいと思ったものでOKです。
3……GIF画像のパレットを設定できます。「ディザなし・誤差拡散法・パターン・ノイズ」と項目が並んでいます。これも画像を見ながら、どれか一つ適切なものを選びます。
4……GIF画像で使用する色の数を選べます。
5……GIF画像で背景を透明にする場合選びます。
6……マットです。後に学ぶ「透過処理」で使用します。
カラーテーブルで色を見る
【ウィンドウ→カラーテーブル】を表示します。このカラーテーブルを見ながら、最適化パレットの4の部分「カラー」という所で色数「2、4、8、16、32、64、120、256」を選びます。赤い□で囲まれた部分が色数です。
この数値を変化させてみると、カラーテーブルの色が増えたり減ったりしますね。
小さい数字を選ぶと画像が軽くなりますが、その分荒い画像になります。目で見てこの辺でギリギリというところまで色を減らしてください。
ImageReadyの画面は、最適化、2アップ、4アップがありますから、使いやすい画面にして、比べてみてください。画面についてはGIFアニメ講座1をご覧下さい。
色の中には丸い印がついたものがあります。上の図でいうと、白い色に白い丸がついています。これはWebセーフティーカラー（216色）です。Web上で画像を見る場合、セーフティーカラーを選んでおくと極端に違った色で表示されるのを防ぐことができます。
減色でなくしたくない色をロックする
またどうしても、この色だけははずせない！ という色があるのに、減色した段階で自動的に、その色が削除されてしまうことがありますね。
そんな場合はロックをします。まずはどうしても必要な色（この場合は黄色）をクリックします。その色の周りが白い線で縁取られました。
その状態で、赤い丸の部分の鍵のマークのアイコンをクリックします。黄色の四角の右下に小さな四角形がつきました。
この色はロックされている状態なので、最適化パレットの「カラー」で色を減らしても削除されなくなるのです。
Photoshopでも保存の段階で減色処理を行うことができます。やり方は同じなので、ぜひ覚えておいてください。
透過処理をせずにそのまま背景を透明にしたGIF画像。ハローが出てしまっている。
GIF画像は背景を透明化できるところが便利なのですが、やり方を間違えると素人っぽさ爆発の情けない画像になってしまいます。
その最たるものがハローです。ハローとは白または黒っぽい縁取りができてしまうGIF画像です。
ハローが出てしまっている画像をピンク色の背景色のサイトに置くとこんな感じに周りに黒いふちが出来ています。
|
背景がピンク（#FF99CC）のテーブルに置いてみると、黒っぽいふちどりができている。
ちなみにハローとは「後光」という意味です。画像の周りに白いギザギザが出てしまうんですね（もちろんわざと目立つように縁取っている場合はこれでいいんですが…）。これは画像の色とHTMLの色のわずかな差が生じて、画像の周りに枠が出来てしまうからです。
これを防ぐには2種類の方法があります。
【1】ぼかしが美しく見えるJPEGで保存すること。
【2】GIFで透過処理をすることです。
背景をピンク（#FF99CC）で塗って、JPEGで保存した画像。
ただ、JPEGでは透過できませんし、背景にWebセーフティーカラーを選んでも、微妙に色がずれてしまうことがあります。
|
JPEGの画像を背景色ピンク（#FF99CC）のテーブルに置いた。わずかに色の違いが見られる。
うっすらとした四角形が見えてしまっていますね。
最適化パレットでマットをクリック
ハローを防ぐにはマットという機能を使います。先ほどの最適化パレットを見てください。マットと書かれている部分をクリックします。
言うまでもないことですが、このパレットの「透明部分」というところにチェックが入ってないと、背景が透明化されませんよ。
カラーピッカーで背景色のピンク（#FF99CC）を選ぶ
すると、左のようなカラーピッカーが表示されます。この中から、ＨＰの背景色を選びます。直接色をクリックしてもいいですし、右下の□の部分に数値を入れてもOKです。
左下の「Webセーフカラーのみに制」にチェックを入れるのを忘れないでくださいね。
背景色ピンク（#FF99CC）でマットを選び、透過処理がされたGIF画像。
こんな感じに修正されました。ライオンの周りに、先ほど選択した色、ピンク（#FF99CC）で縁取りが出来ましたね。
こうやって自動的に縁取ってくれることによって、ウェブ上で見たときに、自然に背景になじんでくれるのです。
【注】フォトショップ7.0からは、透明化の機能がさらに強化され、ドロップシャドウも自動的に美しく透明化出来るようになっていますから、7.0以上をお持ちの方は以下の方法を使う必要はありません。
|
JPEGの画像を背景色ピンク（#FF99CC）のテーブルに置いた。上手く背景とマッチしている。
減色と透過についてはもう大丈夫！ 「早くGIFアニメ作らせろ！」という声が聞こえてきそうですから次回からは実際にGIFアニメに挑戦しましょう。
|
|
|
超カンタンGIFアニメ！ |
「幻想画廊」 (c) Maria Garcia, 2002-2008
