フリーランスデザイナーがお役立ち情報を発信

MESSAGE GRAPHIC - Blog

デザイン事務所 MESSAGE GRAPHIC(メッセージグラフィック)では、ロゴマーク、名刺、チラシなどの紙媒体のデザインや ホームページ作成、ブログカスタマイズ、ヘッダー、バナー、Web素材などの様々な集客ツール、販売促進物の制作を承っております。
大阪・兵庫・京都など関西を拠点としていますが、全国の案件に対応していますので、ご相談等お気軽にご連絡ください。

当ブログのリンクには広告が含まれています

Adobeソフト

IllustratorでWEB用に書き出し1px 画像サイズがずれる理由と解決方法

投稿日:2019年6月3日 更新日:

Illustrator 書き出し画像サイズが1px変わる

イラレで作ったデータを書き出したら何故サイズが変わる?

私は元々DTP出身ということもあり、WEBデザインする時、バナーやヘッダーの制作でもイラストレーターを使用しています。

フォトショップで作業する場合もありますが、イラストレーターの方が使い慣れているので、作業時間も短くて済みます。

 

ある日、イラストレーターのデータを画像に書き出すという作業(アセットの書き出し)をしている時に困った事態が発生しました。

書き出した後の画像のサイズをチェックすると、1ピクセル大きくなっているのです。

例えば、アートボードサイズが 300×250px なのに、画像書き出しをしたら、301×250px になっていたりします。

色々調べてみて、原因を突き止めました!

 

イラレで書き出すと画像が1ピクセル大きくなる原因

私と同じようなことで困っている方にチェックして欲しい項目

まず、アートボードのウィンドウを出します。

メニュー > ウィンドウ >アートボード

イラストレーター書き出しで1pxずれる理由アートボード

赤枠で囲んでいるところをクリックして、アートボードオプションを開いてください。

イラストレーター書き出しで1pxずれる解決方法アートボードオプション

赤枠で囲んでいるアートボードの位置をチェックしてみてください。

アートボード位置が小数点の数字になっていませんか??

アートボードは手動で好きな場所に自由に動かせるので、位置の値が整数でなく小数点になっている場合があります。

 

簡単な解決方法2つ

アートボードオプションからアートボードの位置を確認して、小数点の数字になっていたら整数に直してください。

イラストレーター書き出しで1pxずれる理由アートボードオプション

 

または、書き出し方法を変えるやり方もあります。

アートボードがひとつで、アートボードをそのまま書き出したい場合は、下記のやり方でも手軽に書き出せます。

メニュー > ファイル> 書き出し > WEB用に保存(従来)

イラストレーターから書き出しで1pxずれる解決策

アートボードサイズをクリップにチェックを入れれば、アートボードの位置は関係なく、サイズがずれることなく書き出せます。

 

その他、イラレでWEB制作でする時に気を付けた方がいいこと

■ カラーモードは「RGB」
ファイル > ドキュメントのカラーモード > RGB

■ ドキュメント設定の裁ち落としは「0」
ファイル > ドキュメント設定 > 裁ち落とし(天地左右:すべて 0px)

■ 表示モードは、ピクセルプレビュー
表示 > ピクセルプレビュー
表示 > ピクセルにスナップ

■ スナップオブジェクトは、ピクセルグリッドに最適化
オブジェクト > ピクセルグリッドに最適

■ 線の位置は内側
ウィンドウ > 線線の位置:線を内側に揃える

■ キー入力は「1px」
メニュー > 編集 > 環境設定 > 一般 > キー入力

まとめ

原因が分かれば、今後このような問題も起こらないので安心ですね。

まずデータを作る前に、今回紹介していることを確認してから作り始めることをおすすめします。

-Adobeソフト
-, , ,

Copyright© MESSAGE GRAPHIC - Blog , 2024 All Rights Reserved.