Web用に設計する場合、カラープロファイルに関して何をすればよいですか?


15

Doug Averyによるこの記事を読んで、Adobe Photoshopで色の管理を無効にする方法を説明し、それに対して反論し、sRGBをサポートするコメンテーターの騒動に対応するフォローアップ記事を説明しましたが、私の個人的なワークフローに適用する必要があります。
記事を読んでいる間に収集したものから(間違っている場合は修正してください)、これに対処する正しい方法は、Photoshopで色をsRGBとして管理し、さらに必要なときにProof Colorsを使用することです作品の「忠実な」プレビュー。

現時点では、カラープロファイルを無効にして設計されたWebサイトプロジェクト全体があります。Photoshopのレンダリングは、PhotoshopのEyedropper Toolによって正しく報告されているものの、スクリーンショットから測定した場合、Google Chromeでエクスポートされた画像を開くときに表示される色と一致しないことに気づいたため、私はそのように始めましたPNG
簡単に検索した後、先ほど引用した投稿に出会い、その提案を盲目的に適用しました(フォローアップに気づかず、問題についても読みませんでした)。それ以来、問題はありませんでした。Photoshopで作業のスクリーンショットを撮り、開発者が利用できるようにアップロードします。彼は私がデザインを開発するときに使用するのと同じ色を見ることができ、実際に何をしているのかを見るためにフープを飛び越える必要はありません。

私の質問:

  • Proof Colorsの使用を強制することでさらに作業を追加するだけの場合、WebデザインでsRGBを使用することは本当に必要ですか(写真や印刷などで使用しないことの意味を理解しています)?(それは私がそれを見る方法です、私が間違っているなら私を修正してください)

  • ICCプロファイルで保存すると、一部のブラウザーはプロファイルを正しく適用しますが、他のブラウザーはそれを無視するため、sRGBを使用して設計し、ICCプロファイルなしで保存するのがおそらく最良のアイデアであるとも述べています。それはそもそもカラープロファイルを使用する目的に反しませんか?それとも、記事の内容を間違って解釈していますか?


1
マーク・エドワーズの答えは正しいとは思わない。カラープロファイルを「モニター」に設定すると、あなたの色は1人だけに見栄えがよくなります。sRGBを使用すると、より広範囲の人々がより一貫して表示できます。このリンクを読んでください。それは私がこの件に関してまだ見つけた最高の情報を提供します。gballard.net/psd/saveforwebshift.html

回答:


5

私の(時には物議を醸す)意見:ユーザーインターフェイスとWebデザインにsRGBを使用することをお勧めする人はおかしいです。その理由は次のとおりです。

カラーマネジメントが画面デザインで機能するためには、3つの重要なことを行う必要があります。

  1. 画像は正しいワークフローを使用して作成する必要があります。
  2. 画像は正しいICCカラープロファイルで保存する必要があります。
  3. 画像は、画像のプロファイルと、表示されている環境(ブラウザやOSなど)に従って、正しく表示される必要があります。

3つすべてを持っていない場合、カラーマネジメントはまったく機能しません。それらの1つまたは2つのことは、チェーン全体が壊れていることを意味します。

そして、ここにこだわる:Photoshopから保存されたすべてのPNGとGIFはICCプロファイルを持つことができないので、ほとんどの場合、2番は不可能です(ただし、JPEGはプロファイルを持つことができます)。また、多くのブラウザは正しく動作しないため、多くの場合、3番も出ています。

あなたがウェブ上で写真を表示している場合は、あなたの最良のオプションは、sRGBのに破壊的に変換することである sRGBのICCプロファイルを埋め込むのみJPEGファイルを使用します。Webユーザーインターフェイス要素を構築する場合、最良のオプションは、「デバイスRGB」(プロファイルまたはカラー管理のないネイティブカラー)をターゲットとするようにPhotoshopを設定することです。

ダグ・エイブリーのアドバイスはいいです。彼の投稿の重要な部分は、すべての結果を比較するために使用するグリッドです。彼が求めているのは、画像内のHTML、CSS、および色を一致させることであり、これは正しい目標です。これは、画像の色の値とHTML / CSSで使用される色の値が同じ方法で処理される場合にのみ可能です。

私はこのトピックについてもっと多く書いています:

カラーマネジメントとUIデザイン

そしてアドビのエンジニアとアドナウシウムを議論しました:

Web用に保存、PNGおよびGIFのsRGBへの変換はデフォルトでオフにする必要があります

Proof Colorsの使用を強制することでさらに作業を追加するだけの場合、WebデザインでsRGBを使用することは本当に必要ですか(写真や印刷などで使用しないことの意味を理解しています)?(それは私がそれを見る方法です、間違っている場合は私を修正してください)

いいえ、必要ありません。実際、sRGBがトピックの理解の欠如を実証していると想定しています。sRGBを確実に使用する必要がある状況もありますが、完全な写真ワークフローの一部として属します。JPEG画像を使用し、sRGBを使用し、sRGBプロファイルを埋め込む必要があります。すべてを行わずにその一部を行うことはできず、カラーマネジメントの利点を期待することはできません。

PhotoshopからGIFまたはPNGを保存する場合、画像にICCプロファイルが含まれることはないので、そのためのワークフローが設定されていることと、ブラウザーが画像を処理する方法を確認する必要があります。

ICCプロファイルで保存すると、一部のブラウザーはプロファイルを正しく適用し、他のブラウザーはそれを無視するため、sRGBを使用して設計し、ICCプロファイルなしで保存することをお勧めします。それはそもそもカラープロファイルを使用する目的に反しませんか?それとも、記事の内容を誤って解釈していますか?

それを念頭に置いて:

  • GIFにICCプロファイルを含めることはできません。
  • Photoshopで保存されたPNGは、ICCプロファイルを持つことができません。
  • PNGにはプロファイルを含めることができますが、プロファイルと共に保存されることはまれです。
  • JPEGにはプロファイルを含めることができます。
  • プロファイルを使用した画像のブラウザレンダリングは、ブラウザによって異なります。
  • HTMLおよびCSSの色は、多くの場合、デバイスRGBまたはsRGBであると想定されており、それを制御することはできません。

4
自宅に6台のコンピューターがあり、職場に2台の調整されたモニターがあります。キャリブレーションされたモニターの1つにはまともな色域がないため、キャリブレーションを行っても信頼できません。自宅の6つはすべて在庫があり、すべて異なる色で表示されます。これは、実際の使用法のレッスンです。これが私が心配を止めて愛することを学んだ方法です。
-horatio

3
うん。目標は、さまざまなディスプレイ間での一貫性ではなく、UI要素のページ内での一貫性です(ほとんどの状況では不可能です)。
マークエドワーズ

3

Macで開発/設計する場合、プロファイルが必ず必要です。

Photoshopで画像をAdobe RGBまたはProPhoto RGB(優れたカメラが使用する2つのプロファイル)で作業している場合、PSDをWeb用に保存してWindows PCで表示すると、色が大きく変わります。

Macユーザーの場合、プラットフォーム間で色を維持するには、WORKINGファイルでsRGBプロファイルを使用する必要があります。

最終的な公開ファイル(Web用に保存)にはプロファイルはありませんが、Macで作成中にsRGBを使用する必要があります-MacとWindowsで色を似たものにしたい場合は、少なくともこれが必要です。


2

これらの段落のステートメントを確認したいと思います。

記事を読んでいる間に収集したものから(間違っている場合は修正してください)、これに対処する正しい方法は、Photoshopで色をsRGBとして管理し、さらに必要なときにProof Colorsを使用することです作品の「忠実な」プレビュー。

そして

ICCプロファイルで保存すると、一部のブラウザーはプロファイルを正しく適用し、他のブラウザーはそれを無視するため、sRGBを使用して設計し、ICCプロファイルなしで保存することをお勧めします。それはそもそもカラープロファイルを使用する目的に反しませんか?それとも、記事の内容を誤って解釈していますか?

実稼働環境(既知および自己制御)と出力デバイスを区別し、写真に最適なものに従ってワークフローを調整します。説明させてください:

デジタルカメラから写真を開くとき、含まれているsRGBプロファイルでそれらを開くオプションがあります。プロファイルなしでそれらを開くと、重要な情報が失われます(色が異なって見えます)。そのため、さらに処理するためにプロファイルを保持します。含まれているプロファイルを使用して、Photoshopはモニタープロファイル、プルーフカラーにアクセスするプロファイル、プリンタープロファイル、および同僚が使用しているすべてのプロファイルに色を適合させることができます。

デザインファイルで写真を使用する場合は、プロファイルが添付された空白のキャンバスを作成する必要があります。そして、最終グラフィックではなく設計ファイルを開発者に引き渡す場合、プロファイルを添付しておくとよいでしょう...

プロファイルなしで最終ファイルを保存すると、期待どおりに見えます。どうしてこんなことに?プロファイルのないグラフィックは、sRGBプロファイルがアタッチされているかのように解釈されるためだと思います(誰かがこの参照を知っているかもしれません)。

また、スクリーンショットを撮ると、システムがモニタープロファイルの色をsRGBに変換します(または、sRGBカラースペースに近い非常に優れたモニターがあります)。


1

最初の質問への答え:ワークフローでsRGBを使用しない場合、他の色空間で使用されるすべての画像は、最終的にはWeb上で正確な、またはトリミングされた色さえもなくなります。インポートまたは使用するプロファイルのないほとんどの画像は、すでに適切な色空間(たとえば、カメラの標準空間)にあるため、問題なく機能します。

2番目の質問、はい、カラープロファイルの使用はまだあなたがそれらを使用できるような方法でウェブに実装されていないので、目的は無効です。ブラウザはsRGBを「期待する」ので、それらを添付する必要はありません。これはファイルサイズを増やすだけです。多くのブラウザはプロファイルを理解しないため、Adobe rgb 1998でプロファイル付きの画像を提供することはお勧めできません。色がトリミングされるためです。


「ブラウザ 'sect' sRGB」—並べ替え。ブラウザ間で動作が混在しています。ほとんどは、タグなしの画像をデバイスRGBとしてレンダリングします(変換なし)。OS X上のSafari 6は、タグ付けされていない画像が(間違って)sRGBであると想定して変換します。
マークエドワーズ

0

Adobe Photoshop CC(2017)の更新:

  1. 作業スペースをデフォルトのままにします(北米の汎用目的2)

  2. 何も変更しないでください

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.