適合網(wǎng)頁與iPhone開發(fā)的Photoshop應用
日期 : 2022-01-10 20:34:30
許多使用Photoshop設計網(wǎng)站或應用的人,或多或少,都會遇到將圖像顏色與HTML、CSS或編碼產(chǎn)生的顏色進行配對的問題。這篇文章的目的便在于徹底解決這些問題。色彩管理,保持多個設備顏色輸出-致在印刷界,色彩管理一般包括校準整個工作流程,從掃描設備、數(shù)碼相機、電腦顯示器、校樣,到最后媒體輸出。這要求近乎過分了,尤其樣,到最后媒體輸出。這要求近乎過分了,尤其CMYK設備進行配對,其難度不容小覷(在眾多著作中,《CMYK2.0- 設計師色彩 管理手冊》是比較值得學習的一本) 設計或編輯電視圖像時,主要校準的是編輯顯示器,同時使用一個播放顯示屏是常規(guī)做法--可以即時展示這些圖像在觀眾家里的普通電視機上的樣子。在這種情況下,色彩管理會帶來許多好處,而且得到了極力推薦。設計網(wǎng)站和應用交互界面時,情況則有些不同了。最終輸出端和你設計時所使用的設備一樣:一個電腦顯示器(暫時不考慮Windows、MacOS10.6之前的操作系統(tǒng)以及iPhone的Gamma曲線差異,我們稍后會說到這些) 不過,這其中有個隱情。盡管你設計網(wǎng)站或應用交互界面時所使用的設備與最終產(chǎn)品輸出的設備相同,但顏色卻會有多種來源:圖像(通常是PNG格式、GIF格式和JPEG格式)、格式標記( CSS) 和編碼(JavaScript、HTML和Objecitve- C,等等)。要讓它們都一致起來得有多棘手!
目標
設計網(wǎng)站或應用交互界面時,我們希望屏幕上Photoshop里顯示的顏色和保存到文件中,通過別的應用( 包括Firefox、Safari和iPhone模 擬器)所顯示的顏色保持一致。我們不僅希望這些顏色看起來一樣,也希望它們保存在文件中的實際數(shù)值也與我們在Photoshop中設置的數(shù)值完美相符。不管在什么情況下,顏色都不能發(fā)生一點偏轉(zhuǎn),或者看起來發(fā)生偏移。
這為何如此之難?
Photoshop的色彩管理不僅應用在它窗口里顯示的圖像上,同時也應用于所保存的文件中。這是件很糟糕的事情,如果你只是在為網(wǎng)站或用戶界面處理RGB圖像。在Photoshop默認 設置之下,#FF0000其實會顯示成#FB0018,而#BB95FF則是#BA98FD。差別雖然很細微,卻不容忽視。
Photoshop和OS操作系統(tǒng)、Windows有什么區(qū)別?
OS操作系統(tǒng)的色彩管理是在處理進程的最后一環(huán)應用到整個顯示中的--在視頻存儲器完成主體緩存之后。這意味著,盡管應用了色彩管理,衡量屏幕顏色的軟件功能(比如/Uitlites/ DigitalColor Meter)所顯示的保存在文件中的數(shù)值卻會和你的編碼一致。我想文件中的數(shù)值卻會和你的編碼一致。我想理系統(tǒng))中的色彩管理運作原理應該相同。Photoshop的色彩管理只應用于其窗口圖像部分以及所保存的文件。Photo- shop進行屏幕取色時會出現(xiàn)顏色修正,因此那些測量屏幕顏色的軟件功能所報告的顏色通常與你所選取的并不一致。OS操作系統(tǒng)的色彩管理應用在Photoshop之上,但并不值得一提。
我所找到的最佳解決方案便是盡量弱化Photoshop對RGB的色彩管理功能,如此一來就促使屏幕上以及被保存成文件的RGB顏色與實際顏色值相符。如果你得為網(wǎng)站和應用設計校準顯示器,那么建議你使用OS操作系統(tǒng)的色彩管理。
以前,關閉Photoshop CS2和之前版本中的色彩管理功能很簡單,但現(xiàn)在卻需要更多技巧。關閉Photoshop的RGB色彩管理功能這些步驟適用于Mac和Windows系統(tǒng)里的Photoshop CS5, CS4的設置也差不多如此。
第一步:打開“編輯”>“顏色設置”,然后將工作區(qū)間和顯示器都設置為RGB。第二步:打開文件,點擊“編輯”- >° 指定配置文件”,然后將其設置為‘默認RGB”,每個文件操作過程中都需要走這一步。第三步:確保“查看”→“色彩校對”關閉。第四步:以“保存為Web和設備格式”進行保存,確保“轉(zhuǎn)換到sRGB"功能已經(jīng)關閉。如果你將文件保存為JPEG文件格式,請同時關閉“內(nèi)置顏色配置”(或許你想對有些圖片應用它,但更多時候,為了用戶界面元素及圖標考慮,你最好是把它關閉) “指定配置文件”與“轉(zhuǎn)換為配置文件”的差異現(xiàn)在來解釋下“指定配置文件”與“轉(zhuǎn)換為配置文件”之間的差異再合適不過,這樣你就知道該在什么時候運用它們。每個Photoshop文件都包含了一個顏色文件,它和真實的像素顏色數(shù)據(jù)又是不同的。“指定配置文件”只是將內(nèi)置的顏色配置應用到圖像中,改變其外觀,但色彩的原始數(shù)值不會有任何改變。因此,這是個不具破壞性的操作,你可以隨便給圖像配置一個新的顏色,而不會造成任何損害。指定配置新的顏色文件或許會改變它在屏幕上的樣子,但是保存在文件中的數(shù)據(jù)卻保持不變。
如果你從一個Photoshop圖像中復制圖層, 并應用到另一個圖像中,你會期望這兩個圖像的顏色文件是一致的。“轉(zhuǎn)換為配置文件”不僅給圖像配置了新顏色,同時也試圖讓你的圖像在屏幕上看起來如出一轍。它通過處理保存在文件中的像素顏色數(shù)據(jù)達到這個目的。轉(zhuǎn)換到新的顏色文件更可能讓圖像在屏幕上看起來一致,但文件中所保存的數(shù)據(jù)已經(jīng)被永久性地改變了,請謹慎使用。
iPhone用戶界面設計
你的iPhone或iPod的屏幕及顏色校準可能和你的Mac或PC屏幕及校準不大一樣。我常常把用戶界面的全屏圖片導入到iPhoto中,并將它們與iPhone同步,看看最終界面在這些設備上看起來到底如何(在Windows系 統(tǒng)中,你可以用iTunes同步照片)。這讓你在切割圖片或提交編碼之前再做些調(diào)整。在iPhone應用模擬界面測試中,它們看起來要比在Photoshop里時更模糊,而這篇文章就這-點給出了解答。
結(jié)論
現(xiàn)在,你可以用各種方法在Photoshop和llustrator之間移動位圖和矢量圖,而且完全不改變圖像顏色。你也可以用Photoshop中的顏色提取工具剃去顏色,然后將同樣格式的顏色數(shù)值應用于你的CSS、HTML、JavaScript、 Flash 或Objecitve- _C編碼中,它們顯示出的顏色會相當和諧。