WEB Tips デザイン・コーディング

Illustrator 書き出し 画質が悪い、画像が粗い時の対処法

2019-07-02

本記事にはプロモーションが含まれています。

Illustrator 書き出し 画質が悪い、画像が粗い時の対処法

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

Adobe Illustratorでpngやjpg画像を書き出しをした時に画質が悪くなったり、なぜかジャギジャギ(ガビガビ?)した粗い画像になったりしたことはありませんか?

この記事ではIllustratorの書き出しで画像が粗くなってしまう問題の解決方法について解説します。

同じくIllustratorの書き出しで画像サイズが大きくなったり、1pxずれる問題の対処法はこちらの記事が参考になります。

Illustrator 書き出し画像サイズが大きくなる、1pxずれる問題の対処法

昔からあったのですが、Illustratorで、画像を書き出す時に書き出した画像が作ったサイズより1px大きかったりずれる問題です。 例えば、300px × 250pxのバナー画像を作りたいのにWid ...

続きを見る

Adobe CCのプランを比較するなら

Adobe CC コンプリートプランと単体プラン、どちらを選ぶべき?
Adobe Creative Cloud プランの比較

こちらもおすすめ 2024年最新 Adobe CC コンプリートプランを安く更新できる!一番安い購入方法

Illustratorで画像を書き出す方法は3つ

イラレ書き出しメニュー

Illustrator(CC)で書き出しには3つの方法があります。それぞれの特徴をまとめます。

書き出し方法用途特徴
スクリーン用に書き出しWeb用JPG,PNG,SVG,PDF
複数のWeb用素材を、複数の形式、複数のサイズで一括で書き出すことができる
アートボードごとの書き出しも可能
書き出し形式印刷用、
Photoshop用
PNG,BMP,CSS,PSD,SVG,TIFF,TXTなど
CMYKやグレスケールで書き出し、psdファイルの書き出し可能
書き出せる画像形式が多い
アードボードごとの書き出しも可能
Web用に保存(従来)Web用JPG,PNG,GIF
昔からあるWeb画像の書き出し方法
スライスの書き出しができる
Illustratorの書き出し種類と特徴

PNG・JPGに書き出しすると画質が悪い、ジャギーができる問題の対処法

Illustratorのスクリーン用に書き出し・アセットの書き出し機能は一度に複数のサイズの画像や形式を書き出すことができる機能です。スライスを使って一つ一つ書き出す画像を設定していた頃に比べると、ドラッグ&ドロップで書き出す画像を選択でき、抜群に作業効率が上がりました。便利ですよね。

でもアセットの書き出しで書き出した画像が(特にjpg)なぜか粗い。ジャギー?ノイズのような、大きい画像を縮小した時のような感じで画質が悪くなるのです。

illustratorで書き出した画像がジャギーのような感じになる
書き出した画像がジャギーのような感じになる

書き出し画像の画質を改善する方法(アセットの書き出し)

原因はIllustratorの書き出しの設定にありました。以下、書き出し画像の画質を改善する方法です。

アセットの書き出しパネルの場合、右上のメニューから「形式の設定...」を選択します。

またはファイル>書き出し>スクリーン用に書き出しから、フォーマットの右端にあるギアアイコンをクリックします。

形式の設定を選択できるウィンドウが開きます。左側のファイル形式ごとにオプションを設定することできます。

JPG80のオプションを見てみると、アンチエイリアスは「文字に最適(ヒント)」になっています。

「アンチエイリアス」を「アートに最適(スーパーサンプリング)」に変更します。

これで再度画像を書き出してみると・・・ジャギーがなくなり、画像が粗いのが改善されました。

書き出しで画質が悪かったのが改善されました

Web用に保存では「アートに最適」を選ぶ

古いバージョンだとアセットの書き出しではなく、「Web用に保存」しかない場合があります。その場合は画像サイズの下のプルダウンで「アートに最適」を選ぶことができます。

まとめ

以上、Illustratorで画像の書き出しをする際に画質が悪くなってしまう問題についてまとめました。

書き出した画像の画質が悪いときは、書き出しオプションで「アートに最適」を選択する

ことで解決できると思います。参考になれば幸いです。

同じようにIllustratorで書き出しすると、画像が1px大きくなる問題はこちらで詳しく解説しています。

Illustrator 書き出し画像サイズが大きくなる、1pxずれる問題の対処法

昔からあったのですが、Illustratorで、画像を書き出す時に書き出した画像が作ったサイズより1px大きかったりずれる問題です。 例えば、300px × 250pxのバナー画像を作りたいのにWid ...

続きを見る

  • この記事を書いた人
  • 最新記事

ソラミ♪

Webエンジニアをやりつつ、デザインにも携わる株式会社コムワークの中の人。WordPress、Adobeアプリ、カワウソ好き。 2015年から当ブログ運営|2008年からGmail使用中|WordPress制作10年以上|15社以上のレンタルサーバー利用経験|100件以上のドメイン取得運用|サイト・ドメイン移転多数 »  もっとくわしく

-WEB Tips, デザイン・コーディング
-,