デザインTIPS

【無料DL】Illustratorでjpgに書き出すと、1pxズレる問題を5秒で解決します。

Illustratorでjpgに書き出すと、1pxズレる問題を5秒で解決します。
ヤマダ

どうも!通販デザイナーのヤマダカイト(@slash_kaito)です。

Illustratorでバナーを作り、一括書き出ししようとすると起こるのが「謎の余白」。

今回はそれを解決していきます。

Illustratorの1pxズレる問題は、なぜ起きる?

バナーを作ってjpg書き出しした時に起きる謎の余白…!

ズレ見本最下部に余白ができてしまっている・・・(クリックで拡大できます)

急ぎの時や大量に書き出さないといけない時、本当焦るしイライラしますよね。

なぜこういった現象が起きるのでしょう。実は、座標やサイズに1px以下の数値が設定されているとこうなります。寄りで見てみましょう。

ヨリ

ラインのキワの部分がぼやけてしまっていますよね。これが、整数ではなく小数点以下のサイズが設定されている状態です。こういった時に、1pxの余白ができてしまいます。

何度これにハマったことか・・・。

1pxのズレを直す方法

イラストレータ-CC2017以降からは、解決するのがカンタンになりました。

①まず、ファイル>新規を選択。

ファイル>新規

②webを選択し、幅と高さを指定するだけ。

設定

③余裕があれば、詳細設定からプレビューモードをピクセルに変更しておきましょう。ビデオ定規もあればなおよし。

食べ残し

たったこれだけ。

過去のIllustratorに比べれば、涙が出そうなほどカンタンになりました・・・。

これで、オブジェクトのサイズを変更しても・・・

吸着

ピクセルグリットにピタッと吸着してくれるので、ズレる心配なし!

ピタッとくっつくので気持ちいい~!

既にもともとあるファイルの場合は、新規でファイルを作りなおしオブジェクトをコピーすればOKです。

※2018年4月30日追記
ドキュメント設定によって余白ができてしまう場合もあるようです。その場合は、ファイル>ドキュメント設定から裁ち落としの部分を0pxにします。(天地左右全て)裁ち落としピクセルプレビューで直らなかった方はこちらもお試しください。

よく使うサイズはテンプレート登録しておくが吉!

新規からファイル作ってもいいんですが、よく使うサイズなんかはテンプレートに登録しておくと楽です。

例えば僕であれば「商品登録用の画像セット」とか「新規LP作成用」とか「ASP登録用バナー」とかでフォーマットを作っています。

これを作っておくことで、地味に作業時間が短縮されます。

地味に作業時間が短縮されると、その分ほかのことができるということ!

本日のまとめ

今回は、web用の画像書き出しで1pxズレる問題についての話でした。

要点としては、

  • 新規ファイルはwebを選択
  • あらかじめよく使うサイズをテンプレートに登録しておく
  • 印刷用もテンプレートを登録しておく

の3つです!

少しでも作業を効率化することで、よりよいデザインの制作に注力したり、残業を減らすことができます。

その他、デザイナーのお役立ち記事はこちら。

ヤマダ

通販デザイナーのヤマダカイト(@slash_kaito)でした!それではまた。

この記事が気に入ったら
いいね ! をお願いします

Twitterでもデザインや日々のことをつぶやいています。
ABOUT ME
ヤマダカイト
EC系のデザイナー&マネジャー。通販検定1級。リンカイ-デザインという屋号でデザインしたりブログを書いています。2021年4月に東京→長崎移住予定。休日は息子とスプラトゥーンしてます。 詳しいプロフィールはこちら
収入を増やしたい・デザイナーとしてレベルアップしたいあなたに
デザイナー副業・複業の始め方まとめ

もっと収入を増やしたい・デザイナーとしてレベルアップしたい、というあなたは副業がおすすめ。経験をもとに、副業・複業を始めるのに必要なモノ・コト・考え方についてご紹介しています。

 

COMMENT

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