Sketch和Photoshop图片色彩管理模式的差异

时间：2022-05-25 20:27:01 | 来源：网络营销

时间：2022-05-25 20:27:01 来源：网络营销

色彩管理是一门严谨有效的数字化设备视觉识别的流程，它是从结果倒推的管理办法，也就是说是应用于最终端的结果的，根据不同的终端，使用不同的解决方案。

跟水无常势一样，没有一个万能的色彩管理方案，只有适用于不同需求的各种方案的调用。

最近，有美工提过类似的一个问题，他发现在photoshop中图片的色彩和sketch中图片的色彩不一致，我们也注意到最近有很多人一直对Sketch中的色彩管理模式非常的疑惑，所以今天亿企邦想为大家讲解一下Sketch是如何处理这些问题，另外原因是什么？在讨论Sketch的色彩模式之前，我们有必要来了解下什么是sketch？一般的色彩管理模式又是怎样的？Sketch和Photoshop图片色彩管理模式上有什么差异？

1、什么是sketch？

对于sketch，我的第一印象是Google的Sketch up，一款3D建模草图软件，那么这次亿企邦提到的Sketch，则是一款全新的设计软件。一听到设计软件，大家的反应必须是Adobe家的Photoshop，Illustrator等等。

Sketch软件的定位非常精准，首先，它是一款矢量制图软件；其次，这款软件的目标用户是APP设计师（当然用来设计网页也是可以的）。

总的来说，Sketch是一款适用于所有设计师的矢量绘图应用。矢量绘图也是目前进行网页，图标以及界面设计的最好方式。但除了矢量编辑的功能之外，我们同样添加了一些基本的位图工具，比如模糊和色彩校正。

我们尽力让Sketch容易理解并上手简单，有经验的设计师花上几个小时便能将自己的设计技巧在Sketch中自如运用，对于绝大多数的数字产品设计，Sketch都能替代Adobe Photoshop，Illustrator和Fireworks。

2、传统的色彩管理模式

颜色一般会在显示屏幕上表现为RGB色（红，绿和蓝）或者是LSB/L（色相，饱和度和亮度），但是这只是个开始，为了绘制一种真实的色彩，你需要了解这些元素属于哪种色彩空间。

这里有一种方法可能会帮助你形象化的了解这个问题。我们想象所有颜色分布在一个区域内，每一种色彩空间用在这个区域内的一个三角形表示，每个角代表红色，绿色或者蓝色等等这些颜色所能显示的最多颜色数量，所以任何RGB数值在这个三角形区域内都是一个真实存在的点，我们可以从以下方面做进一步的了解：

（1）、在一个色彩空间里存在的颜色并不是你能想象到或者看到的所有颜色；在这个三角形之外的颜色是这个显示设备所无法显示出来的，即便是你的显示器在制造特性上标明它能显示更多的颜色（注：显示的颜色数除了跟自己的显示器有关，还跟这个软件所使用的色彩空间有关系）。

（2）、由于每一种色彩空间在这个色彩区域内都用不同形状的三角表示，所以在不同的色彩空间，即使是你认为的同一种颜色，显示效果也可能有差别。

假如你把一种颜色从一种色彩空间转成另一个色彩空间，实际上，这个色彩空间会尽可能的适配你要的颜色，让他们尽可能的在同一个位置（注：由于色彩空间的改变，其实转化后的颜色并不能完全一致），也就是说这个RGB的数值会根据这个色彩空间的定义而做出改变。

如果你原先所使用的这个颜色刚好位于这个色彩空间的边缘位置，改变后的色彩空间会让你的颜色呈现更真实或者失真（注：取决于这个色彩空间所能显示的颜色数）。

简而言之：转变色彩空间是比较危险的行为，因为你所看到的颜色可能会发生变化。

在做数字设计而非印刷（平面）设计时，大部分设计师需要关注的是RGB颜色而非色彩空间，当你在HTML代码中设置颜色的时候，你只能用到RGB色。也就是说，用户所使用的浏览器将接管色彩空间的管理。

Safari浏览器遵循W3C的标准，使用sRGB色彩空间，最新版本的Chrome浏览器则使用你显示器指定的色彩空间，如果你使用一个没有经过色彩校准的显示器，同样的RGB颜色值，在不同的浏览器中看起来可能会完全不一样。

当你把一张图片保存到电脑硬盘中，这张图片文件中其实是包含色彩空间信息的，为了让RGB颜色看起来一致，这张图片中会通常会包含色彩空间的信息以便表达这个RGB数值所表达的颜色。

为了让这张图片的体积更小一些，很多网络上的图片会将此信息移除（这也就是Save For Web这个功能所做的事情），这时浏览器会将所有的图片的色彩空间默认为是sRGB，即便你之前在电脑上保存的这张图片使用了完全不一样的色彩空间。

举个例子，Mac电脑上的图片预览应用会完全遵循这张图片所预置的色彩空间来显示图片色彩。所以，现在问题来了，同一张图片在电脑中预览，和在不同的浏览器比如Safari，chrome中，颜色看起来会有差别，这也难怪大家会产生困惑。

3、Sketch中的颜色管理

我们选择不在Sketch中使用复杂的色彩管理支持，因为这会让很多用户感到困扰。于此相反，我们认为使用Sketch的大部分用户是web或者移动端设计师，因此Sketch的色彩管理也会着重对这部分用户做适配。毕竟，Web浏览器强制使用sRGB色彩空间，iOS系统上则完全没有色彩空间的概念。

所以Sketch做了什么呢？当你在Sketch中选区一种颜色，我们只存储RGB的数值，而在显示器上进行查看的时候，使用你自己的显示器所应用的色彩空间，用这种方式，我们可以保证如果你在屏幕的其它部分取了一种颜色，Sketch中显示的颜色和显示器上显示的颜色会尽可能的保持一致。

当我们导出一张图片，这张图片将会使用sRGB色彩空间，同样，这个色彩空间配置信息会被存储到这张图片的metadate中，除非在导出这张图片的时候，你勾选了“Save for Web”选项（此时这张图没有色彩空间信息）。

无论你使用哪种方式导出图片，在Safari等浏览器中，这张图都将使用sRGB色彩空间。在使用电脑的Preview软件打开这张图片的时候，它会自动识别这张图片的sRGB信息，并把它的颜色渲染为和在safari中一样（注：也就是说如果你选了“Save for web”，那么颜色就不保证在preivew里是sRGB了），我们相信通过这种方式，可以让颜色的显示尽可能的保持一致。

不过，还是有个缺点，当你打开刚刚你导出的这张图片，并在preview中显示，然后把preview窗口和Sketch窗口并排显示在同一个屏幕里。这时你会发现，这两者的颜色并不那么一致。

请记住，原因是Sketch在自己的工作区内绘制图片的时候，使用的是显示器所设置的颜色配置文件。但是当preview来绘制图像时，则直接把他当作sRGB色彩模式来绘制，不论你的屏幕色彩模式如何设置，Preview都使用sRGB模式为第一选择。

另外，Preview和Safari中的色彩也可能不一致，因为他们其中的一个会完全忽略掉屏幕的配置文件。请一定要注意，你的网站也可能会被另一个安卓设备所查看，这个安卓设备可能完全没有使用sRGB色彩空间。或者，在一台年代比较久远的iPHone设备中，它也可能会使用完全不同的色彩配置文件（注：配置文件导致图片在不同设备上颜色显示的差异）。

结论就是，去纠结不同数字设备上显示的图形颜色的细微差异是没有太大意义的。但是，Sketch尽可能的让这种差异不明显。

如果你在sketch和在Css中使用同一个RGB颜色值，颜色会是非常统一的（前提是你的浏览器遵循W3C的标准来渲染图形）。

Sketch让你在保存时永远都是sRGB模式，或者你可以选择去掉色彩模式配置文件，让保存的文件小那么一点点，但是不管你如何保存，最终图片在web浏览器里的显示效果都是一致的。

作为一个web或者移动端设计师，这应该是你期望的显示效果，这也是Sketch工作的原理。

对此，你只需要注意一点，使用屏幕取色器从不同的窗口中取的颜色并不能保持一致的RGB颜色值（注：因为不同的应用可能使用不同的色彩空间）。

4、Photoshop的色彩管理方案

关于Photoshop的色彩管理，我曾在亿企邦《详解Photoshop的颜色设置和色彩管理》的一文中跟大家做过详细的介绍，在Photoshop CS3中，要查看图像的颜色模式或要在各种颜色模式之间进行适当地选择。

目前，在图像文件中最常用的颜色模式主要有RGB颜色、CMYK颜色、Lab颜色、灰度模式、位图模式等，下面亿企邦来简要介绍一下各种颜色模式的特点。

（1）、RGB模式

RGB模式又称“真彩色模式”，是电脑美工设计人员最熟悉的色彩模式。RGB模式是将红（Red）、绿（Green）、蓝（Blue）3种基本颜色进行颜色加法（加色法），配置出绝大部分肉眼能看到的颜色（RGB模式一般用于图像处理）。

（2）、CMYK模式

这是一种印刷模式，其中的4个字母分别是指青色（Cyan）、洋红（Magenta）、黄色（Yellow）和黑色（Black），这4种颜色通过减色法形成CMYK颜色模式，其中的黑色是用来增加对比以弥补CMY产生黑度不足之用。

CMYK模式在本质上与EGB模式没有什么区别，只是在产生色彩的原理上有所不同（CMYK模式一般只用于印刷）。

（3）、灰度模式

这是Photoshop处理图像的过程中广泛运用的一种模式，灰度图像中只有灰度颜色儿没有彩色，Photoshop将灰度图像看成只有一种颜色通道的数字图像。

（4）、位图模式

位图模式图像的每个像素仅以1位表示，即其强度要么为0，要么为1，分别对应颜色的黑与白，我们可以通过对话框来选择输出图像的分辨率和转换方法。

（5）、Lab颜色模式

这个模式是以一个亮度分量L以及两个颜色分量a与b来表示颜色的。通常情况下，Lab模式很少使用，该模式是Photoshop的内部颜色模式，它是图像由RGB模式转换为CMYK模式的中间模式。

5、Sketch与Photoshop对比

近两年，网页和UI设计师当中最火的工具绝对是Photoshop CC 和 Sketch 3 了。

Photoshop自不必说，业界良心，经典老炮，设计必备，设计师几乎人手一份；Sketch 是新晋神器，功能完备，清量易用。

所以，问题来了，新老神器正面对比孰优孰劣？作为网页设计师/UI设计师，选择哪个工具更靠谱？接下来，亿企邦用一张信息图帮你做选择！

整体来说，亿企邦觉得Sketch是一个为网页设计和UI设计而打造的软件，但是无法完全替代Photoshop；Photoshop是一个优秀的图片处理软件，但是在UI设计和网页设计上并不是十分的顺手，但对于使用Photoshop习惯的设计师来说，Photoshop可以借助一些插件来辅助的话，可能就没有太大的差异了（具体可查看亿企邦《你并不知道但很实用的Photoshop插件汇总》的相关介绍）。

6、要点总结

上面我们已经详细阐述了这种现象产生的原因和解决办法，在此，亿企邦为大家总结了一下这篇文章的要点：

①、大部分图片文件内存储有色彩配置文件文件。

②、每一个应用会使用自己独立的色彩配置文件或者由图片色彩配置文件来决定。

③、“Save for Web”功能会丢掉图片文件的色彩配置内容，让其体积稍小。

④、如果一张图片没有色彩配置文件，那么这张图片的显示效果将由显示这张图的应用程序优先决定。

⑤、Sketch使用sRGB色彩配置。

⑥、另外，我们Photoshop等应用则可以在新建图片文件的时候选择不同的色彩配置文件。

⑦、每种色彩空间显示的颜色数目会有差异，因此导致图片颜色不一致。

亿企邦点评：

虽然Sketch是一个为网页设计和UI设计而打造的软件，但其功能仍然无法完全替代Photoshop的，photoshop主要是修图合成具有非常好的性能，当然作为好的图象软件，它也是最好的绘画软件，也是个巨大又强大的软件，需要使用好，灵活使用，需要比较长期的学习和研究。