马海祥博客是一个专注于分享SEO优化、网站制作、网络营销和运营思维的自媒体博客!
马海祥博客 > 网站制作 > Photoshop教程 > Sketch和Photoshop图片色彩管理模式的差异

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

时间:2016-05-04   文章来源:马海祥博客   访问次数:

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

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

Sketch和Photoshop图片色彩管理模式的差异-马海祥博客

最近,有美工提过类似的一个问题,他发现在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)、由于每一种色彩空间在这个色彩区域内都用不同形状的三角表示,所以在不同的色彩空间,即使是你认为的同一种颜色,显示效果也可能有差别。

Sketch和Photoshop图片色彩管理模式的差异-马海祥博客

假如你把一种颜色从一种色彩空间转成另一个色彩空间,实际上,这个色彩空间会尽可能的适配你要的颜色,让他们尽可能的在同一个位置(注:由于色彩空间的改变,其实转化后的颜色并不能完全一致),也就是说这个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和Photoshop图片色彩管理模式的差异-马海祥博客

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

6、要点总结

上面我们已经详细阐述了这种现象产生的原因和解决办法,在此,马海祥为大家总结了一下这篇文章的要点:

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

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

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

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

⑤、Sketch使用sRGB色彩配置。

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

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

马海祥博客点评:

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

本文发布于马海祥博客文章,如想转载,请注明原文网址摘自于http://www.mahaixiang.cn/Photoshop/1513.html,注明出处;否则,禁止转载;谢谢配合!

相关标签搜索: Photoshop   sketch   色彩管理  

上一篇:详解Photoshop的颜色设置和色彩管理
下一篇:这些Photoshop的冷知识,你知道吗?

您可能还会对以下这些文章感兴趣!

  • 如何利用Photoshop的路径工具设计制作文字图案

    自从Photoshop有了路径工具以后,文字排版就显得更加灵活,我们可以把文字做成任何想要的图案。我们可以把文字放入闭合的路径里面做成实体图形,也可以按照一条条曲线路径排版做成可爱的文字曲线,难度再较大一点的就是通过路径组合做成创意的文字图案。所以,今天我就跟大家……【查看全文

    阅读:1634关键词: photoshop   路径工具   文字图案   设计图案   日期:2014-07-12
  • 分享Photoshop的10个不为人知的PS隐藏技巧

    相信很多人在学习Photoshop的时候比较重视抠图或者修图的一些技巧,但是对于Photoshop的一些小技巧都不太重视,但是有的时候这些小技巧往往可以让你效率翻倍,相信很多需要的人都会有一种相见恨晚的感觉,所以说人还是需要不断的去探索和学习,才可以发现更多新的东西。……【查看全文

    阅读:1903关键词: photoshop   日期:2017-05-20
  • 使用Photoshop制作简洁大气的网站页面的具体步骤

    最近,随着网站的大批量的改版,网站设计、网站制作也成为了最近网络的工作的重点了,也有很多的同事、朋友问过,如何制作网站,页面切图的具体步骤,怎么使用Photoshop来设计页面。刚好最近帮朋友做个企业网站,在此借助马海祥博客的平台,将网站页面制作的具体的步骤……【查看全文

    阅读:1635关键词: Photoshop   网站页面   制作网站步骤   日期:2012-12-16
  • 你并不知道但很实用的Photoshop插件汇总

    Photoshop软件可以说是美工、网页设计师们最常用的一个强大的做图工具,可以让美工和网页设计师的工作高效便捷的进行,也为设计师们的天马行空的思维提供了实际操作的技术实现。一般我们的网页设计师设计完成后,需要将其转换制作成网页形式文件,生成HTML和CSS。然而在……【查看全文

    阅读:2664关键词: 实用ps技巧   photoshop   实用插件   日期:2013-06-26
  • 利用Photoshop工具去除图片上文字的常用方法

    作为一名站长,很多时候由于网站的需要,需要我们对网站的图片进行修改,修改的同时还想要保存我们的图片背景,这对于一些不懂得美工的站长或SEO来说,就感觉非常的麻烦,不知道如何下手,索性也就不修改了,间接的也就影响了网站的整体效果,我们在网上有时候下载了图片,可……【查看全文

    阅读:8195关键词: photoshop   ps工具   图片文字   日期:2015-08-30
  • 从PNG格式和透明度来看PC端和手机端该用哪种Png图片

    相信经常做图片的朋友对Png格式图片都很熟悉了,Png是图像文件存储格式,在网页设计中已经不是一个陌生的名词,在前端开发中经常使用到它。PNG格式有8位、24位、32位三种形式,其中8位PNG支持两种不同的透明形式(索引透明和alpha透明),24位PNG不支持透明,32位PNG在2……【查看全文

    阅读:8647关键词: PNG格式   Png透明度   PC端   手机端   Png图片   日期:2014-03-29
  • 详解利用Photoshop对图片进行自由变形的8种操作方法

    在学习Photoshop使用的过程中,我们常常会碰到很多对象变形的需求,“自由变换”就是完成这一功能的强大制作手段之一,熟练掌握它的用法会给工作带来莫大的方便。大家都知道在PS中编辑(Edit)菜单下有一个变换菜单,它的子菜单包含缩放、旋转等等,初学者在对这些菜单的理解上……【查看全文

    阅读:19863关键词: photoshop   图片变形   自由变形   日期:2014-07-27
  • Sketch和Photoshop图片色彩管理模式的差异

    色彩管理是一门严谨有效的数字化设备视觉识别的流程,它是从结果倒推的管理办法,也就是说是应用于最终端的结果的,根据不同的终端,使用不同的解决方案。跟水无常势一样,没有一个万能的色彩管理方案,只有适用于不同需求的各种方案的调用。最近发现在photoshop中图片的色彩……【查看全文

    阅读:3238关键词: sketch   photoshop   色彩管理   日期:2016-05-04
  • JPG、PNG和GIF图片的基本原理及优化方法

    一提到图片,我们就不得不从位图开始说起,位图图像(bitmap),也称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成一副图片。当放大位图时,可以看见赖以构成整个图像的无数单个方块。 我们常见的图片格式中JPG、……【查看全文

    阅读:15109关键词: JPG图片   PNG图片   GIF图片   图片原理   图片优化   优化方法   日期:2014-02-12
  • 如何利用Photoshop或illustrator让图片和文字的像素清晰可辨

    大家在设计界面和网页时,是不是经常碰到PS里绘制的图标虽然是矢量的,但还是会有许多虚边,当我们把图片放大、缩小、旋转后虚边变的更严重了,或者是在AI里绘制的精美矢量图标粘到PS里就变虚了,我们辛苦设计的作品就这样变“糊了”,这是我们双眼所不允许的,我们要让……【查看全文

    阅读:10620关键词: photoshop   illustrator   图片像素   文字像素   日期:2014-06-27
↓ 点击查看更多 ↓

互联网更多>>

SEO优化 更多>>

一个完整的企业网站首页应该具备什么因素? 如何利用极客精神优化网站的网络组件和代码