PC変更後の一発目の案件でPhotoshopで画像をクイック書き出し、アセット書き出しする時に画像の色が大きく変わってしまったので、これはいかんと思い修正する方法を探し回ったのでシェアします。
ぶっちゃけ多少の色の変化は仕方がないだろーとごまかしていてはいつかクライアントにガチギレされるので、チェックしてみたほうが良いです。
画像の色が変わってしまう原因はカラープロファイル
カラープロファイルとは、異なる環境間で画像をあつかう際の色の変化を抑えることを目的とした機能です。
要するに、新しいモニターで見ようと、古いモニターで見ようと、暗めに設定しているモニターで見ようとそこに差異が生まれにくいように工夫してくれる機能のことです。
このカラープロファイルの設定をしていないと、Photoshopの書き出しの際にあられもない画像が出てくるわけですね。
恥ずかしながら、今まであまり注意を払っていませんでした。すみません。
Photoshop上でのカラープロファイルの確認方法
では、カラープロファイルはどこで確認できるねんと。
Photoshopを開いて、適当にpsdファイルを開くと左下に以下のような表示があるはずです。
デフォルトだとファイルサイズが表示されています。
>マークを押すと、色々選択できるので「ドキュメントのプロファイル」をクリックしましょう。
クリック後、プロファイルが表示されます。
おそらく、設定できていない人は【Display（8bpc）】というのが表示されるので、こちらが【sRGB IEC61966-2.1】になってくれれば正しい状態です。
それでは変更していきましょう。
カラープロファイルの設定方法
【編集】→【プロファイル変換】をクリック。
すると、以下のような画面が出てきます。
上記がデフォルトですが、以下のように設定を変更してください。
プロファイルを【作業用 RGB – sRGB IEC61966-2.1】
画像を統合して外観を保持のチェックを外す
この方法を実施すると、書き出し後の画像の色が変化することが無くなります。
ちなみに、「ラスタライズ」するか否かという選択肢が出ますが、こちらはラスタライズしない方が良いです。
ラスタライズすることでベクトル画像がビットマップ画像に変換されるので、ファイルによっては見た目が荒くなったりします。
+αですが、編集中の見た目がすでにもう色が違います、という方は以下の【表示】の【校正設定】をモニターRGBに変更すると差異がなくなって非常に良いですよ。
最後に
フロントエンドエンジニアではありますが、デザインの細かいところまで気が使えるか否かでかなり個々人の仕事の質が変わってくるなと感じている昨今です。
自分自身まだまだ未熟ですが、デザイン方面にもスキルの枝葉を伸ばしていってフロントのフルスタックを目指していきたいなと思っています。（プレイヤーとして）
ガチもんのデザイナーの方、上記よりももっといい設定方法があるよ！とかがあればコメントでご教授頂けますと幸いです！