Illustratorでピクセルベースで書き出す際に、ズレないようにする設定方法
- スキルアップ
- 2021/7/29
- 2021/7/29
Adobe 「Illustrator」でピクセルに合わせて書き出す際に、ピクセルに合わせた設定をしないとズレたりして書き出されてしまいます。
Webで使用する画像などは1ピクセルのズレが致命的となるので、ピクセルに合わせたIllustratorの設定方法をご紹介します。
書き出し設定をピクセルで合わせる方法うぇｂ
環境設定の設定値
Illustratorのメニューから『編集』内にある『環境設定』から『一般』を開きます。
「キー入力」の値を「1px」に設定します。
次に同じ『環境設定』から『単位』を開きます。
単位の表示が「ピクセル」以外になっていたらすべて「ピクセル」に設定します。
表示メニューの設定
Illustratorのメニューから『表示』を選択して、下記の通り『ピクセルプレビュー』を選択します。
続いて同じ『表示』メニュー内の『ピクセルにスナップ』を選択します。
これでIllustratorのピクセルに合わせた書き出し設定は完了です。
後はこの設定で素材となるデータを作成します。
オブジェクトの位置
素材を作成する際は配置したオブジェクトの「サイズ」と「位置」を注意してください。
具体的にはオブジェクトを配置した際に、X軸とY軸が整数になっていない時があります。
上記のように素材を選択した際に「X軸」と「Y軸」が「85.1467」などの小数点以下の単位になっている場合は、「1px」単位になるように整数として入力し直して調整してください。
オブジェクトのサイズも同様です。
オブジェクトの線
また、オブジェクトの「線の位置」も「内側」もしくは「外側」に設定します。
線の位置が「線を中央に揃える」となっていると、ピクセルの内側・外側にそれぞれ線がはみ出した状態となるため、必ず線を「内側」もしくは「外側」に揃えるの設定にします。
