illustratorで書き出した画像が1px大きくなる件

noteで書く
100×100pxで書き出したはずなのに、書き出した画像が101×100px…ドウシテ……
そんな経験ありますでしょうか? 1px余分が出てしまう原因としては、
書き出すオブジェクトまたはアートボードの座標が小数点を含んだ状態であることが考えられます。




1:アートボードを書き出しの場合

検証も兼ねて、座標が整数のみと小数点を含んだもの
2つのアートボードを用意しそれぞれ書き出してみます




「スクリーンで書き出し」で書き出し処理をした場合、
座標に小数点が含まれてる方は1px大きくなっています


【対策】

①web用に保存(従来)で保存する

アートボードの座標が小数点を含む位置であっても、
こちらで保存すると1pxの影響は受けないようです。
「アートボードサイズでクリップ」にチェックを入れるのを忘れずに

ただ、複数のアートボードをまとめての書き出しは出来ないので
1つのファイルからたくさんの枚数を書き出す際には不便です




②アートボードの座標を整数にする

アートボードツールでX軸Y軸ともに整数に修正します。
・変形パレットは[ウィンドウ]→[変形]で出せます



③ピクセルにスナップ

「ピクセルにスナップ」を設定しておくことで、
アートボードを複製し移動させた際、配置した座標に小数点が含むことがありません。
制作の途中でアートボードを新たに作成する際には便利なので、web制作時には
初めに設定されてるかチェックすると良いかと思います。
・設定場所は [表示]→[ピクセルにスナップ]にチェック




2:オブジェクトを書き出しの場合

オブジェクトを「アセットで書き出し」で書き出し処理をした場合、
座標に小数点が含まれてる方は1px大きくなっています




【対策】

①オブジェクトの座標を整数にする
変形パレット等で確認しながら、X軸Y軸ともに整数に修正します。
・変形パレットは[ウィンドウ]→[変形]で出せます



②ピクセルグリットに最適化
オブジェクトを選択した状態で右クリック→「ピクセルグリットに最適化」を選択
すると、自動で整数に修正してくれます。
※最適化されるオブジェクトには限りがあり、出来ないものも多々あるので注意



③ピクセルにスナップ
先述しましたアートボードの対策③同様、「ピクセルにスナップ」を設定しておくことで
配置したオブジェクトの座標に小数点が含むことがなくなります。
繰り返しになりますが、web制作時には初めに設定されてるかチェックすると良いかと思います。






「あれ?何故か1px大きいぞ」となった際には
座標がX軸Y軸共に整数であるか見直してみてください。



noteで書く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です