公開日: 更新日:

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

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

紙からスタートしてwebデザインもやり始めるようになったけど、なんか色々不都合があるな…?と思われているデザイナーさんへ。
どうも!ヤマダカイト(@slash_kaito)です。

バナー画像やLPの作成は、断然Photoshopの使用がデファクトスタンダードです。

しかし「紙もwebもやる」という方は、利便性や操作性・慣れの部分からいってもIllustratorを使いますよね。

僕も紙から入ったので、基本的にIllustratorを使用しています。

そんな時代の流れをくんで、Illustratorでweb制作がしやすいように徐々に改善されてきてはいます。

ですが、普通に使っているとやっぱり不具合がでてきます。

特にjpg書き出しすると、なぜか余白ができてしまう。

今回はそんなお話。

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

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

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

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

なぜこういった現象が起きるのでしょう。

実は、座標やサイズに1px以下の数値が設定されているとこうなります。

寄りで見てみましょう。

ヨリ

ラインのキワの部分がぼやけてしまっていますよね。

これが、整数ではなく小数点以下のサイズが設定されている状態です。

こういった時に、1pxの余白ができてしまいます。

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

1pxのズレを直す方法

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

 

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

ファイル>新規

 

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

設定

 

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

食べ残し

たったこれだけ。

 

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

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

吸着

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

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

 

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

 

※2018年4月30日追記
ドキュメント設定によって余白ができてしまう場合もあるようです。その場合は、ファイル>ドキュメント設定から裁ち落としの部分を0pxにします。(天地左右全て)裁ち落とし

ピクセルプレビューで直らなかった方はこちらもお試しください。

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

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

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

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

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

一応、上記3つのテンプレートをダウンロードできます。

ご自由にカスタマイズしてお使いください。

「ファイル>テンプレートから新規」で表示されるフォルダに置いておくと便利です。

MacとWinで場所違うかもしれませんが、恐らく「プログラム/Adobe/IllustratorCC/エクストラ/ja_JP/テンプレート」のようなところだと思います。

印刷用テンプレートもあると便利!

あと本題とズレますが、印刷用のテンプレートも作っておくと便利です。

クライアントに送るpdfには、トンボがない状態にしておきたいですよね。

このテンプレートには、「マスク」と「外罫」というレイヤーをつけています。

A4テンプレのレイヤー

これを表示させることで、カンタンにクライアント送付用のPDFが作れます。

外罫とマスクは、入稿時には必ず非表示にしてください。

A4だけ置いておきますので、ぜひこちらもご利用ください。

 

本日のまとめ

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

要点としては、

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

の3つです!

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

ぜひお試しください。それではまた。

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

Twitterでもデザインや日々のことをつぶやいています。

webデザインカテゴリの最新記事