當前位置:首頁>軟件教程>AI教程>教程內容

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

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

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

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

一、保存為WEB的對話框

進入【文件>存儲為WEB所用格式】就會彈出對話框,可以說這個命令幾乎就是一個獨立的應用,所以這個對話框窗口占據了整個屏幕。

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

你可以通過三種方式瀏覽你的作品。最左邊的“原稿”可以簡單地展示原稿效果,但由于你是要預覽被優(yōu)化后的效果,因此這個選項幾乎沒有作用。你也可以來到“優(yōu)化”這個選項,在這里可以預覽到優(yōu)化后的效果,或者你還可以選擇“雙聯(lián)”,這個選項會讓你將原稿和優(yōu)化后的作品左右對比進行預覽。在下圖中,左邊的是原稿,右邊是優(yōu)化后的效果(在本例中,是作為GIF格式進行優(yōu)化的)。

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

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

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

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

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

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

學習 · 提示

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

關注大神微博加入>>

網友求助,請回答!