Photoshopの「Web用に保存」の設定をなんとなくやっていませんか?

私もそのうちの一人です。今日からその“なんとなく”とおさらばするために、今回は「カラープロファイルの埋め込み」について調べてみました。

カラープロファイルの埋め込み

目次

img150312_01

カラープロファイルを使用した画像は、「カラープロファイルの埋め込み」にチェックを入れて保存する必要があります。

1、チェックなしすると画像の色が変わってしまう

環境やデバイスによって、画像の色が変わってしまうことがあります。

下図は、実際にGoogle ChormeとSafariで画像を表示して、色を比べてみたものです。カラープロファイルを埋め込まなかった方は、Google Chromeでカラーコードの数値が微妙に変わってしまっています。

img150312_02

2、カラープロファイルについて

2-1、カラープロファイルとは?

カラープロファイルとは、デバイス間で色を一貫して扱うことができるデータ、といったところです。適切に画像へ埋め込むすることで、完全とは言えないまでも環境による色の変化を抑えることができます。

2-2、新規作成する場合はカラープロファイルを指定しよう

PhotoshopでこれからWebサイトや画像を作る時に「新規作成」をしますよね。
そのときにカラープロファイルを選択できる項目があります。

ここでカラープロファイルを「埋め込む」前に、「指定」をしてあげるわけです。

img150312_2

メニューバーの「ファイル」から「新規」ウィンドウを開きます。
詳細という項目に「カラープロファイル」を選べるところがあるので、それを「作業用RGB:sRGB IEC61966-2.1」にしましょう。

※ 画像の色が変わってしまうことが起きるのは、最初のこの設定をしていないのが原因なことも。

sRGB と Adobe RGB
「sRGB」は、世界標準として使われている色空間(カラースペース)。
一方、Adobe製品は「ACE(Adobe Color Engine)」と呼ばれる独自のカラーマネジメントシステムを用意しています。PhotoshopやIllustrator、InDesignやAcrobatなどで色再現性が確保できるように、それぞれのアプリケーションに入っています。色空間もRGBで標準的に利用されている「sRGB」に加えて、色域が広い(表現できる色が多い)「Adobe RGB」が用意されています。

2-3、あとでカラープロファイルを指定するには?

おっと、カラープロファイルがなんか違う!という時でも大丈夫です。
Photoshopではあとからカラープロファイルの指定も可能です。

メニューバーの「編集」→「プロファイルの指定」からカラープロファイルを選びましょう。

img150312_3

img150312_4

img150312_5

プロファイルの指定?変換?
扱うデータによって、「プロファイル変換」をする場合もあります。「変換」はどちらかというと、もともとプロファイルが埋め込まれていたデータに対して使用します。画像を印刷用にRGBからCMYKにするときが多いでしょうか。

参考資料

検索したときに見つけたこちらのPDF資料がわかりやすかったです。
Photoshopの使い方間違ってませんか? – CSS Nite

鈴木:今回は「Web用に保存」というところにフォーカスしました。意外とカラープロファイルっていう言葉だけで調べてると、奥が深くてびっくりです。なので、印刷物となるとまた話しが違ってきたりすると思います。そちらの方がきっとWebよりシビアなんでしょうね…。
Pocket