2
6

More than 3 years have passed since last update.

Illustrator「アセットの書き出し」で保存したPNG画像の色がくすんでしまった原因

Posted at

既存Webサイトの画像を差し替えるため、制作当時のIllustratorファイルを入手して編集作業をしていた時のことです。新しい画像のPhotoshopファイルをIllustratorにリンク配置して、アートボードを「アセットの書き出し」パネルからPNG(PNG24)形式で書き出してブラウザで表示したところ、なんだか画像の色がおかしい。イラレのプレビュー表示の画像と比べて全体的に色がくすんでる! 自分で新規に作成したイラレファイルで実行した場合は再現しないため、解決するのに丸1日潰してしまいました。何が原因だったか、ここに書きます。

動作環境
Adobe Illustrator 2019 ver.23.1.1, macOS Mojave 10.14

現象

下図は簡単なサンプルで現象を再現させた様子です。

  1. sample.ai(図の上段)のアートボードに、sample_CMYK.psd(右下)をリンク配置する。
  2. 配置したオブジェクトをアートボードに切り出して「アセットの書き出し」パネルからPNG形式のファイル(左下)に書き出す。

結果
PNG画像の色が、元の画像(sample.aiのそれ)よりもくすんでいます。
fig1_w600.png
サンプルではリンク先のsample_CMYK.psdのカラースペースがCMYKになっていますが、PSDファイルのカラーモードをRGBに変換しても結果は変わらず。PNG画像に出力すると色がくすんでしまいました。PSDファイルの設定が原因ではなさそうです。

JPEG形式や「Web用に保存(従来)」では発生しない

問題の切り分けのため、他の形式や方法で画像に書き出して比較してみました。
output_menu_w500.png
下図は2つの方法、「アセットの書き出し」と、「ファイル」メニューの「書き出し / Web用に保存(従来)」を使ってPNG形式とJPEG形式に書き出した結果です。
(上段:アセットの書き出し / 下段:Web用に保存、左: PNG / 右: JPEG)
before_w400.png
ご覧のとおり、

  • JPEG形式で出力した場合は、どちらの方法でも色はくすまない
  • Web用に保存(従来)でPNG形式に出力した場合も色はくすまない

この4パターンの中では、アセットの書き出しを使ってPNG画像を書き出した場合のみ色がくすむということが判りました。アセットの書き出しに絡むイラレ側の設定に原因がありそうです。

これが原因だった!

イラレファイルを新規に作った場合は問題ないのに、入手したファイルで編集した場合は発生するため、2つのファイルについて画像変換時のカラーに関する設定を比べてみたところ、違いがありました!

「編集」メニューの「プロファイルの指定」の項目です。入手したイラレファイル(色がくすむ方)を開いた場合、「プロファイル」にAdobe RGB (1998)が選択されていました。
profile_before_w500.png
一方、自分で新規作成したイラレファイルを開いた場合、「プロファイル」は作業用RGB:sRGB IEC61966-2.1になっていました。
profile_after_w500.png
入手したイラレファイルの「プロファイル」を作業用RGB:sRGB IEC61966-2.1に変更してアセットの書き出しを実行したところ、PNG画像の色もくすまなくなり解決です(下図)。
after_w400.png
今回のように、普段と違う所から入手したイラレファイルを使う場合は特に、プロファイルの指定が自分の作業環境と異なっているケースがあるのでこれからは必ずチェックしてから作業することにしました。

2
6
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
6