Illustrator〜1ピクセル単位で正しく保存する

Illustratorの1pxのサイズのずれ

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

主な原因

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

解決方法

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

）

検証

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

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

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

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

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

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