IllustratorでWEB用に書き出した画像サイズがズレたときの対策とは！？

こんにちは
今回はIllustratorの話になります。

本文と全く関係無いのですが、2014〜2015年のIllustratorのスプラッシュスクリーンって大くせだったように思うのは僕だけでしょうか？

※スプラッシュスクリーンは、コンピューターのアプリケーション起動処理中に画像を表示する技術を指すコンピュータ用語です。

2014年のスプラッシュスクリーン

2015年

やんわりと感じる恐怖……。

本題に入ります。
Illustratorから書き出した画像が1pixel大きくなることってありませんか？

上図になる想定が下図のようになります。

見ただけでは何かよく分かりませんので並べてみます。

右側が1pixel大きい状態です。
50×50pixelで画像書き出ししたのに51×50pixelになってる現象です。

微妙な違いです。本当に微妙な違いなんですが、急ぎの時、大量に書き出さないといけない時はイライラします！
気付かずに進めていた時なんて大変です。
ずっと１pixelズレたままですから、ズレが積み重なるわけです。
最後の最後で想定していた通りにならないこともあります。
判明した時なんて、あれ？　え？　うそ⁉︎　え？っという言葉にならない感情に襲われます。
書き出した画像がにじむのも腹立ちます。
分かる人には分かりみが深いはずです。

結論から言いますと、アートボードのサイズや座標に小数点が含まれていると、WEB用に画像を書き出した時に、画像サイズが想定より1pixel大きくなるんです。
つまり下図のことです。

アートボードのサイズ・座標から小数点をなくすと、きれいに書き出せます。

アートボートがひとつで、そのまま書き出す場合は「アートボードサイズをクリップ」にチェックを入れるとサイズがズレることもないらしいです。

CC2017以降からは、新規ファイルを作成で「Web」を選択して幅と高さを指定するだけでも1pixelズレを防ぐこともできます。

是非ご活用を！
ではまた。