【 更新 】おすすめ記事はこちら

【Illustrator】1pxズレて書き出されるときは「ピクセルグリッドに最適化」

作成したイラストやアイコンが「1px大きい」「1px小さい」状態で書き出された!ということはありませんか。予定のサイズから1pxズレると、状況次第では細かい設定が必要になりますよね。

対処法はいくつかありますが、今まで悩まされてきた身としては「ピクセルグリッドに最適化」が一番手っ取り早いと感じました。

ただし、データがやや大きくなる場合があります。サイズ制限があるときは他の方法にするか、後から画像圧縮ツールで調整することをおすすめします。

1pxズレたファイルとは

イラストなどをアートボードに作成します。分かりやすくするため、縦と横どちらかもしくは両方を切りのいい数値にします。

プロパティでサイズ調整

アセットの書き出しパネルにドラッグ&ドロップします。

アセットの書き出しパネル

拡大縮小は任意で、形式はJPEGもしくはPNGで書き出します。

拡大縮小と形式を設定

画像のプロパティを見ると幅は「301px」。「300px」に設定していたので「1pxズレて」書き出されたことが分かります。

画像の大きさを確認

ピクセルグリッドに最適化

先ほどのアートボードに戻ります。イラストなどを選択した状態で右クリック。「ピクセルグリッドに最適化」を適用。

ピクセルグリッドに最適化

書き出して大きさを確認

アセットの書き出しパネルから書き出します。

アセットの書き出しパネル

画像のプロパティを見ると幅が「300px」になりました。

画像の大きさを再確認

データサイズを確認

念のため、データサイズを最適化する前と後で比較します。

最適化前のデータサイズ
最適化後のデータサイズ

サイズが「0.01KB」増えました。画像の大きさが大きければ、データサイズの増え方も変わります。書き出したあとは、画像を右クリック>プロパティで内容を確認してください。

データサイズを圧縮するときは

圧縮するときは、オンラインツールの「TinyPNG」が便利。「Drop your…」の囲みに画像をドラッグ&ドロップするだけでOK。データサイズ、圧縮率が表示される親切設計です。

TinyPNG

これで「1pxのズレ」もスマートに対処できますね。いくつか方法を試してきましたが、そのうちの9割が「ピクセルグリッドに最適化」で解決できました。

データサイズが気になるときは「TinyPNG」を使うなど、状況に応じて調整してくださいね。