Design

Illustratorとphotoshopで色が違って見える?カラー設定を見直そう(カラーマネジメント)

あれ、RGB設定で素材作成したのに、IllustratorからPhotoshopに素材を持って行ったら色が違う。。

という事が実際にあったので、今回はカラー設定(カラーマネジメント)について調べた事と設定方法をまとめていきます。

IllustratorとPhotoshopの色の見え方の違いの原因

IllustratorからPhotoshopに素材を持っていった時に、色が違う事に気付きました。
色鮮やかな写真だったり、人物の顔写真だったりすると全然違う。。ということがあります。

(左側:Illustrator 右側:Photoshop )(Illustrator側の方が色が薄く見える。。)

IllustratorとPhotoshopの、色の見え方の違いの原因は何なのか。
自分の場合、カラー設定が異なっていた事が原因でした。

早速、IllustratorとPhotoshopのカラー設定を変えていきます。

Illustratorのカラー設定方法

Illustratorのカラー設定方法は、メニューの「編集」→「カラー設定」から変更する事ができます。自分の場合ここが「Adobe Illustrator 5.5をエミュレート」になってました。。

設定のつまみを押すと、いろいろ、設定できる項目が出てきました。
自分の場合は、「Web制作」がメインになるので、設定を「Web・インターネット用 – 日本」にしてみます。

以下のように、RGBは「sRGB IEC61966-2.1」に、CMYKは「japan color 2001 coated」に切り替わりました!

ちなみに、「sRGB」はIEC(国際電気標準会議)が制定した標準規格だそうです。
似たような設定では、「Adobe RGB」がありますよね。こちらは、Adobe(アドビシステムズ)が制定した色空間になります。

色空間におけるsRGBとAdobe RGBの違いについては以下を参考にしました。

色空間におけるsRGBとAdobe RGBの違いについて

https://www.sokupuri.jp/archives/1732

「Adobe RGB」のほうが、色域が広いですが「sRGB」のほうが汎用性が高そうですね。
(自分のモニターも「Adobe RGB」に対応していませんでした。)

CMYKについても「Japan Color 2001 Coated」の設定が無難そうですので、このままでOKとします。

CMYK変換するとき CMYKカラープロファイルはどれを選べば良いか

https://omoide-photo.jp/blog/cmyk-profile/

Photoshopのカラー設定方法

Illustratorのカラー設定ができたので、引き続きPhotoshopもカラー設定していきます。
同じく、メニューの「編集」→「カラー設定」から変更できます。

「Web・インターネット用 – 日本」に設定できました!

実際に、IllustratorとPhotoshopの画像を見比べてみます。

(左側:Illustrator 右側:Photoshop)

画像だと分かりづらいですが、モニターで見てみても同じ色合いで表示させることが出来ました!

Adobe Bridgeで「カラー設定」を一元管理

ここまで、IllustratorとPhotoshopと個別に「カラー設定」の方法をご紹介してきましたが、Adobe Bridgeから一元管理する事もできます。
自分の場合、Adobe Acrobatを利用した「PDFでの表示確認」もよくあるので、Adobe Bridgeから一元管理しちゃいます。

Adobe Bridgeのカラー設定も、メニューの「編集」→「カラー設定」から設定可能です。

これで、Creative Cloudアプリケーションに「カラーマネジメント」設定を同期する事が出来ました!共通で「Web・インターネット用 – 日本」の設定になったという事ですね。

Adobe Acrobatのカラー設定を見てみると、

「Web・インターネット用 – 日本」になっていますね!これで、IllustratorやPhotoshop、PDFの色や画像の見え方が統一できました。

Adobe XDは「カラーマネジメント」に非対応

Adobe Bridgeを使用して、Creative Cloudアプリケーションに「カラーマネジメント」設定の同期をしましたが、注意が必要なのが、Adobe XDは「カラーマネジメント」に非対応な点です。※2022年1月時点

機能リクエスト-AdobeXDでのカラーマネジメント

https://community.adobe.com/t5/adobe-xd-discussions/feature-request-color-management-in-adobe-xd/m-p/11283720?profile.language=en


Adobe XD上での作業と、実際の書き出し時の画像で色合いが違ったりする事があります。
XDでWeb制作する場合は、引き続き注意が必要ですね!

最後に

以上、今回はIllustratorとphotoshopで色が変わって見えてしまうな。。という悩みからのカラー設定(カラーマネジメント)の方法をご紹介いたしました。

プログラミング言語の人気オンラインコース