在为 Web 设计时,我应该如何处理颜色配置文件?

平面设计 adobe-photoshop 网站设计 颜色配置文件
2022-01-03 20:28:27

我已经阅读了 Doug Avery 的这篇文章,他解释了如何在 Adob​​e Photoshop 中禁用颜色管理,以及后续文章以回应反对它并支持 sRGB 的评论者的骚动,尽管我仍然不相信我使用什么技术应该适用于我的个人工作流程。
根据我在阅读文章时收集到的信息(如果我错了,请纠正我),处理这个问题的正确方法是让 Photoshop 将颜色管理为 sRGB,并在需要更多颜色时使用Proof Colors “忠实”预览您的作品。

目前,我有一个设计为禁用颜色配置文件的整个网站项目。我是这样开始的,因为几个月前我注意到 Photoshop 渲染的颜色虽然由 Photoshop 自己的吸管工具正确报告,但在从屏幕截图测量时与我在谷歌浏览器中打开导出为巴布亚新几内亚。
在快速搜索之后,我发现了我之前引用的帖子并盲目地应用了它的建议(甚至没有注意到后续行动,也没有阅读它的问题)。从那时起,我就没有遇到任何问题:我在 Photoshop 中截取我的工作截图,然后上传它们以供开发人员使用。他可以看到我在开发设计时看到和使用的相同颜色,而且我不必跳过箍来查看我实际在做什么。

我的问题:

  • 是否真的有必要在网页设计中使用 sRGB(我理解在摄影或印刷等方面不使用它的含义),因为它只会通过强制您使用Proof Colors来增加更多工作?(我就是这么看的,如有错误请指正)

  • 由于使用ICC 配置文件保存会导致某些浏览器正确应用配置文件,而其他浏览器会忽略它,该文章还说,最好使用 sRGB 进行设计,然后在不使用ICC 配置文件的情况下保存。这不是首先破坏了使用颜色配置文件的目的吗?还是我误解了文章所说的内容?

4个回答

我的(有时是有争议的)观点:推荐使用 sRGB 进行用户界面和网页设计的人是疯了。这就是为什么。

为了使色彩管理适用于屏幕设计,必须完成三件重要的事情。

  1. 必须使用正确的工作流程创建图像。
  2. 必须使用正确的 ICC 颜色配置文件保存图像。
  3. 图像必须正确显示,符合图像的配置文件和显示环境(浏览器和操作系统等)。

如果你没有这三个,色彩管理根本不起作用。拥有一两个这样的东西意味着整个链条都被打破了。

这就是问题所在:从 Photoshop 保存的所有 PNG 和 GIF 都不能有 ICC 配置文件,所以在大多数情况下,第 2 个是不可能的(虽然 JPEG 可以有配置文件)。而且很多浏览器的行为不正确,所以在很多情况下,第 3 号也被淘汰了。

如果您在 Web 上显示照片,最好的选择是破坏性地转换为 sRGB嵌入 sRGB ICC 配置文件,并且只使用 JPEG。如果您正在构建 Web 用户界面元素,那么您最好的选择是将 Photoshop 设置为以“设备 RGB”(没有配置文件或颜色管理的原生颜色)为目标。

Doug Avery 的建议很好。他的帖子的重要部分是他用来比较所有结果的网格。他追求的是匹配图像中的 HTML、CSS 和颜色,这是正确的目标。只有当图像中的颜色值和 HTML/CSS 中使用的颜色值以相同的方式处理时,这才有可能。

我在这里写了很多关于这个主题的文章:

色彩管理和 UI 设计

并在这里与一位 Adob​​e 工程师争论不休:

Save For Web,默认情况下,对于 PNG 和 GIF,转换为 sRGB 应该是关闭的

是否真的有必要在网页设计中使用 sRGB(我理解在摄影或打印等方面不使用它的含义),因为它只会通过强制您使用校样颜色来增加更多工作?(我就是这么看的,如有错误请指正)

不,这是没有必要的。事实上,假设 sRGB 有助于表明对该主题缺乏理解。在某些情况下,您绝对应该使用 sRGB,但它属于完整的照片工作流程的一部分:您需要使用 JPEG 图像、使用 sRGB 并嵌入 sRGB 配置文件。如果不做所有事情并期望从色彩管理中获得任何好处,您就无法做到其中的一部分。

如果您从 Photoshop 保存 GIF 或 PNG,那么您的图像中将永远不会有 ICC 配置文件,因此您需要确保您的工作流程已为此设置以及浏览器将如何处理图像。

由于使用 ICC 配置文件保存会导致某些浏览器正确应用配置文件,而其他浏览器会忽略它,文章还说,最好只使用 sRGB 进行设计,然后在不使用 ICC 配置文件的情况下保存。这不是首先破坏了使用颜色配置文件的目的吗?还是我误解了文章所说的内容?

请记住:

  • GIF 不能有 ICC 配置文件。
  • 由 Photoshop 保存的 PNG 不能具有 ICC 配置文件。
  • PNG 可以有配置文件,但很少与它们一起保存。
  • JPEG 可以有配置文件。
  • 具有配置文件的图像的浏览器渲染因浏览器而异。
  • HTML 和 CSS 中的颜色通常被假定为设备 RGB 或 sRGB,而您无法控制它。

如果在 Mac 上开发/设计,肯定需要配置文件。

如果我在 Photoshop 中使用 Adob​​e RGB 或 ProPhoto RGB 处理我的图像(好的相机使用的 2 个配置文件),那么当 PSD 保存为 Web 并在 Windows PC 上查看时,颜色会发生很大变化。

对于 Mac 用户,需要在 WORKING 文件中使用 sRGB 配置文件来保持跨平台的颜色。

最终发布的文件(为 web 保存)没有配置文件,但在 Mac 上需要在创建过程中使用 sRGB——如果您希望颜色在 Mac 和 Windows 上看起来相似,至少是我们的。

我想确认这些段落的陈述:

根据我在阅读文章时收集到的信息(如果我错了,请纠正我),处理这个问题的正确方法是让 Photoshop 将颜色管理为 sRGB,并在需要更多颜色时使用 Proof Colors “忠实”预览您的作品。

由于使用 ICC 配置文件保存会导致某些浏览器正确应用配置文件,而其他浏览器会忽略它,文章还说,最好只使用 sRGB 进行设计,然后在不使用 ICC 配置文件的情况下保存。这不是首先破坏了使用颜色配置文件的目的吗?还是我误解了文章所说的内容?

我区分生产环境(已知和自控)和输出设备,并根据最适合照片的方式安排工作流程。让我解释:

当我从数码相机打开照片时,我可以选择使用包含的 sRGB 配置文件打开它们。如果我在没有配置文件的情况下打开它们,我会丢失重要信息(颜色看起来不同)。所以我也保留配置文件以供进一步处理。使用包含的配置文件,Photoshop 可以将颜色调整为我的显示器配置文件、我为校样颜色访问的配置文件、我的打印机配置文件以及我同事正在使用的所有配置文件。

如果您在设计文件中使用照片,那么您应该创建带有附加配置文件的空白画布。如果您将设计文件而不是最终图形交给开发人员,最好仍然附上配置文件......

我保存没有配置文件的最终文件,它们看起来像预期的那样。为什么呢?我认为因为没有配置文件的图形被解释为好像附加了一个 sRGB 配置文件(也许有人知道这方面的参考)。

而且我还猜想,当您截取屏幕截图时,您的系统会将显示器配置文件中的颜色转换为 sRGB(或者您有一个非常接近 sRGB 色彩空间的显示器)。

第一个问题的答案:如果您在工作流程中不使用 sRGB,那么来自其他色彩空间的所有使用过的图像最终将在网络上没有准确甚至被裁剪的颜色。大多数没有您导入或使用的配置文件的图像都可以正常工作,因为它们已经在正确的色彩空间中(例如相机中的标准空间)。

第二个问题,是的,目的被打败了,因为颜色配置文件的使用尚未在网络上以您可以使用它们的方式实现。浏览器“期望”sRGB,因此无需附加它们,这只会增加文件大小。因为很多浏览器不理解配置文件,所以提供带有配置文件的图像不是一个好主意,比如 Adob​​e rgb 1998,因为颜色会被裁剪。