當前位置:首頁>軟件教程>AI教程>教程內(nèi)容

存儲技巧,講解AI存儲為WEB所用格式的一些知識(2)

來源:ifeiwu 作者:飛屋睿UIdesign 學習:13132人次

二、GIF文件格式

GIF(Graphics Interchange Format)在WEB端是最古老也是使用頻率最高的圖片格式。尤其是當圖片的顏色較為平面化的(如本例所示),這個格式對圖片來說就最為理想的。

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

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

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

接下來讓我們試著調(diào)低一下顏色的值,把顏色值設置為8,這時你會看到圖片的大小變?yōu)榱?.702K,但是圖片丟失了品質(zhì)。邊緣開始出現(xiàn)鋸齒,這時因為沒有足夠的顏色來支持顏色間的平滑過渡。雖然,我們在AI中只用了很少量的顏色,但AI本身的抗鋸齒處理會使用更多的色彩來平滑邊緣的鋸齒。

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

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

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

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

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

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

GIF格式可以支持一個維度的透明度。這是什么意思呢?意思就是,這種格式的圖片可以顯示為完全不可見或完全可見,沒有中間過渡。所以,如果你的圖片里有透明漸變或柔軟朦朧的陰影,那就最好放棄這一格式。

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

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

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

你還可以勾選“剪切到畫板”,當你勾選這一選項后,你的圖片的尺寸就會與你的畫板的尺寸保持一致,而當你去掉勾選,那么軟件會根據(jù)你所畫的對象的尺寸進行裁切,那些在畫板上但沒有作品的部分將會被裁切掉。這個設置你大概會經(jīng)常使用到,因為有的時候,在我們所繪制的對象以外的部分的確是沒有太大的必要保留,最后圖片尺寸還能因此而變得更小。

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

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

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

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

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

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

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

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

存儲技巧,講解AI存儲為WEB所用格式的一些知識_tgudhdp.cn

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

學習 · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學就能學:ps_bbs,或掃右側(cè)二維碼!
  • 關注我們學更多,每天都有新教程:新浪微博 抖音視頻 微信小程序

關注大神微博加入>>

網(wǎng)友求助,請回答!