photoshop和sketch中圖片色彩不一致的原因和解決辦法

2018-08-20 5165 0

靜電說:之前有用戶提過類似的問題,他發(fā)現(xiàn)在photoshop中圖片的色彩和sketch中圖片的色彩不一致。下面看看靜電翻譯的一篇 bohemiancoding團(tuán)隊(duì)發(fā)表的博文,詳細(xì)闡述了這種現(xiàn)象產(chǎn)生的原因和解決辦法。不要排斥這篇深度技術(shù)文章, 我們需要知道原理,才能工作的更好??偨Y(jié)下這篇文章的要點(diǎn):


 

1. 大部分圖片文件內(nèi)存儲有色彩配置文件文件

2. 每一個(gè)應(yīng)用會使用自己獨(dú)立的色彩配置文件或者由圖片色彩配置文件來決定。

3. “Save for Web”功能會丟掉圖片文件的色彩配置內(nèi)容,讓其體積稍小。

4. 如果一張圖片沒有色彩配置文件,那么這張圖片的顯示效果將由顯示這張圖的應(yīng)用程序優(yōu)先決定。

5. Sketch使用sRGB色彩配置

6. 另外,我們Photoshop等應(yīng)用則可以在新建圖片文件的時(shí)候選擇不同的色彩配置文件。

7.每種色彩空間顯示的顏色數(shù)目會有差異,因此導(dǎo)致圖片顏色不一致。


 

f960568fc9686ac725af237b05f8.jpg

以上是phptoshop新建文件時(shí)出現(xiàn)的色彩配置文件選項(xiàng)

 

以下文章由靜電譯自bohemiancoding團(tuán)隊(duì)博客,原文出處:https://blog.sketchapp.com/post/133932511180/colors-in-sketch  轉(zhuǎn)載請注明譯者和出處。


 


 

我們注意到最近用戶一直對Sketch中的色彩管理模式非常的疑惑,所以今天我們想為大家講解一下Sketch是如何處理這些問題,另外原因是什么。在討論Sketch的色彩模式之前,我們有必要來了解下一般的色彩管理模式。


 

傳統(tǒng)的色彩管理模式

顏色一般會在顯示屏幕上表現(xiàn)為RGB色(紅,綠和藍(lán))或者是LSB/L(色相,飽和度和亮度),但是這只是個(gè)開始。為了繪制一種真實(shí)的色彩,你需要了解這些元素屬于哪種色彩空間。


 

這里有一種方法可能會幫助你形象化的了解這個(gè)問題。我們想象所有顏色分布在一個(gè)區(qū)域內(nèi),每一種色彩空間用在這個(gè)區(qū)域內(nèi)的一個(gè)三角形表示,每個(gè)角代表紅色,綠 色或者藍(lán)色等等這些顏色所能顯示的最多顏色數(shù)量。所以任何RGB數(shù)值在這個(gè)三角形區(qū)域內(nèi)都是一個(gè)真實(shí)存在的點(diǎn)。我們可以從以下方面做進(jìn)一步的了解:


 

  1. 在一個(gè)色彩空間里存在的顏色并不是你能想象到或者看到的所有顏色;在這個(gè)三角形之外的顏色是這個(gè)顯示設(shè)備所無法顯示出來的,即便是你的顯示器在制造特性上標(biāo)明它能顯示更多的顏色。(譯者注:顯示的顏色數(shù)除了跟自己的顯示器有關(guān),還跟這個(gè)軟件所使用的色彩空間有關(guān)系。)

  2. 由于每一種色彩空間在這個(gè)色彩區(qū)域內(nèi)都用不同形狀的三角表示,所以在不同的色彩空間,即使是你認(rèn)為的同一種顏色,顯示效果也可能有差別。

695f568fc99e32f87574be4878d9.jpg


 

假如你把一種顏色從一種色彩空間轉(zhuǎn)成另一個(gè)色彩空間,實(shí)際上,這個(gè)色彩空間會盡可能的適配你要的顏色,讓他們盡可能的在同一個(gè)位置(譯者注:由于色彩空間的 改變,其實(shí)轉(zhuǎn)化后的顏色并不能完全一致)。也就是說這個(gè)RGB的數(shù)值會根據(jù)這個(gè)色彩空間的定義而做出改變。如果你原先所使用的這個(gè)顏色剛好位于這個(gè)色彩空 間的邊緣位置,改變后的色彩空間會讓你的顏色呈現(xiàn)更真實(shí)或者失真(譯者注:取決于這個(gè)色彩空間所能顯示的顏色數(shù))。簡而言之:轉(zhuǎn)變色彩空間是比較危險(xiǎn)的行 為,因?yàn)槟闼吹降念伾赡軙l(fā)生變化。


 

在做數(shù)字設(shè)計(jì)而非印刷(平面)設(shè)計(jì)時(shí),大部分設(shè)計(jì)師需要關(guān)注的是RGB顏色而非色彩空間。當(dāng)你在 HTML代碼中設(shè)置顏色的時(shí)候,你只能用到RGB色。也就是說,用戶所使用的瀏覽器將接管色彩空間的管理。Safari瀏覽器遵循W3C的標(biāo)準(zhǔn),使用 sRGB色彩空間。最新版本的Chrome瀏覽器則使用你顯示器指定的色彩空間,如果你使用一個(gè)沒有經(jīng)過色彩校準(zhǔn)的顯示器,同樣的RGB顏色值,在不同的 瀏覽器中看起來可能會完全不一樣。


 

當(dāng)你把一張圖片保存到電腦硬盤中,這張圖片文件中其實(shí)是包含色彩空間信息的。為了讓RGB顏色看起來一 致,這張圖片中會通常會包含色彩空間的信息以便表達(dá)這個(gè)RGB數(shù)值所表達(dá)的顏色。為了讓這張圖片的體積更小一些,很多網(wǎng)絡(luò)上的圖片會將此信息移除(這也就 是Save For Web這個(gè)功能所做的事情),這時(shí)瀏覽器會將所有的圖片的色彩空間默認(rèn)為是sRGB,即便你之前在電腦上保存的這張圖片使用了完全不一樣的色彩空間。舉個(gè) 例子,Mac電腦上的圖片預(yù)覽應(yīng)用會完全遵循這張圖片所預(yù)置的色彩空間來顯示圖片色彩。所以,現(xiàn)在問題來了,同一張圖片在電腦中預(yù)覽,和在不同的瀏覽器比 如Safari,chrome中,顏色看起來會有差別,這也難怪大家會產(chǎn)生困惑。


 

Sketch中的顏色管理

我們選擇不在Sketch中使用復(fù)雜的色彩管理支持,因?yàn)檫@會讓很多用戶感到困擾。于此相反,我們認(rèn)為使用Sketch的大部分用戶是web或者移動(dòng)端設(shè)計(jì) 師,因此Sketch的色彩管理也會著重對這部分用戶做適配。畢竟,Web瀏覽器強(qiáng)制使用sRGB色彩空間,iOS系統(tǒng)上則完全沒有色彩空間的概念。


 

所以Sketch做了什么呢?當(dāng)你在Sketch中選區(qū)一種顏色,我們只存儲RGB的數(shù)值。而在顯示器上進(jìn)行查看的時(shí)候,使用你自己的顯示器所應(yīng)用的色彩空 間。用這種方式,我們可以保證如果你在屏幕的其它部分取了一種顏色,Sketch中顯示的顏色和顯示器上顯示的顏色會盡可能的保持一致。


 

當(dāng)我們導(dǎo)出一張圖片,這張圖片將會使用sRGB色彩空間,同樣,這個(gè)色彩空間配置信息會被存儲到這張圖片的metadate中,除非在導(dǎo)出這張圖片的時(shí)候, 你勾選了“Save for Web”選項(xiàng)(此時(shí)這張圖沒有色彩空間信息)。無論你使用哪種方式導(dǎo)出圖片,在Safari等瀏覽器中,這張圖都將使用sRGB色彩空間。在使用電腦的 Preview軟件打開這張圖片的時(shí)候,它會自動(dòng)識別這張圖片的sRGB信息,并把它的顏色渲染為和在safari中一樣(譯者注:也就是說如果你選了 “Save for web”,那么顏色就不保證在preivew里是sRGB了)。我們相信通過這種方式,可以讓顏色的顯示盡可能的保持一致。


 

不過,還是有個(gè)缺點(diǎn)。當(dāng)你打開剛剛你導(dǎo)出的這張圖片,并在preview中顯示,然后把preview窗口和Sketch窗口并排顯示在同一個(gè)屏幕里。這時(shí) 你會發(fā)現(xiàn),這兩者的顏色并不那么一致。請記住,原因是Sketch在自己的工作區(qū)內(nèi)繪制圖片的時(shí)候,使用的是顯示器所設(shè)置的顏色配置文件。但是當(dāng) preview來繪制圖像時(shí),則直接把他當(dāng)作sRGB色彩模式來繪制,不論你的屏幕色彩模式如何設(shè)置,Preview都使用sRGB模式為第一選擇。


 

另外,Preview和Safari中的色彩也可能不一致,因?yàn)樗麄兤渲械囊粋€(gè)會完全忽略掉屏幕的配置文件。請一定要注意,你的網(wǎng)站也可能會被另一個(gè)安卓設(shè) 備所查看,這個(gè)安卓設(shè)備可能完全沒有使用sRGB色彩空間?;蛘?,在一臺年代比較久遠(yuǎn)的iPHone設(shè)備中,它也可能會使用完全不同的色彩配置文件。(譯 者注:配置文件導(dǎo)致圖片在不同設(shè)備上顏色顯示的差異)


 

結(jié)論就是,去糾結(jié)不同數(shù)字設(shè)備上顯示的圖形顏色的細(xì)微差異是沒有太大意義的。但是,Sketch盡可能的讓這種差異不明顯。如果你在sketch和在Css中使用同一個(gè)RGB顏色值,顏色會是非常統(tǒng)一的(前提是你的瀏覽器遵循W3C的標(biāo)準(zhǔn)來渲染圖形)。


 

Sketch 讓你在保存時(shí)永遠(yuǎn)都是sRGB模式,或者你可以選擇去掉色彩模式配置文件,讓保存的文件小那么一點(diǎn)點(diǎn)。但是,不管你如何保存,最終圖片在web瀏覽器里的 顯示效果都是一致的。作為一個(gè)web或者移動(dòng)端設(shè)計(jì)師,這應(yīng)該是你期望的顯示效果,這也是Sketch工作的原理。


 

只需要注意一點(diǎn),使用屏幕取色器從不同的窗口中取的顏色并不能保持一致的RGB顏色值(譯者注:因?yàn)椴煌膽?yīng)用可能使用不同的色彩空間)。

 


 


 


7
評論區(qū)(0)
正在加載評論...