Illustratorでバナーを作り、一括書き出ししようとすると起こるのが「謎の余白」。
今回はそれを解決していきます。
Illustratorの1pxズレる問題は、なぜ起きる?
バナーを作ってjpg書き出しした時に起きる謎の余白…!
急ぎの時や大量に書き出さないといけない時、本当焦るしイライラしますよね。
なぜこういった現象が起きるのでしょう。実は、座標やサイズに1px以下の数値が設定されているとこうなります。寄りで見てみましょう。
ラインのキワの部分がぼやけてしまっていますよね。これが、整数ではなく小数点以下のサイズが設定されている状態です。こういった時に、1pxの余白ができてしまいます。
何度これにハマったことか・・・。
1pxのズレを直す方法
イラストレータ-CC2017以降からは、解決するのがカンタンになりました。
①まず、ファイル>新規を選択。
②webを選択し、幅と高さを指定するだけ。
③余裕があれば、詳細設定からプレビューモードをピクセルに変更しておきましょう。ビデオ定規もあればなおよし。
たったこれだけ。
過去のIllustratorに比べれば、涙が出そうなほどカンタンになりました・・・。
これで、オブジェクトのサイズを変更しても・・・
ピクセルグリットにピタッと吸着してくれるので、ズレる心配なし!
ピタッとくっつくので気持ちいい~!
既にもともとあるファイルの場合は、新規でファイルを作りなおしオブジェクトをコピーすればOKです。
ドキュメント設定によって余白ができてしまう場合もあるようです。その場合は、ファイル>ドキュメント設定から裁ち落としの部分を0pxにします。(天地左右全て)

よく使うサイズはテンプレート登録しておくが吉!
新規からファイル作ってもいいんですが、よく使うサイズなんかはテンプレートに登録しておくと楽です。
例えば僕であれば「商品登録用の画像セット」とか「新規LP作成用」とか「ASP登録用バナー」とかでフォーマットを作っています。
これを作っておくことで、地味に作業時間が短縮されます。
地味に作業時間が短縮されると、その分ほかのことができるということ!
本日のまとめ
今回は、web用の画像書き出しで1pxズレる問題についての話でした。
要点としては、
- 新規ファイルはwebを選択
- あらかじめよく使うサイズをテンプレートに登録しておく
- 印刷用もテンプレートを登録しておく
の3つです!
少しでも作業を効率化することで、よりよいデザインの制作に注力したり、残業を減らすことができます。
その他、デザイナーのお役立ち記事はこちら。
コメント