存儲(chǔ)技巧，講解AI存儲(chǔ)為WEB所用格式的一些知識(shí)(4)

雖然這是講解AI的存儲(chǔ)，但photoshop也可以參考一下。在AI中“存儲(chǔ)為WEB所用格式”的目的是為了優(yōu)化圖片在網(wǎng)站或其他屏幕端的展示效果，例如平板或手機(jī)。“優(yōu)化”這個(gè)詞是指在圖片大小和品質(zhì)之間的最優(yōu)組合。我們希望在網(wǎng)頁(yè)里能盡快加載圖片，那么圖片就必須要小，但是我們又不希望因此而損害圖片的品質(zhì)。“保存為WEB所用格式”這一命令讓我們可以預(yù)覽被優(yōu)化后的矢量圖，以便我們能調(diào)試到最佳效果。

我們會(huì)在這篇文章中帶大家回顧一下保存為WEB的圖片的格式，然后向大家展示哪類作品適合保存于哪種格式。UI設(shè)計(jì)師們快學(xué)起來(lái)！

進(jìn)入【文件>存儲(chǔ)為WEB所用格式】就會(huì)彈出對(duì)話框，可以說(shuō)這個(gè)命令幾乎就是一個(gè)獨(dú)立的應(yīng)用，所以這個(gè)對(duì)話框窗口占據(jù)了整個(gè)屏幕。

你可以通過(guò)三種方式瀏覽你的作品。最左邊的“原稿”可以簡(jiǎn)單地展示原稿效果，但由于你是要預(yù)覽被優(yōu)化后的效果，因此這個(gè)選項(xiàng)幾乎沒(méi)有作用。你也可以來(lái)到“優(yōu)化”這個(gè)選項(xiàng)，在這里可以預(yù)覽到優(yōu)化后的效果，或者你還可以選擇“雙聯(lián)”，這個(gè)選項(xiàng)會(huì)讓你將原稿和優(yōu)化后的作品左右對(duì)比進(jìn)行預(yù)覽。在下圖中，左邊的是原稿，右邊是優(yōu)化后的效果（在本例中，是作為GIF格式進(jìn)行優(yōu)化的）。

在左下角的下拉框選項(xiàng)中選擇預(yù)覽的比例值，你可以輸入比例來(lái)縮放預(yù)覽的圖片，也可以通過(guò)快捷鍵方式來(lái)調(diào)整和縮放圖片。

點(diǎn)擊左下角的“預(yù)覽”按鈕，你立刻能在自己的默認(rèn)瀏覽器中看到這張圖片的展示效果，如果你還想知道別的瀏覽器的效果，你就需要點(diǎn)擊按鈕右邊的地球圖標(biāo)來(lái)添加更多。

保存為WEB格式的界面中最為重要的部分就是圖片大小，在每個(gè)預(yù)覽圖的下方都會(huì)出現(xiàn)這個(gè)圖片的文件類型和大小。在下圖中可以看到，我們的左邊的原稿是ai格式，文件大小是1.85M，而右邊優(yōu)化后為GIF格式，文件大小變?yōu)榱?4.53K。既然是要在文件大小和品質(zhì)之間找到最佳平衡，因此你需要時(shí)刻保持對(duì)文件大小的關(guān)注。

二、GIF文件格式

GIF（Graphics Interchange Format）在WEB端是最古老也是使用頻率最高的圖片格式。尤其是當(dāng)圖片的顏色較為平面化的（如本例所示），這個(gè)格式對(duì)圖片來(lái)說(shuō)就最為理想的。

我們應(yīng)該知道GIF所用的顏色模式是索引顏色模式，索引顏色模式是精選RGB圖像中所使用的顏色，然后再構(gòu)建新的調(diào)色板，從而可以在不降低圖像質(zhì)量的同時(shí)縮小圖像的容量。

保存為WEB格式的對(duì)話框中有多種GIF的預(yù)設(shè)，你需要仔細(xì)查看不同選項(xiàng)下的圖片的品質(zhì)和圖片的大小。大家可以看到我在下圖中的設(shè)置，我選擇了GIF的顏色為128，這時(shí)的圖片的效果還不錯(cuò)，而圖片的大小也只有13.71K。

接下來(lái)讓我們?cè)囍�調(diào)低一下顏色的值，把顏色值設(shè)置為8，這時(shí)你會(huì)看到圖片的大小變?yōu)榱?.702K，但是圖片丟失了品質(zhì)。邊緣開(kāi)始出現(xiàn)鋸齒，這時(shí)因?yàn)闆](méi)有足夠的顏色來(lái)支持顏色間的平滑過(guò)渡。雖然，我們?cè)贏I中只用了很少量的顏色，但AI本身的抗鋸齒處理會(huì)使用更多的色彩來(lái)平滑邊緣的鋸齒。

GIF的色彩會(huì)被限制在那些經(jīng)過(guò)篩選的“網(wǎng)頁(yè)安全色”中。這在今天看了已經(jīng)不需要擔(dān)心了，目前我們所用的顯示器都可以很好的展示出成千上萬(wàn)的顏色，但是在過(guò)去，在舊式的蘋果系統(tǒng)和Windows系統(tǒng)下可以使用的就只有216種顏色，因此那時(shí)的UI設(shè)計(jì)師都會(huì)非常慎重地挑選顏色。

所以，如果你想確保你的圖片在每個(gè)平臺(tái)的顏色都保持一致，那么你可以將自己的配色限制在這個(gè)色域里。在這個(gè)例子里，我們使用“GIPF Web 調(diào)板”的預(yù)設(shè)，你會(huì)看到圖片中的顏色發(fā)生了很大的變化。

一個(gè)GIF圖片也可以是黑白的，在這里可以選擇了黑白后再選擇擴(kuò)散來(lái)讓顏色過(guò)渡得更自然。你可以通過(guò)調(diào)試仿色的滑塊來(lái)選擇不同的擴(kuò)散效果。但圖片整體的效果絕對(duì)是60年代的LOOK！

GIF格式可以支持一個(gè)維度的透明度。這是什么意思呢？意思就是，這種格式的圖片可以顯示為完全不可見(jiàn)或完全可見(jiàn)，沒(méi)有中間過(guò)渡。所以，如果你的圖片里有透明漸變或柔軟朦朧的陰影，那就最好放棄這一格式。

緊靠勾選透明度選項(xiàng)右側(cè)的，是一個(gè)叫做“雜邊”的色彩選擇參數(shù)。這會(huì)圍繞圖片里所編輯的對(duì)象增加一條細(xì)邊，有點(diǎn)類似PS中的描邊。如果你要將這個(gè)GIF圖片置于一個(gè)有色的背景中，那么你可以在此選擇與背景相同顏色的雜邊。這會(huì)讓圖片和背景融合得更加自然。

你還可以勾選“剪切到畫(huà)板”，當(dāng)你勾選這一選項(xiàng)后，你的圖片的尺寸就會(huì)與你的畫(huà)板的尺寸保持一致，而當(dāng)你去掉勾選，那么軟件會(huì)根據(jù)你所畫(huà)的對(duì)象的尺寸進(jìn)行裁切，那些在畫(huà)板上但沒(méi)有作品的部分將會(huì)被裁切掉。這個(gè)設(shè)置你大概會(huì)經(jīng)常使用到，因?yàn)橛械臅r(shí)候，在我們所繪制的對(duì)象以外的部分的確是沒(méi)有太大的必要保留，最后圖片尺寸還能因此而變得更小。

下面讓我們看看圖像大小這一參數(shù)組，這一部分你可以減小或放大所優(yōu)化的圖片。之類的圖片大小指的并不是圖片的文件大小，而是指的圖片的尺寸大小，在這里表示為寬和高。這就是AI優(yōu)于基于像素的圖片處理軟件的地方，如果你想要從優(yōu)化輸出的部分放大你的圖片，AI的可以讓它得以放大，而且同時(shí)輸出結(jié)果也保持品質(zhì)，這就是矢量圖的好處。而假如你使用的是PS的話那么當(dāng)你放大像素圖，作品就會(huì)看上去很模糊。

在寬和高的設(shè)置參數(shù)下有一個(gè)下拉框選項(xiàng)，你可以為你的優(yōu)化方案選擇不同的選項(xiàng)，如果你的作品中文字所占的比例較大，那么你可以選擇“優(yōu)化文字”，這里的文字是指的用文字工具可以編輯的文字，那種已經(jīng)轉(zhuǎn)曲的文字是視為圖片的。

或者如我在下面選擇了“優(yōu)化圖稿”，你可以看到優(yōu)化前后作品的變化。邊緣變得更加平滑了。

讓我們繼續(xù)看看右下方的顏色表，這個(gè)顏色表里包含了優(yōu)化后的圖片里所包含的每種顏色。其實(shí)，你完全可以通過(guò)雙擊修改某個(gè)顏色。就像我在本例中將綠色換成了紫色，而當(dāng)你鼠標(biāo)劃過(guò)這個(gè)色塊時(shí)，會(huì)有一行小字來(lái)提示你將什么顏色替換為了什么顏色。這種方式可以讓你將一個(gè)作品保存為多種色彩的版本，而不用改變?cè)�始圖片。

在顏色表的右下方有一排圖標(biāo)，這一排圖標(biāo)讓你可以更多地對(duì)顏色進(jìn)行調(diào)整。你首先需要選中某一個(gè)色板，然后進(jìn)一步可以設(shè)置其為網(wǎng)頁(yè)安全色，或者鎖定或者刪除它。色板中出現(xiàn)星號(hào)就表示已經(jīng)轉(zhuǎn)為網(wǎng)頁(yè)安全色，當(dāng)鼠標(biāo)滑過(guò)會(huì)提示出所替換的網(wǎng)頁(yè)安全色的色值。

這里還有其他關(guān)于GIF的參數(shù)設(shè)置，例如，你可以看到有個(gè)交錯(cuò)的勾選框，這是過(guò)去的技術(shù)所需要的選項(xiàng)，到了現(xiàn)在技術(shù)進(jìn)步已經(jīng)不再需要它了。

PNG格式通常比GIF更為常用，也更受歡迎。其中，PNG-8就類似于顏色為256,勾選透明度并且支持仿色的GIF。這里的“8”的意思就是指的8位的圖片。那么和GIF之間的區(qū)別在于壓縮圖片的方式不同。GIF使用的是“有損耗”的辦法，這種辦法就是采用丟失部分?jǐn)?shù)據(jù)的方式來(lái)達(dá)到讓文件變得更小的目標(biāo)。而PNG是無(wú)損的，由于其所使用的壓縮的算法，使得最終的文件大小明顯小于GIF。那么問(wèn)題來(lái)了，在可以使用PNG的時(shí)候，為什么還要用GIF呢？因?yàn)�，很遺憾，不是所有的瀏覽器都支持PNG格式（比如IE6就不支持！IE啊……一直的疼）。但是隨著更多人升級(jí)了瀏覽器，慢慢這個(gè)問(wèn)題也就不會(huì)存在了。所以，下次果斷將GIF替換為PNG-8，他們的設(shè)置幾乎相差不大。你已經(jīng)很熟悉了不是嗎？

JPEG格式原本是用來(lái)壓縮照片的，現(xiàn)在也可以用在有顏色過(guò)渡的矢量圖。JPEG格式是24位的，所以也就意味著它可以支持1600萬(wàn)種顏色。JEPG的壓縮方式是有損的，如果你試著壓縮得太過(guò)，圖片的品質(zhì)也會(huì)下降。

你可以勾選“連續(xù)”的選項(xiàng)來(lái)進(jìn)行多線程加載圖片，也可以通過(guò)給圖片添加模糊的辦法來(lái)降低圖片品質(zhì)上的瑕疵，但這兩種辦法既不不十分理想，也沒(méi)有實(shí)際的必要。它們都是在撥號(hào)上網(wǎng)的舊時(shí)代才用上的了。

和GIF以及PNG-8一樣，你可以選擇圖片的優(yōu)化辦法或者選擇是否剪切圖片到畫(huà)板，你還可以具體設(shè)置圖片的尺寸大小。但JEPG沒(méi)有顏色表，因?yàn)镴EPG是用的RGB的顏色模式，而不是索引顏色模式。

JPEG適用于顏色過(guò)渡的圖片，但是如果是色彩是比較平面的色塊的話，它的表現(xiàn)就不是很好。

PNG-24的格式，顧名思義就是指的24位的圖片。從某些方面來(lái)說(shuō)，它融合了GIF和JPEG的好處，是一種較優(yōu)的格式。就像JPEG，它可以支持上千萬(wàn)種顏色，PNG-24可以用于一些經(jīng)過(guò)模糊處理或者漸變過(guò)渡的陰影。但這些就會(huì)增加圖片的大小，造成加載上的困難。

但與此同時(shí)你要考慮到PNG格式的圖片是透明背景，雖然采用JEPG格式品質(zhì)不會(huì)丟失且品質(zhì)也比較高，但PNG格式的圖片可以允許你將作品放到任何背景之上，權(quán)衡這一靈活性，也許你也不得不選擇PNG了。就如下圖這樣，用PNG-24導(dǎo)出后，可以置于任何的紋理背景上。

那些還為輸出圖片而發(fā)愁的小伙伴們記住了嗎？其實(shí)每種格式都是優(yōu)缺點(diǎn)共存的，大家在實(shí)際項(xiàng)目中要多嘗試才能找出最好的解決的方案。另存為WEB格式這一工具歷來(lái)都在設(shè)計(jì)流程中處于最末尾的環(huán)節(jié)，因此也并沒(méi)有引起大家的思考和重視，希望我的這篇文章能有所幫助。

全教程完，學(xué)完記得交作業(yè)。教程對(duì)您有所幫助，請(qǐng)推薦給你的朋友。如果學(xué)會(huì)了，可以嘗試投稿給我們，跟大家分享你的學(xué)習(xí)經(jīng)驗(yàn)：http://i.16xx8.com