5

概述

我正在寻找关于在 comps 上标准化颜色配置文件的建议/解决方案，以便 HTML/CSS 渐变/混合的颜色与在 comp 中实现的效果相匹配。我经常使用sRGB 颜色配置文件获取 PSD，因此当我选择颜色来重新创建渐变/图标/或背景时，HEX 颜色和生成的 CSS/HTML 渐变与 comp 中提供的原始 sRGB 渐变不匹配。通常，我只是丢弃了监视器 RGB颜色配置文件的嵌入颜色配置文件，该配置文件可以更好地将 PSD 颜色与最终结果 CSS 颜色相匹配。这是一个显示颜色配置文件之间差异的示例。

细节

所以这是一个困境：设计人员希望标准化 PSD 以使用嵌入的 sRGB 颜色配置文件，因为导出的图像（JPEG / PNG）保留该 sRGB 颜色配置文件以在浏览器中加载时正确显示。因此，我无法在 CSS 中重新创建的照片/纹理/事物将导出为具有更好 sRGB 配置文件的 JPEG/PNG（这是一个可以理解的要求）。

作为前端开发人员，我经常使用 CSS 和 HTML（无图像）重新创建在 comp 中显示的元素，这需要我在 PSD 中的内容和网站上呈现的内容之间正确匹配 HEX 颜色。因此，我更愿意使用Monitor RGB 颜色配置文件进行标准化，以便每个人都使用更接近浏览器中实际呈现的内容。

只是好奇其他人如何解决这个问题？在某些情况下，我混合使用 CSS 和 PNG 来实现效果（尤其是需要动态更改的效果（大小/色调/阴影......），因此使用 sRGB 导出图像并使用 CSS 渐变/阴影覆盖它最终是 sRGB / Monitor RBG 的混合体，因此与 comp 略有不同。

答案格式

希望我已经正确地问了这个问题 - 合适的答案只会让您了解如何处理问题 - 或者（更好）如果有 SCSS sRGB() 函数或其他算法将 RGB / HEX 颜色转换为 sRGB 然后我会把它扔进一个SASS mixin。

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在windows中启用Proof Colors，或者你可以去View > Proof Colors

导出（另存为 Web）

  • 通过 Save for Web 导出时，请确保Convert to sRGB选中该选项。

大功告成，您现在应该可以在所有文件和 HTML 中享受色彩准确性，并且将确保图像在设备和浏览器中始终如一地显示。

于 2012-04-05T18:33:18.350 回答