解 説

Illustratorの1pxのサイズのずれ

Illustratorでイラストを作成してpngやgif形式にして保存する場合に、1pxまたは2pxサイズが大きくなることがしばしばあります。
それがシンプルな四角形であっても1pxまたは2pxの誤差がでます。
この原因は作成しているオブジェクトのx,y座標や幅と高さに1px以下の少数点が含まれているときに発生します。または線の位置の問題もあります。
Webの素材を作成するときには、最低単位を1pxにしないと保存の時にサイズのズレが生じたり、エッジに滲みが生じる原因になります。

主な原因

  • オブジェクトのx,y座標や幅と高さに1px以下の少数点が含まれているとき
  • 線の位置が「線を中央に揃える」または「線を外側に揃える」になっている

解決方法

  1. 新規ドキュメント作成時に「新規オブジェクトをピクセルグリッドに整合」はオフにします
  2. イラスト作成するときには「表示」を「ピクセルビュー」にします
  3. オブジェクトのx,y座標や幅と高さに1px以下の少数点が含まれていないか確認をします
  4. 変形パネルにも「ピクセルグリッドに整合」のチェックがありますので外しておきます
  5. 線パネルで線の位置を「内側」に変更します

検証

Illustrator CS6で検証
新規ドキュメント作成時に「新規オブジェクトをピクセルグリッドに整合」はオフにします。ここにチェックが入っていると小数点以下の単位になっても変更できません。
pix1

まずは、「表示」を「ピクセルビュー」にします。そうすることでWeb用に保存される状態を確認しながら作成することができます。
pix2

オブジェクトを描いたら、線パネルで線の位置を「内側」に変更します。変更はオブジェクトを描いてからでないとできません。それでも動かない場合は線と塗りのパレットを入れ替えてみると動く場合があります。(ショートカットキーは「x」)
pix3

変形パネルで座標に少数点が入ってないことを確認します。少数点があれば少数点部分は切り捨てるなどしてなくします。下の「ピクセルグリッドに整合」にチェックが入っていると調整してもまたもとに戻ってしまいます。
pix6

少数点を含んだオブジェクトを保存しようとした場合には次のようにズレが生じます。
pix7

線の位置が「内側」になってない場合にもズレが生じます。
pix8
pix9