Sketch和Photoshop圖片色彩管理模式的差異

時間：2022-05-25 20:27:01 | 來源：網(wǎng)絡(luò)營銷

時間：2022-05-25 20:27:01 來源：網(wǎng)絡(luò)營銷

色彩管理是一門嚴(yán)謹(jǐn)有效的數(shù)字化設(shè)備視覺識別的流程，它是從結(jié)果倒推的管理辦法，也就是說是應(yīng)用于最終端的結(jié)果的，根據(jù)不同的終端，使用不同的解決方案。

跟水無常勢一樣，沒有一個萬能的色彩管理方案，只有適用于不同需求的各種方案的調(diào)用。

最近，有美工提過類似的一個問題，他發(fā)現(xiàn)在photoshop中圖片的色彩和sketch中圖片的色彩不一致，我們也注意到最近有很多人一直對Sketch中的色彩管理模式非常的疑惑，所以今天億企邦想為大家講解一下Sketch是如何處理這些問題，另外原因是什么？在討論Sketch的色彩模式之前，我們有必要來了解下什么是sketch？一般的色彩管理模式又是怎樣的？Sketch和Photoshop圖片色彩管理模式上有什么差異？

1、什么是sketch？

對于sketch，我的第一印象是Google的Sketch up，一款3D建模草圖軟件，那么這次億企邦提到的Sketch，則是一款全新的設(shè)計軟件。一聽到設(shè)計軟件，大家的反應(yīng)必須是Adobe家的Photoshop，Illustrator等等。

Sketch軟件的定位非常精準(zhǔn)，首先，它是一款矢量制圖軟件；其次，這款軟件的目標(biāo)用戶是APP設(shè)計師（當(dāng)然用來設(shè)計網(wǎng)頁也是可以的）。

總的來說，Sketch是一款適用于所有設(shè)計師的矢量繪圖應(yīng)用。矢量繪圖也是目前進行網(wǎng)頁，圖標(biāo)以及界面設(shè)計的最好方式。但除了矢量編輯的功能之外，我們同樣添加了一些基本的位圖工具，比如模糊和色彩校正。

我們盡力讓Sketch容易理解并上手簡單，有經(jīng)驗的設(shè)計師花上幾個小時便能將自己的設(shè)計技巧在Sketch中自如運用，對于絕大多數(shù)的數(shù)字產(chǎn)品設(shè)計，Sketch都能替代Adobe Photoshop，Illustrator和Fireworks。

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

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

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

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

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

假如你把一種顏色從一種色彩空間轉(zhuǎn)成另一個色彩空間，實際上，這個色彩空間會盡可能的適配你要的顏色，讓他們盡可能的在同一個位置（注：由于色彩空間的改變，其實轉(zhuǎn)化后的顏色并不能完全一致），也就是說這個RGB的數(shù)值會根據(jù)這個色彩空間的定義而做出改變。

如果你原先所使用的這個顏色剛好位于這個色彩空間的邊緣位置，改變后的色彩空間會讓你的顏色呈現(xiàn)更真實或者失真（注：取決于這個色彩空間所能顯示的顏色數(shù)）。

簡而言之：轉(zhuǎn)變色彩空間是比較危險的行為，因為你所看到的顏色可能會發(fā)生變化。

在做數(shù)字設(shè)計而非印刷（平面）設(shè)計時，大部分設(shè)計師需要關(guān)注的是RGB顏色而非色彩空間，當(dāng)你在HTML代碼中設(shè)置顏色的時候，你只能用到RGB色。也就是說，用戶所使用的瀏覽器將接管色彩空間的管理。

Safari瀏覽器遵循W3C的標(biāo)準(zhǔn)，使用sRGB色彩空間，最新版本的Chrome瀏覽器則使用你顯示器指定的色彩空間，如果你使用一個沒有經(jīng)過色彩校準(zhǔn)的顯示器，同樣的RGB顏色值，在不同的瀏覽器中看起來可能會完全不一樣。

當(dāng)你把一張圖片保存到電腦硬盤中，這張圖片文件中其實是包含色彩空間信息的，為了讓RGB顏色看起來一致，這張圖片中會通常會包含色彩空間的信息以便表達這個RGB數(shù)值所表達的顏色。

為了讓這張圖片的體積更小一些，很多網(wǎng)絡(luò)上的圖片會將此信息移除（這也就是Save For Web這個功能所做的事情），這時瀏覽器會將所有的圖片的色彩空間默認(rèn)為是sRGB，即便你之前在電腦上保存的這張圖片使用了完全不一樣的色彩空間。

舉個例子，Mac電腦上的圖片預(yù)覽應(yīng)用會完全遵循這張圖片所預(yù)置的色彩空間來顯示圖片色彩。所以，現(xiàn)在問題來了，同一張圖片在電腦中預(yù)覽，和在不同的瀏覽器比如Safari，chrome中，顏色看起來會有差別，這也難怪大家會產(chǎn)生困惑。

3、Sketch中的顏色管理

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

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

當(dāng)我們導(dǎo)出一張圖片，這張圖片將會使用sRGB色彩空間，同樣，這個色彩空間配置信息會被存儲到這張圖片的metadate中，除非在導(dǎo)出這張圖片的時候，你勾選了“Save for Web”選項（此時這張圖沒有色彩空間信息）。

無論你使用哪種方式導(dǎo)出圖片，在Safari等瀏覽器中，這張圖都將使用sRGB色彩空間。在使用電腦的Preview軟件打開這張圖片的時候，它會自動識別這張圖片的sRGB信息，并把它的顏色渲染為和在safari中一樣（注：也就是說如果你選了“Save for web”，那么顏色就不保證在preivew里是sRGB了），我們相信通過這種方式，可以讓顏色的顯示盡可能的保持一致。

不過，還是有個缺點，當(dāng)你打開剛剛你導(dǎo)出的這張圖片，并在preview中顯示，然后把preview窗口和Sketch窗口并排顯示在同一個屏幕里。這時你會發(fā)現(xiàn)，這兩者的顏色并不那么一致。

請記住，原因是Sketch在自己的工作區(qū)內(nèi)繪制圖片的時候，使用的是顯示器所設(shè)置的顏色配置文件。但是當(dāng)preview來繪制圖像時，則直接把他當(dāng)作sRGB色彩模式來繪制，不論你的屏幕色彩模式如何設(shè)置，Preview都使用sRGB模式為第一選擇。

另外，Preview和Safari中的色彩也可能不一致，因為他們其中的一個會完全忽略掉屏幕的配置文件。請一定要注意，你的網(wǎng)站也可能會被另一個安卓設(shè)備所查看，這個安卓設(shè)備可能完全沒有使用sRGB色彩空間。或者，在一臺年代比較久遠的iPHone設(shè)備中，它也可能會使用完全不同的色彩配置文件（注：配置文件導(dǎo)致圖片在不同設(shè)備上顏色顯示的差異）。

結(jié)論就是，去糾結(jié)不同數(shù)字設(shè)備上顯示的圖形顏色的細微差異是沒有太大意義的。但是，Sketch盡可能的讓這種差異不明顯。

如果你在sketch和在Css中使用同一個RGB顏色值，顏色會是非常統(tǒng)一的（前提是你的瀏覽器遵循W3C的標(biāo)準(zhǔn)來渲染圖形）。

Sketch讓你在保存時永遠都是sRGB模式，或者你可以選擇去掉色彩模式配置文件，讓保存的文件小那么一點點，但是不管你如何保存，最終圖片在web瀏覽器里的顯示效果都是一致的。

作為一個web或者移動端設(shè)計師，這應(yīng)該是你期望的顯示效果，這也是Sketch工作的原理。

對此，你只需要注意一點，使用屏幕取色器從不同的窗口中取的顏色并不能保持一致的RGB顏色值（注：因為不同的應(yīng)用可能使用不同的色彩空間）。

4、Photoshop的色彩管理方案

關(guān)于Photoshop的色彩管理，我曾在億企邦《詳解Photoshop的顏色設(shè)置和色彩管理》的一文中跟大家做過詳細的介紹，在Photoshop CS3中，要查看圖像的顏色模式或要在各種顏色模式之間進行適當(dāng)?shù)剡x擇。

目前，在圖像文件中最常用的顏色模式主要有RGB顏色、CMYK顏色、Lab顏色、灰度模式、位圖模式等，下面億企邦來簡要介紹一下各種顏色模式的特點。

（1）、RGB模式

RGB模式又稱“真彩色模式”，是電腦美工設(shè)計人員最熟悉的色彩模式。RGB模式是將紅（Red）、綠（Green）、藍（Blue）3種基本顏色進行顏色加法（加色法），配置出絕大部分肉眼能看到的顏色（RGB模式一般用于圖像處理）。

（2）、CMYK模式

這是一種印刷模式，其中的4個字母分別是指青色（Cyan）、洋紅（Magenta）、黃色（Yellow）和黑色（Black），這4種顏色通過減色法形成CMYK顏色模式，其中的黑色是用來增加對比以彌補CMY產(chǎn)生黑度不足之用。

CMYK模式在本質(zhì)上與EGB模式?jīng)]有什么區(qū)別，只是在產(chǎn)生色彩的原理上有所不同（CMYK模式一般只用于印刷）。

（3）、灰度模式

這是Photoshop處理圖像的過程中廣泛運用的一種模式，灰度圖像中只有灰度顏色兒沒有彩色，Photoshop將灰度圖像看成只有一種顏色通道的數(shù)字圖像。

（4）、位圖模式

位圖模式圖像的每個像素僅以1位表示，即其強度要么為0，要么為1，分別對應(yīng)顏色的黑與白，我們可以通過對話框來選擇輸出圖像的分辨率和轉(zhuǎn)換方法。

（5）、Lab顏色模式

這個模式是以一個亮度分量L以及兩個顏色分量a與b來表示顏色的。通常情況下，Lab模式很少使用，該模式是Photoshop的內(nèi)部顏色模式，它是圖像由RGB模式轉(zhuǎn)換為CMYK模式的中間模式。

5、Sketch與Photoshop對比

近兩年，網(wǎng)頁和UI設(shè)計師當(dāng)中最火的工具絕對是Photoshop CC 和 Sketch 3 了。

Photoshop自不必說，業(yè)界良心，經(jīng)典老炮，設(shè)計必備，設(shè)計師幾乎人手一份；Sketch 是新晉神器，功能完備，清量易用。

所以，問題來了，新老神器正面對比孰優(yōu)孰劣？作為網(wǎng)頁設(shè)計師/UI設(shè)計師，選擇哪個工具更靠譜？接下來，億企邦用一張信息圖幫你做選擇！

整體來說，億企邦覺得Sketch是一個為網(wǎng)頁設(shè)計和UI設(shè)計而打造的軟件，但是無法完全替代Photoshop；Photoshop是一個優(yōu)秀的圖片處理軟件，但是在UI設(shè)計和網(wǎng)頁設(shè)計上并不是十分的順手，但對于使用Photoshop習(xí)慣的設(shè)計師來說，Photoshop可以借助一些插件來輔助的話，可能就沒有太大的差異了（具體可查看億企邦《你并不知道但很實用的Photoshop插件匯總》的相關(guān)介紹）。

6、要點總結(jié)

上面我們已經(jīng)詳細闡述了這種現(xiàn)象產(chǎn)生的原因和解決辦法，在此，億企邦為大家總結(jié)了一下這篇文章的要點：

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

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

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

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

⑤、Sketch使用sRGB色彩配置。

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

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

億企邦點評：

雖然Sketch是一個為網(wǎng)頁設(shè)計和UI設(shè)計而打造的軟件，但其功能仍然無法完全替代Photoshop的，photoshop主要是修圖合成具有非常好的性能，當(dāng)然作為好的圖象軟件，它也是最好的繪畫軟件，也是個巨大又強大的軟件，需要使用好，靈活使用，需要比較長期的學(xué)習(xí)和研究。