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