WebデザインのためのPhotoshopカラー設定


9

PhotoshopでWebデザインに使用するカラープロファイル設定は何ですか?モニターのキャリブレーション効果はWeb画像を保存しますか?

モニターを比色計でキャリブレーションし、すべての主要なブラウザーで色が一貫した色になるようにしたいと思っています。

ワークスペースにキャリブレーション済みのモニタープロファイルを使用し、カラー管理をオフにして、Web用に保存するプロファイルを埋め込まず、可能な限り.png 24を使用しようとしています。これはベストプラクティスですか?

色設定

ここに画像の説明を入力してください

Web用に保存

ここに画像の説明を入力してください


1
補足的な質問の可能性-ウェブはあなたの使用例であると説明しましたが、他の人のCMYKアートを時々編集する必要がある場合、上記の設定は「安全」ですか?
e100 2011年

いい視点ね。印刷やCMYKの経験があまりないのでわかりません。
Chris_O、2011年

回答:


5

「色の管理」と「ウェブ開発」は、「気にしないでください」、「時間の無駄」、「fuggedaboudit」で修飾されていない限り、同じ文で使用しないでください。概説されたlawndartcatcherの理由は正しいです。2つのモニターが同じ色を表示するオフィス(グラフィックデザインスタジオ以外)はまだ見ていません。家庭用コンピュータは少なくとも同じくらい悪いです。

主にWebで作業する場合、sRGBをデフォルトにする必要があります。これはインターネットの標準であり、すべてのユーザーエージェント(ブラウザ)が表示するために構築されているためです。

Webサイトの画像にカラープロファイルを埋め込まないでください。画像にサイズを追加しますが、有用な情報は追加しないため、ページをより重くするだけです。PhotoshopからWebおよびデバイス用に保存する場合は、必ず「埋め込みカラープロファイル」のチェックを外してください。安全対策として、「sRGBに変換」をオンにしておいてください(他の色空間にある画像を処理していて、変換を忘れた場合)。

他の質問に答えるために:モニターキャリブレーションは、画像のカラープロファイルとしてモニタープロファイルを使用する場合を除いて、SfW画像には影響しません(これは、何らかの理由で、またはおそらく個人のデスクトップ壁紙以外の目的で行うべきではありません)。

PNG-24は透明度のある画像に役立ちます。透明度が含まれていない場合、jpegは通常、同じ画像品質で、色数の少ない単純な画像の場合、特にそれらにハードエッジがある場合(ロゴが古典的な例)、. gifが多くの場合最良の選択です。


7

さて、大きな問題は、多くの時間を費やして色の調整と選択に注意を払うことになります(あなたにとっては良いことです)。モニターの「明るさ」ボタン。私の(デザイン以外の)同僚にはすべて2つの画面があり、どれもお互いに一致することすらありません。したがって、「クライアントが要求したこの特定の赤が、私が実行した骨の折れる調整に基づいて常に正しく見える方法はありますか?」答えは残念なことになりそうです:

番号。

しかし(これはかなり大きなものですが)、あなたが取るすべての注意が重要です。一貫したプロファイルを維持することにより、すべてのページ/色が同じモニターで同じに見えます。誰もが同じモニターを使用しているわけではないので、常に同じように見えるとは限らないことを覚えておいてください。

プロファイルを埋め込まないことで、ブラウザが現在のプロファイルを上書きできるようにドアを大きく開いたままにする可能性があります。主要なブラウザにカラー処理について同意してもらうことができれば、おそらく何らかのノーベル賞が授与されるでしょう。

簡単に言えば、そうです。あなたが取っているすべての注意は重要であり、使用している設定は良好です(私は個人的にもう少し一般的なRGBプロファイルを探します)。しかし、デザインがマシンを離れて、知らないWebユーザーの非常に広い世界に出て行った後は、非常に多くの制御しかありません。


とても参考になりました!私の最大の懸念は、Photoshopでカラー#172550として作成したグラフィックを使用する場合、CSSの#172550がどのモニターのグラフィックとも一致することです。
Chris_O、2011年

Webセーフカラーを使用することもできます
ジャック

2
Webセーフカラーは「ダメージを抑える」ための良い方法の1つですが、残念ながらカラー#172550は全体的に見た目が異なります。これは、大多数の人々がモニターを調整していないためです。印刷で作業している場合は、プロのプリンターがPantone標準に準拠していないため、これは簡単です。
lawndartcatcher、2011年

2
ブラウザはsRGBを使用します。それがW3C標準です。画像に他のカラープロファイルを使用すると、ブラウザで表示したときに異なることが保証されます。
Alan Gilbertson、

2
Webセーフカラーはここでは関係ありません(他のどこでも:graphicdesign.stackexchange.com/questions/40/…
e100

3

+1クリスこれは本当に良い質問です。正確にはわかりませんが、この質問に興味を持ったときに、同じ記事をいくつか見つけたので、それに合わせて設定を変更したので、参考にしてください。一見、それはあなたの好奇心も解決するでしょう。

  1. ivanによるカラーマネジメント
  2. Photoshop for Webでの色の管理に関するヒント
  3. 複数のデバイス間で色を一致させるための色管理
  4. この設定は誰もフォトショップに使用すべきではありません

これが少し役立つと思いますが……


Smashing Magazineの記事を覚えており、その後の議論が続いています。最後の記事が最も理にかなっています。ありがとう!
Chris_O、2011年

常に歓迎しています...
ジャック

1

Webのカラーマネジメントについての私の正直な気持ちは、上で述べたものを反映していますが、いくつかの注意点があります。

一般的に言えば、カラーマネージドワークフローの外側でデザインしていて、モニターとソフトウェアのコンボがうまく機能している場合は、カラーマネージドワークフローを自分の側で維持することは理にかなっています。昼食(意図しないカラーキャスト、色域とガンマの問題など)に出かけると、キャリブレーションされていない別のエンドユーザーの機器が反対方向に同等の量を無秩序に外れて、何かが2倍になるという危険性が高まります。偏った色の決定に基づいて、そもそもカラーマネージドワークフロー内で設計された場合よりも、正しく表示されません。

さらに、ウェブサイトやウェブサイトテンプレートのグラフィックイメージ(ヘッダー、ナビゲーション、背景など)にはタグを付けませんが、これにより、16進数で指定されたカラーとカラーマネージドイメージの醜いミスマッチが発生し、カラーマネージメントが難しくなります。実際にカラープロファイルを尊重するいくつかのブラウザーでは、写真にタグを付けることよくあります。特に高解像度の画像。エンドユーザーがカラー管理されたブラウザーでコンテンツを表示しているまれな状況では、プロファイルにより、ユーザーは写真が撮影されたとおりに表示され、人間の肌の色合い、空、水などが確実に表示されます。正しく表されます。

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