こんにちは、つしまです。
今回は、Illustratorを使っていて画像書き出し時に1pxサイズが大きくなっていたり、座標に小数点が入っていて正確に画像を書き出せない時の対処法をまとめます。検索でいろいろな記事を見てみましたが、定規を使うことで簡単に直すことができました。
Illustratorで正確にデザインする際に欠かせない「定規」ですが、2種類の違いを理解できていなかったのでそれも踏まえてまとめていこうと思います。
定規の表示の仕方
まず定規を表示させます。
上部メニューから[表示]→[定規]→[定規を表示]で表示できます。（ショートカット：⌘＋R）
定規は「ウィンドウ定規」と「アートボード定規」の2種類あります。
定規を表示しておくと、図形などを作成する際に大きさや位置を把握する目安になります。
また、定規の上をクリックしてドラッグすると目印となるガイドを引き出すことができ、定規の上で右クリックすると単位の変更をすることもできます。
「ウィンドウ定規」とは
「ウィンドウ定規」は、ファイルに配置されている”1枚目のアートボード”の左上が座標の原点位置（0,0）になります。2・3枚目のアートボードを選択しても座標の原点位置は変わりません。
デフォルトではこの「ウィンドウ定規」が設定されています。
「アートボード定規」とは
「アートボード定規」はそれぞれのアートボードの左上が座標の原点位置（0,0）になります。
選択したアートボードの左上が座標の原点位置（0,0）に変更されるので、複数のアートボードを使って作業をするときに便利です。
一見どちらも同じように見えますが、アートボード定規が編集中のアートボードの左上隅が原点になるのに対し、ウィンドウ定規は常に一枚目のアートボードの左上隅が原点になるところが異なります。
定規の変更方法
定規を変更するやり方は２通りあります。
- 上部メニューから[表示]→[定規]→[アートボード（orウィンドウ）定規に変更]
- 定規の上で右クリック→[アートボード（orウィンドウ）定規に変更]
web用画像を書き出す際の注意点
アートボードの座標に変な小数点が入っているまま画像を書き出してしまうと、書き出した画像サイズが変わってしまう（元のサイズより1px大きくなってしまう）場合があります。
なので、画像を書き出す際には「ウィンドウ定規」で座標が整数になっているかチェックしてから書き出すようにします。
アートボード定規の座標（0,0）で作成したとしても「ウィンドウ定規」に変更すると座標が0.5ずれてしまうケースがあります。
既存データの座標を原点（0,0）にする方法
座標がずれてしまっていたら、定規左上（縦軸と横軸の交点）をダブルクリックすれば（0,0）になるので、簡単に小数点を消すことができます。
さいごに
Illustratorで定規を表示させたり、活用するための方法について紹介しました。
オブジェクトを作成したり配置するときに、そのサイズや位置を把握するのに役立てたり、作業内容にあった定規を使って正確なデザインをするよう心がけたいです。
