↓
↓
| Top > Photoshop講座 |
| GIFデータを作成 |
|
|
作成日:2002/08/05 更新日:----/--/-- |
|
|
|
まず、「GIF」はフルカラーデータを扱えないので、パレット形式に変えないといけません。 これは、最大256色のパレットを作って、そのパレットの色を使用した絵にするということです。 これは、Photoshopでは「インデックスカラー」といいます。 では始めに「インデックスカラー」について理解しましょう。 インデックスカラーとは、色パレットのインデックス(索引)を作成し、 それを絵のデータに当てはめていく手法です。 ■例 |
|
↓ |
こんな画像があったとしたら... |
|
↓ |
こんなパレットインデックスを生成して |
|
|
画像の各ドットに番号をふっていく |
|
これが「インデックスカラー」。 そしてこれを圧縮したフォーマットが「GIF」です。 ※ちなみに圧縮方式をざっくりと説明すると、 上図を使用した場合、 「1が1個」「2が1個」「1が2個」「2が１個」「3が1個」「1が2個」... という感じに連続したカラーをひとまとめにする感じです。 |
|
※これは読み飛ばしていただいてもかまいません。 「GIF」を良く知りたい方のみお読みください。 いったい「256色」の「256」という数値はどういう根拠のある数値なのでしょうか？ これはマシン語に依存します。 通常コンピュータが理解できるプログラムは「0」か「1」のみです。 この「0」と「1」を大量に組み合わせてプログラムが動いているわけです。 ２進数の原理ですね。 この１つの単位を「bit(ビット)」といいます。 さらにこの1ビットを８つ集めたプログラム上での最小単位を「1byte(バイト)」といいます。 ２進数で表すと8ビット=1バイト=「11111111」です。これは１０進数では「255」です。 これに「00000000」、すなわち１０進数でいうところの「0」を合わせて 「256」通りの表現が可能なわけです。 これが「256」色の根拠となります。 ムダ知識ですね(笑) でも知っておくと良いこともあります。 さて、インデックスカラーで使用するときは「最大」256色ですが もっと少ない色数で表現する場合があります。 この場合「2」「4」「8」「16」「32」「64」「128」といった色数がお勧めです。 それは何故か？ 「2」という色数はプログラム上で「1」で表され、「4」色数は「11」で表されます。 このまま「8」は「111」、「16」は「1111」、「32」は「11111」、「64」は「111111」、「128」は「1111111」 という具合で表されます。 １桁ずつ増えていっていますね。 ではたとえば「95」色数ではどうでしょう？ これは「1011110」です。 おや？お気づきになられましたか？「128」色とデータサイズが同じですよね。 両方とも7桁です。 同じデータ量を使うならそりゃそのデータ量のMAX使ったほうがよいでしょう。 95色にするなら128色使う。 そりゃキレイなほうがよいですものね（笑） |
 |
この画像を「GIF」で保存しようと思います。 まず「インデックスカラー」にするためには...。 |
|
1.チャンネルの状態 まず、初期状態(RGBカラー)であった場合、 チャンネルは通常のRGB,レッド,グリーン,ブルーのみにしておきます。  ※余計なチャンネルがある場合、JPEGだと保存することが出来ないのですが GIFの場合は、保存できてしまいます。 しかし、そのチャンネルを透過で使用してしまうこと(version)があるので、 余計なものは必ず消しておきましょう。 |
|
2.1.不透明GIFを作成する場合のレイヤー |
 |
レイヤーは「背景」のみにしておきます。 |
|
2.2.透過GIFを作成するときのレイヤー(ver5.5以降をお使いの方) 「GIF」では「透明色」を扱うことが出来ます。 といっても半透明のグラデーションなどを扱えるわけではありません。 最大256色パレットの中に「透明色」という色に設定することによって 透過部分のある絵を作成することができるのです。 |
 |
 |
「背景」ではないレイヤーを用意し、 透過したい部分を、透明指定にしておく。 |
|
2.3.透過GIFを作成するときのレイヤー(ver5.0以前をお使いの方) |
 |
 |
レイヤーを「背景」のみにし、 透過したい部分を使用してない色で 塗りつぶしておきます。 |
|
「5.0」以前をお使いの方にはこれ以降の、透明の説明は当てはまりません。 普通にインデックスカラーにした後は、 メニューバーから「ファイル＞データ書き出し＞GIF89a書き出し...」を選択して 「透明色(さきほど塗りつぶした未使用のカラー)」をスポイトツールで選択して保存してください。 |
|
では実際にインデックスカラーにしましょう。 ※ここから先の画像はver7.0の画像です。 |
まず、メニューバーから「イメージ＞モード＞インデックスカラー」を選択します。 もしこのときレイヤーが複数あるようでしたら、数のようなメッセージが表示されます。  これは「OK」を選択してください。（でないと、先に進めません。） すると下図のようなウィンドウが表示されます。 では各項目の説明をしていきましょう。  |
|
参照画像 (JPEG標準)   |
■使用中の色を全て割り付ける これは画像で使用している全ての色を使用します。 256以下の色数の場合はすべての色が有効になります。 (ディザを指定する必要はないですね。) ■システム(Machintosh)、システム(Windows) 各々のOSのシステムカラーを使用して減色します。  ■Web Webで一般的に使用するカラー(216色)使用します。 WebでMacでもWindowsでも同じように色が表現できるのが魅力。  ■RGB カラーを均等に割り付ける カラースペクトルの色を均等に割り付けたパレットを使用します。  ■ローカルorマスター ローカルは現在の、マスターはImageReadyで作成したパレットです。 ■知覚的 現在の画像で使用されているカラーを使って、パレットを生成して使用します。 ■特定 知覚的に近いですが、Webカラーを使用するようにパレットが生成されます。 Webで画像を使用するにはこれがいいかもしれないですね。 ■割り付け 現在の画像で使用されているカラーを使って、パレットを生成して使用します。 多く使用している色味を優先的に使用するようです。  ■カスタム 自分オリジナルのパレットを読み込んで使用します。 ■前回と同じパレットを使う 前回使用したパレットを使用します。 |
|
「表示色」は使用する色数です。256以下をセレクト。 「透明」チェックボックスにチェックを入れると透過色を使用できます。 元の画像に透過色があっても、これにチェック入れないと反映されません。 この透明色は256色パレット内の１色を使用します。 「強制」は、指定カラーを強制的にパレットに含ませます。 |
|
通常、RGBで編集していたら、「アンチエイリアス」といって、 画像のエッジを滑らかにするためのぼかしが入っています。 「透明」画像を扱うときはこの「アンチエイリアス」部分が 半透明になっていたりします。 この半透明部分は不透明で表されることになるので、その色を指定するのが「マット」です。 ※「透明」部分のある画像なのに、「透明」チェックボックスにチェックが入ってないと 透明部分がここで指定された色で塗りつぶされます。 |
|
もともとRGBフルカラーで作成した画像の場合、 当然パレット内に全ての色が入るとは限りません。 フルカラーでは16777215色(透明色含まず)使用できますが、パレットでは256色しか使用できませんから。 なので、256色で表すために、パレット内の色を組み合わせて色を表現するわけですが その組み合わせ方の指定をこの「ディザ」で行います。 □なし 補間しません。ポスタリゼーションな画像になります。 □誤差拡散法 通常これを使用するとよいと思います。「同一色の保持」にチェックを入れておくと パレット内の色は補間で表現しようとしません。 □パターン 正方形なパターンで補間します。 □ノイズ ヘルプによるとスライス間の補間をするのによいとか。 使用したことないのでわかりませんが(苦笑)。 |
|
イロイロ長々と書いてきましたが、 これらの設定をしたら「OK」を押してインデックスカラー完成です！ |
 |
これは「透明アリ」、「誤差拡散法75%」で 「マットなし」の「特定」「32色」の画像です。 ※透明がわかりやすいように、背景に色を付けてみました |
|
では実際にGIFで保存しましょう。 メニューから「ファイル＞別名で保存」を選択します。 開いたセーブウィンドウの「ファイル形式」で「CompuServe GIF (*.GIF)」を選択してセーブします。 ファイル名も付けて「保存(S)」をクリック！ オプションで「標準」か「インターレース」の選択を迫られますが お好みで。インターレースはWeb上で表示するときにぼかしがかかりながら表示する方法です。 こっちはちょっと、データ量が多くなっちゃいますけどね。  |
|
メニューから「ファイル＞Web 用に保存」でもGIF画像を作成することが出来ます。 各項目は先ほどのインデックスカラーの説明が当てはまるので、お試しください。 こちらを使う利点は、「画像サイズ」などを確認しながら 色数を調整できるという点でしょうか。 あと、エセ半透明が作りやすいですね。 |
|
■エセ半透明作成法。 まず、下図のような画像を用意します。  メニューから「ファイル＞Web 用に保存」を選択します。 すると専用ウィンドウが開きますので、調整していきましょう。  上図が今回の調整値です。 上記でもう書いた部分は省いて、ポイントだけ押さえておきましょう。 □透明部分 これにチェックを入れておかないとエセ半透明はできないです（笑） □適用量 どのくらいのディザ(拡散法)を有効にするかということです。 「0」にするとディザがかかりません。「100」にするとグラデーションにディザがかかります。 透明部分にも適用されます。 ※実際、触ってみた方がわかりやすいと思います。 これが出来た画像です。 |
 |
透明がわかりやすいように、背景に色を付けてみました。 あまり、キレイとは言いがたいですが、 点を拡散することによって、エセ半透明の出来上がりです。 しかし・・・やっぱり「GIF」ではイマイチかも。 |
|
Web上ではやはりデータ量を小さくしておきたいものです。 表示が速くなるので、来客していただいた方にも ストレスをあたえませんものね。 GIFはインデックス方式なので、色数を減らせば データ量は小さくなります。 そしてできれば「2」、「4」、「8」、「16」、「32」、「64」、「128」、「256」 単位が望ましい。 また、画像の描き方でもデータ量を小さくすることが出来ます。 では、効率よく減色＆データ量を小さくする方法を何点かご紹介します。 |
|
１．RGBで作成するときから似通った色を使用する。 これは基本です。 最初からGIFで保存する予定があれば、 最初からある程度絞った色味で色を塗ることをお勧めします。 あんまりカラフルな画像はインデックスカラーは苦手です。 たとえば、上記の説明で使用している「女の子の絵」も 「青色」「緑色」「肌色」と、色味が絞られてるともいえるでしょう。 |
|
982 バイト(１２色) |
348 バイト(２色) |
|
 |
 |
|
２．グラデーションはあまり使用しない。 これも基本です。 グラデーションを多用した画像は「GIF」には向きません。 むしろ「JPEG」が得意とする画像です。 「GIF」では汚いですし、データ量も大きくなります。 「GIF」でなくてはならない、という制約がある画像であれば グラデーションは多用しないことです。 |
|
1.53 キロバイト(２色) |
3.81 キロバイト(１６色) |
796 バイト(JPEG標準) -Web用に保存- |
|
 |
 |
 |
|
３．同じ色は同じ場所にまとめておく。 グラデーションではなくても、同系色の色が多くても メッシュ状に配置されてるとデータ量は大きくなってしまいます。 同じ色は固めておいておく方がよいでしょう。 |
|
1.06 キロバイト(２色) |
514 バイト(２色) |
|
 |
 |
|
４．縦じまにするくらいなら横じまに！ 画像の圧縮方法の関係上、縦に連続した色より、横に連続した色のほうが 圧倒的に圧縮率が高いため、かなりデータ量が小さくなります。 |
|
1.06 キロバイト(２色) |
348 バイト(２色) |
|
 |
 |
|
５．画像サイズそのものを小さく やっぱり、大きな画像より、小さい画像の方が データ量は小さくなります。 |
|
348 バイト(２色) |
172 バイト(２色) |
|
 |
 |
|
他にも方法はあるかもしれませんが とりあえず管理人が把握してる方法です。 他にもよい方法があれば募集中！！ |
|
|
|