5

概要

HTML / CSSグラデーション/ブレンドの色がコンプで達成される効果と一致するように、コンプのカラープロファイルを標準化するためのアドバイス/ソリューションを探しています。sRGBカラープロファイルを使用してPSDを取得することが多いため、グラデーション/アイコン/または背景を再作成するために色を選択すると、HEXカラーと結果のCSS/HTMLグラデーションがコンプで提供される元のsRGBグラデーションと一致しません。通常、 PSDカラーと最終結果のCSSカラーをより適切に一致させるモニターRGBカラープロファイルの埋め込みカラープロファイルを破棄します。これは、カラープロファイル間の違いを示す例です。

詳細

苦境は次のとおりです。エクスポートされた画像（JPEG / PNG）はブラウザにロードされたときに正しく表示されるようにsRGBカラープロファイルを保持するため、設計者は埋め込みsRGBカラープロファイルを使用するようにPSDを標準化する必要があります。したがって、CSSで再現できない写真/テクスチャ/ものは、より優れたsRGBプロファイルを備えたJPEG / PNGとしてエクスポートされます（これは理解できる要求です）。

フロントエンド開発者として、 CSSとHTML（画像なし）を使用してコンプに表示される要素を再作成することがよくあります。これには、PSDにあるものとWebサイトにレンダリングされるものの間でHEXカラーを適切に一致させる必要があります。ですから、私はモニターRGBカラープロファイルで標準化して、ブラウザーで実際にレンダリングされるものに近いものを誰もが使用できるようにしたいと思います。

他の誰もがこの問題にどのように取り組んでいるのか興味がありますか？CSSとPNGを組み合わせて効果（特に動的に変更する必要のある効果（サイズ/色相/シェーディング...））を実現するために、画像をsRGBでエクスポートし、CSSグラデーション/シャドウでオーバーレイする場合がよくあります。 sRGB / Monitor RBGが混在しているため、コンプとは微妙に異なります。

回答形式

うまくいけば、私はこの質問を適切に尋ねました-適切な答えはあなたが問題にどのように対処するかについての見通しを与えるでしょう-または（より良い）SCSS sRGB（）関数またはRGB/HEXカラーをsRGBに変換する他のアルゴリズムがある場合SASSミックスインに入れます。

4

1 に答える 1

1

Photoshopで色の一貫性を確保する方法は次のとおりです。Web用に保存された画像の正しい色の選択と一貫性。

Photoshopカラースペースの設定

私たち全員が最初にやらなければならないことは、正しいカラープロファイルで作業していることを確認することです。これを行うには、次の手順に従います。

  • Edit > Color SettingsまたはShift + Command + KまたはShift + Control + Kウィンドウに移動します。
  • Settingsドロップダウンから選択しますNorth America Web/Internet
  • を押して変更をコミットしますOK。
  • に移動しView > Proof Setupて選択しますInternet Standard RGB (sRGB)
  • を押すCommand + YかControl + Y、ウィンドウで有効Proof Colorsにします。または、次の場所に移動することもできます。View > Proof Colors

エクスポート（Web用に保存）

  • Save for Webを介してエクスポートする場合は、それConvert to sRGBがチェックされていることを確認してください。

これで、すべてのファイルとHTMLで色の精度を楽しむことができ、画像はデバイスやブラウザ間で一貫して表示されるようになります。

于 2012-04-05T18:33:18.350 に答える