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

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

來源:ifeiwu 作者:飛屋睿UIdesign 學(xué)習(xí):13132人次

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

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

一、保存為WEB的對(duì)話框

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

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

你可以通過三種方式瀏覽你的作品。最左邊的“原稿”可以簡(jiǎn)單地展示原稿效果,但由于你是要預(yù)覽被優(yōu)化后的效果,因此這個(gè)選項(xiàng)幾乎沒有作用。你也可以來到“優(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)化的)。

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

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

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

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

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

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

學(xué)習(xí) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時(shí),大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時(shí)隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評(píng)論 | 交作業(yè) -
最新評(píng)論
攝影設(shè)計(jì)2016-01-07 10:38
學(xué)習(xí)了 謝謝

關(guān)注大神微博加入>>

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