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


15

我已经阅读了道格·艾弗里(Doug Avery)的这篇文章,他在其中解释了如何在Adobe Photoshop中禁用“色彩管理”以及后续文章,以应对评论者对其提出的反对和支持sRGB的骚动,尽管我仍然不相信我使用哪种技术应该适用于我的个人工作流程。
根据我在阅读本文时收集的信息(如果我错了,请纠正我),正确的处理方法是让Photoshop将颜色管理为sRGB并在需要更多颜色时使用证明颜色。 “忠实”预览您的工作。

目前,我有一个完整的网站项目,该项目在设计时已禁用颜色配置文件。之所以以这种方式开始,是因为几个月前我注意到,尽管通过Photoshop自己的Eyedropper Tool正确报告了Photoshop渲染的颜色,但从屏幕截图进行测量时,其颜色与打开以PNG。
快速搜索后,我发现了我之前引用的帖子,并盲目地应用了它的建议(甚至没有注意到后续操作,也没有阅读有关它的问题的信息)。从那时起,我就再也没有遇到任何问题:我在Photoshop中拍摄了我的工作的屏幕截图,并将其上传给开发人员使用。在开发设计时,他可以看到与我所见和使用的颜色相同的颜色,而且我不必无所不用其极地了解我的实际工作。

我的问题:

  • 当sRGB仅通过强迫您使用校样颜色而增加工作量时,是否真的有必要在Web设计中使用sRGB(我理解在摄影或打印之类的东西中不使用sRGB的含义)?(这就是我的看法,如果我错了,请纠正我)

  • 由于使用ICC配置文件进行保存会导致某些浏览器正确应用配置文件,而另一些浏览器则忽略该配置文件,因此文章还说,最好仅使用sRGB设计然后不使用ICC配置文件进行保存。这样做不是一开始就违反了使用颜色配置文件的目的吗?还是我误解了文章的内容?


1
我认为马克·爱德华兹的答案不正确。如果您将颜色配置文件设置为“显示器”,那么您的颜色只会对一个人看起来很棒:您!sRGB可以让更多人看到更一致的图像。阅读此链接。它提供了有关此事的最佳信息。gballard.net/psd/saveforwebshift.html

Answers:


5

我的观点(有时是有争议的):建议使用sRGB进行用户界面和Web设计的人们都很疯狂。这就是为什么。

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

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

如果您没有这三者,那么色彩管理将根本无法工作。拥有其中一两个事物意味着整个链条都破裂了。

麻烦的是:从Photoshop保存的所有PNG和GIF都不能具有ICC配置文件,因此在大多数情况下,编号2是不可能的(尽管JPEG可以具有配置文件)。而且许多浏览器的行为均不正确,因此在很多情况下,第3个数字也不存在。

如果要在网络上显示照片,则最好的选择是破坏性地转换为sRGB 嵌入sRGB ICC配置文件,并且仅使用JPEG。如果要构建Web用户界面元素,那么最好的选择是将Photoshop设置为定位“设备RGB”(没有配置文件或颜色管理的本色)。

道格·艾弗里(Doug Avery)的建议很好。他职位的重要部分是他用来比较所有结果的网格。他追求的是匹配图像中的HTML,CSS和颜色,这是正确的目标。只有以相同的方式对待图像中的颜色值和HTML / CSS中使用的颜色值,才有可能。

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

色彩管理和UI设计

并在此处与Adobe工程师争辩说:

对于Web保存,对于PNG和GIF,默认情况下应禁用“转换为sRGB”

当sRGB仅通过强迫您使用校样颜色而增加工作量时,是否真的有必要在Web设计中使用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,您对此无能为力。

4
我家里有6台计算机,工作中有2台校准的显示器。一台经过校准的显示器的色域不大,因此即使进行校准,也不值得信赖。家里的所有六个都有现货供应,并且它们的显示颜色都不同。这是现实世界中的一课。这就是我学会停止烦恼和爱护它的方式。
horatio

3
是的 目标是页面内UI元素的一致性,而不是跨不同显示的一致性(在大多数情况下这是不可能的)。
马克·爱德华兹

3

如果在Mac上进行开发/设计,则绝对需要配置文件。

如果我在Photoshop中以Adobe RGB或ProPhoto RGB的形式处理图像(好的相机会使用2个配置文件),那么当PSD保存为Web并在Windows PC上查看时,颜色会偏移很多。

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

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


2

我想确认以下几段的陈述:

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

由于使用ICC配置文件进行保存会导致某些浏览器正确应用该配置文件,而另一些浏览器则忽略它,因此该文章还说,最好是仅使用sRGB设计然后不使用ICC配置文件进行保存。这样做不是一开始就违反了使用颜色配置文件的目的吗?还是我误解了文章的内容?

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

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

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

我保存了没有配置文件的最终文件,它们看起来像预期的那样。为什么呢?我认为,因为没有配置文件的图形会被解释为好像已附加了sRGB配置文件(可能有人对此有所了解)。

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


1

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

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


“浏览器'期望'sRGB”-之类的。跨浏览器的行为混合。大多数将未标记的图像渲染为设备RGB(无转换)。OS X上的Safari 6(错误地)假定未标记的图像是sRGB并进行转换。
马克·爱德华兹

0

Adobe Photoshop CC(2017)的更新:

  1. 将工作空间保留为默认设置(北美通用2)

  2. 别再改变

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.