You are here: Home » Illustrator » イラストレーターcs6『web用に保存』の解説

イラストレーターcs6『web用に保存』の解説

イラストレーターでweb用に画像を保存するときの解説です。

web用に保存はwebで使うデータを作る専用の保存方法で、webで使う事が最優先ですのでファイルサイズが小さくなります。web用ですので印刷用には使いません。

web用に保存ダイヤログ解説

ファイル→「web用に保存」で下のダイヤログが現れます。ショートカットキーは、command(Ctrl) + option(Alt) + shift + S キーです。

スクリーンショット 2014-12-14 0.02.58

上の画像に元画像、最適化、2アップとありますが基本的に2アップを選びます。すると二つ画像が表示されます。下の方に元画像とGIFとありますが、元画像が549kとあり、web用に保存作業のGIF画像にすることで2.656kまでファイルサイズが下がりました。このようにweb用に保存すると、web以外の目的に使わない前提で無駄を省くことでファイルサイズが小さくなります。逆に言うと、これをしない状態の画像は重い画像になります。

ファイル形式にGIFやPNG、JPEGを選べば、Ai形式とは違う「ベクタ画像」なります。「Ai」で一つ保存しておき、web用に使うなら別に「web用に保存」しましょう。

スポンサーリンク

プリセット

f2ebfcc3249fc29abae1503e0d385061

プリセットは設定値などを事前に決める事で、前もっての意味です。

59f38b1b73b789bc1bf88ad6b62b633f

プリセットのすぐ下に名前の項目がありますが、ここでGIF、JPEG、PNGなど、どの形式に保存するか決めます。一般的にイラストはGIF、写真などはJPEGが使われ、PNGはイラスト、写真両方使えますがブラウザによって表示できないことがあります。i-modeではPNGに対応してないので、ガラケーサイトを作る場合にはGIFを利用します。

ディザ

GIFとPNGの項目にディザとありますが、ディザは正しくは、ディザ法(誤差拡散法(Dither Method)、ディザリングとも言います。)意味は、限られた色数でそれ以上の色を表現する方法です。簡単に言うとぼかしです。GIFは256色の色数を持てますが、ディザの横の32、64、128の数字はここで使う色数です。最高で128色と言うことはフルカラー(16,777,216色)をそのまま描くことはできません。そこで、限られた色数を拡散配置することで違う色の表現をする方法です。

黒と白の色を組み合わせて中間色を表現する方法です。この場合、灰色を表現。

色をピクセルで拡散配置することで違う色を表現できるため色調豊か表現方法です。色数が少ないのでデータ量が小さくなのもの特徴です。漫画のスクリーントーンに似てるかもしれせん。

38364ad6bdd44b2e588961102a2601f0 中間色目安

ディザありとディザ無しを拡大し比べてみると違いがいまいちわからないかもしれませんが、ディザの方が滑らかな感じになると思います。画像によって不適合な場合もあるので、画像ごとに判断したほうが良いと思います。

名前の項目でGIFを選ぶとプリセットの項目もGIF用になります。

減色アルゴリズム

減色アルゴリズムとは、色数を減らす際に使用するアルゴリズムです。

34774f4a8d0d1074e1eed172e5c9c098

知覚的
人間の目に適した色を優先的に減色します。肉眼で見たときに知覚度が高いカラーを優先

特定
知覚的とほぼ同じ方法ですが、Webセーフカラーの保持を優先します。 一般的に、最もカラーの保全性に優れています。 特定が初期設定です。

割り付け
画像で最も多く使われているカラーを元に減色します。

制限(Web)
Webセーフカラーの216色を使用して減色します。

カスタム
予め保存していたテーブルを読み込み使用します。

モノクロ 2 階調、グレースケール、Mac OS、Windows設定済みのカラーパレットを使用します。

5ac365178af95cf62a5c84774e0b09fe

カラーは、減色アルゴリズムで使用する色を指定します。 カラー数を少なく抑えることで圧縮率を上げ、ファイルサイズを抑えることが出来る。

b0f71b2e31cfa1b173af6447410a444d

透明部分

透明部分にチェックを入れると、何も配置されていない色を透明化して配置することが出来ます。

cdc78600236376c2387d18c2e34dcb4c

マット
画像の背景色に色を設定できます。

スポイトツールカラー
スポイトツールで選択した色が適用される。

その他
その他をクリックすると、カラービッカーが開き、色を選択できます。

c3ae14fe354685f19dd09a41b3d870b4

インターレース

データの転送量に応じて、最初は横線で分割された画像を最初に素早く表示し、次第に完全に表示してゆく機能で、大きな画像を表示する際のストレスの軽減になります。

Webスナップ

webスナップは、画像の色にWebセーフカラー変更する場合の割合を指定できます。

カラーテーブル

7ceb660969678d3839a9ff16a7514fb9

減色アルゴリズムで選択されたカラーの一覧が表示される。

カラーのテーブルで、カラーの追加、削除、カラーの入れ替えなどが出来る。上の画像の文言の通りですね。

スポンサーリンク

スポンサーリンク

コメントを残す