2013年01月23日

なぜSAIとPhotoshopで色が違うのか

SAIで描いたイラストをPhotoshopで開くと色が違って見える!



色が違って見える原因は「ソフトがカラーマネジメントシステム(CMS)に対応しているかいないか」の違いです。


少しモニター上で見える色の説明をしましょう。

303.jpg

上の画像はモニターが表示出来る色の範囲をガモットビューで視覚化したものです。


一般的なデジカメやプリンタ、モニターはsRGB規格に対応しています。

AdobeRGBsRGBよりはるかに広色域の色を表現出来ますが、何もせずにAdobeRGBで制作した画像をsRGBモニターで見ると色が褪せて見えたり、sRGBで制作された画像をAdobeRGB対応モニター見ると実際より色が派手に見えてしまうという問題が起こります。


293.jpg

(クリック拡大可)

一般的なsRGBモニターで制作した何も手を加えていない(iccプロファイルを埋め込んでいない)画像をAdobeRGB対応モニターで表示した時の見え方です。

AdobeRGBモニターで表示した方が彩度が上がり、色が派手になっているのが分かるかと思います。

これはsRGBの色空間で作られた画像の色幅を、無理やりAdobeRGBの色空間に合わせて引き伸ばしたために起きる現象です。

(sRGBAdobeRGBの色幅(色域)はどちらも最大255で同じ)



ではAdobeRGBの色空間で作られた画像を、sRGBしか対応していないモニターで見るとどうなるでしょうか。

294.jpg

(クリック拡大可)

今度は大分色が褪せて見えます。

さっきとは逆に、広色域のAdobeRGB画像の色幅は勝手にsRGB色空間に収まるよう均等に圧縮され、AdobeRGB時とは比べ物にならないほど地味になってしまいました。

それぞれの環境に合わせて色空間が伸び縮みし、勝手に画像の色座標をずらされたら、そりゃ色が変わって見えてしまうのも当然です。



こうならないためにはカラーマネジメントに対応した環境と、画像に埋め込まれた正しいiccプロファイル(色の身分証明書)が必要になります。

逆に、それらがなければ様々な環境で見た時の色の変化は免れないということです。





モニターの色で見るSAI


ここから本題。

先ほどはsRGBモニターAdobeRGBモニターでの色の見え方の違いを説明しました。

そしてカラマネに対応していなければ色が違って見える問題は回避不能とも言いました。


Photoshopカラマネに対応しています。
SAIカラマネに対応していません。



WebはsRGBが基本となっており、現在出回っている機器(プリンタやモニターなど)のほとんどはsRGBに対応出来ているので、sRGB環境で画像を制作しsRGBのiccプロファイルを埋め込めば誰がどんな環境で見ても色が大きくずれるということはなくなります。

Photoshopには「作業用スペース」の設定があり、そこで設定した色域をカラーマネジメントし画面上で再現してくれるので正しいsRGBの色域で作業することが可能になります。(モニターが正しくキャリブレーションされていれば完璧)


しかしカラーマネジメント機能のないSAI(カラマネ非対応ソフト)の場合、モニターの色そのままで作業する事になるので、モニターの色域がsRGBより広ければ、SAI上ではイラストが派手に(彩度が高く)見え、正しいsRGB色域Photoshopで見ると色幅が圧縮され地味に見えてしまうのです。

(先ほどの広色域AdobeRGB対応モニターで作った画像がsRGBモニターでは地味に表示されたのと同じ)





FS2333の場合


こちらは現在私が使っているモニターFS2333の色域とsRGBの色域を比べたものです。

304.jpg

FS2333のiccプロファイルは「FS2333 User 6500K G2.2」。
(6500K=sRGB規格での基準、5000K=印刷基準)

FS2333の色域はほぼsRGBをカバーしていますが、少々色域がずれており、特に紫方面へ広がっています。

(カラースペースの中心へいくほど地味、外側へいくほど鮮やか)

292.jpg

SAI上で表示したものとPhotoshop(sRGB指定)上で表示したものをスクリーンショットに撮って並べてみました。

SAI(FS2333)画面のピンク黄色辺りの色はPhotoshop(sRGB)画面と比べてより鮮やかに見えると思います。

SAIカラマネに対応しておらず、モニター(FS2333)の色域いっぱいそのままに使って表示しているからです。





SAIで見える色そのままで公開したいんだけど?


広色域のモニターで見ると写真やイラストは美しく鮮やかに見えます。

しかし正しいsRGB環境Photoshopに持っていくと色が変わってしまう。

それが嫌だからPhotoshopを通さずに、そのままWebで公開する!


・・・そうするとそのイラストは上で貼った画像(AdobeRGBモニター → sRGBモニター)のような地味で残念な見え方になってしまいます。

基本的にWebはsRGBなので、それ以上の鮮やかさを持った画像でも勝手にsRGB内の色域に収まるように変換されてしまうからです。


しかしその画像の劣化をある程度制御する事は可能です。

先にも説明したように、様々な人がそれぞれのモニター環境でWebを見ているので、自分が見ている原画と全く同じ色で見てもらうというのはほぼ不可能ですが、色のズレを最小限に変換し直し、同じような色で見てもらう事は出来ます





sRGBへの変換


広色域の画像に何も手を加えずにいると、Webブラウザによって乱暴にsRGBへ変換されてしまい残念な見え方になってしまうので、そうなる前にこちらで上手い事sRGBに変換してやりましょう。


ここで説明するやり方は2種類。

世界最高峰のデジタル画像編集ソフトとして名高い「Photoshop」を使った変換方法と、無料の「GIMP」を使ったやり方です。

高価なPhotoshopを持っていなくても安心ですよ。





プロファイルの変換方法 − Photoshop編


@SAIで描いた画像をPhotoshopで開く。


A「イメージ」→「モード」→「プロファイルの指定」を選んでクリック。


307.jpg

B「プロファイルの指定」で「プロファイル」にチェックを入れ、使用しているモニターのプロファイルを選ぶ。(ここでは「FS2333 User 6500K G2.2」)

モニターのプロファイルについては → 「新しいモニターを買ったらやること −正しい色を表示するために−



これでSAIと同じ色(モニターの色)で作業出来るようになりました。

しかしこのまま画像をアップしてもブラウザや他のモニターで見た時に色が変わってしまうので、もう一手間加えましょう。



C次に「イメージ」→「モード」→「プロファイルに変換」を選んでクリック。


308.jpg

D「変換後のスペース − プロファイル」を「作業用RGB-sRGB IEC61966-2.1」、「変換方式」を「Adobe(ACE)」、「マッチング方法」を「相対的な色域を維持」に設定し、「OK」を押す。


黒点の補正を使用」と「ディザの使用」はチェックを入れておいた方が綺麗に仕上がります。


マッチング方式について

知覚的:変換先の色域に収まるよう、全体の式域を圧縮するので落ち着いた色合い(全体の彩度が落ちる)になります。
相対的な色域を維持:変換先の色域内に収まる色はそのままで、収まりきらない鮮やかな色のみ似たような色に変換します。



最後に画像にiccプロファイルを埋め込みます。


309.jpg

E「ファイル」→「Web用に保存」を選び、保存画質を選択し、「ICC プロファイル」にチェックを入れて「OK」を押す。





これで全工程終了です。

iccプロファイルが破棄されない限り、保存した画像を誰がどこで見てもほぼ同じ色合いになります。

残念ながらsRGB以上の色域を持つ鮮やかな色は「似たような色」に変換されて本来の完全な鮮やかさは出なくなってしまいますが、「プロファイル変換」を行わなければ見る環境によってどんな色で表示されるか分からなくなってしまいます。

306.jpg

(クリック拡大可能)

@ SAIからPNG出力した画像をそのままWebで見た画像
A @をPhotoshopで開いた後、変換せず「Web用に保存」(iccプロファイル無し)した画像
B @を上記の工程でプロファイル変換し、iccプロファイルを埋め込んだ画像


SAI(モニターの色)とほぼ同じ色に見えるのはBです。
@とAはWebの基本であるsRGB色域に収まるように、ブラウザによって勝手に圧縮されてしまっています。

ブラウザによってカラマネの能力が違うので全てがこの結果になるわけではありませんが、Bであればほぼ色がずれることはありません。





プロファイルの変換方法 − GIMP編


無料でプロファイル変換を行う方法です。


まずGIMPをDLしてインストールしてください。

DLはこちらから → http://gimp-win.sourceforge.net/stable.html


GIMP for Windows (version 2.8.2)(2013.01.22現在の最新版)の「Download」をクリックし、移動したページでしばらく待つとDLウインドウが開くので、分かりやすいところにDL・保存します。

GIMPのインストール方法など詳しくは「GIMP初めの一歩 − ダウンロード・インストール」を参照してください。


インストールまでは英語ですが、起動すると日本語画面になっていると思います。

続けて「プロファイル変換」の説明です。



@SAIで描いた画像をGIMPで開く。


310.jpg

A「画像」メニュー→「モード」→「カラープロファイルの指定」を選んでクリック。


311.jpg

B「指定するカラープロファイル」で使用しているモニターのプロファイルを選ぶ。(ここでは「FS2333 User 6500K G2.2」)


C「画像」→「モード」→「カラープロファイルの変換」を選んでクリック。


312.jpg

D「変更後のカラープロファイル」を「sRGB IEC61966-2.1」、「レンダリングインテント」を「知覚的」or「相対的な色域を維持」、「黒点を補正する」にチェックを入れて「変換」を押す。


313.jpg

E「ファイル」→「エクスポート」をクリックし、画像を保存する。


314.jpg

F保存場所を選択し、「ファイル形式の選択」のプルダウンメニューの中から「JPEG画像」を選んで、「エクスポート」を押す。


315.jpg

品質設定で変更があれば変更し、最後にもう一度「エクスポート」をクリックし、画像を保存。



これでGIMPでもSAIでの見え方(モニターの色)を再現出来ました。

GIMPの場合、カラープロファイルを触った時点で自動的に画像にiccプロファイルが埋め込まれる設定になるようです。





これで今回の記事はおしまいです、お疲れ様でした。



プロファイル変換で色域の問題をクリアすれば、FS2333は多機能、手厚い保証、キャリブレーション済み、なめらかなグラデーション表示、美しい発色、目に優しいなど、イラスト制作においてもこの価格帯ではかなり満足のいく性能だと思います。

個人的にはFS2333sRGBの色域の差は許容範囲ですが、SAIなどのカラマネ非対応ソフトで彩度の高い絵を描く人はちょっと気になるかもしれませんね。

かと言って完璧にsRGB色域ピッタリのモニターもありませんので、SAIPhotoshopの見た目を合わせたい人や、正しい色でWebにアップしたい人は、(どのモニターの場合も)今回紹介したカラープロファイルの調整をお試しください。



★★★注意★★★

プロファイルの変換」をすると品質が劣化する場合があるので、変換は最後に、極力1回で済ませて下さい。

指定」は見え方を変えているだけなのでデータは劣化していません。(何度変えても大丈夫)



ナナオ FORIS 23.0インチ TFTモニタ 1920x1080 DVI-D24ピンx1 D-Sub15ピンx1 HDMIx2 ブラック FS2333ナナオ FORIS 23.0インチ TFTモニタ 1920x1080 DVI-D24ピンx1 D-Sub15ピンx1 HDMIx2 ブラック FS2333


ナナオ
売り上げランキング : 417

Amazonで詳しく見る



参考

sRGBの色域を超える画像の見え方を検証する(pdfファイル)
SAIとカラーマネージメント
Adobe RGB の画像をキレイに JPEG 化するには
“広色域”は誤解だらけ!? 今選ぶべき液晶ディスプレイを考える (1/3)
【Gimp】『現在のカラープロファイル』について(旧:作業用色空間について)


posted by うろ at 00:00 | Comment(0) | デジタルで描く | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。