UI知識,制作icon到底是用AI還是用PS?(3)

來源:站酷 作者:HHTHH 學(xué)習(xí):30099人次

所有設(shè)計師在接觸到UI設(shè)計師遇到最基本的問題就是icon的制作,icon也是UI設(shè)計師遇到是最基礎(chǔ)的訓(xùn)練。

網(wǎng)上的各種icon設(shè)計都制作的相當(dāng)精美,把控好風(fēng)格和樣式我相信每一個有點PS或者AI基礎(chǔ)的人都能臨摹出一模一樣的作品。

比如

UI知識,制作icon到底是用AI還是用PS?_m.tgudhdp.cn

UI知識,制作icon到底是用AI還是用PS?_m.tgudhdp.cn

UI知識,制作icon到底是用AI還是用PS?_m.tgudhdp.cn

 

 

但是,現(xiàn)在問題來了...

這些東西大小如何界定?各自如何切圖?各自保存成什么格式?這些圖標(biāo)用PS制作好還是用AI制作更好?

大小的界定、軟件的選用對實際工作有什么樣的影響?(懂的人都知道這是需要切圖的)

結(jié)合實際工作我們需要最高效率的輸出應(yīng)該選用哪一種?(在AI里做,回頭還要輸入到PS里面做效果,源文件稍微一調(diào)整怎么辦,想想都覺得麻煩,真是想想都麻煩)

 

這是入門級別的icon設(shè)計就需要考慮的問題。當(dāng)然目前大部分入門的人都會忽略的,因為這些疑惑只有在實踐一段時間以后才會出現(xiàn)的。

 

有這些疑惑的設(shè)計師,祝賀你,你是一個喜歡思考的的UI設(shè)計師,因為很多設(shè)計師一般會簡單粗暴的回答:當(dāng)然是PS簡單直接也可以切圖,一鍵走天涯。

 

我個人工作過一個公司,期間一直用PS制作圖標(biāo),切圖,主管也一直這么做的,確實沒有什么問題。在PS里面直接制作出效果圖,然后切圖出來,馬克鰻軟件標(biāo)注尺寸,有些小的項目甚至都沒有輸出過@2X@3X。所以入門的設(shè)計師不用怕不懂這些就做不了UI。依然可以做好工作,但是不能不懂這些東西,經(jīng)過我一天時間跟不同公司的人溝通交流我梳理了一下,讓大家理解更清晰,雖然用不到,但是還是可以提升理解的。

 

第一種:直接用PS因為PS里面有形狀工具還可以描邊,再加上強大的布爾運算結(jié)合PSCC最新的版本,完全可以勝任所有icon的制作,效果一點也不比AI制作差,尤其是轉(zhuǎn)換為智能對象直接解決了圓角弧度的等比變化問題。關(guān)鍵它也是矢量形狀,不懼放大縮小,確實是UI設(shè)計師的福音。

 

第二種:用AI還有CRD他們才是真正的矢量圖形,圓角弧形的表現(xiàn)無它能敵(PA里面再強也是有鋸齒的(無限放大放大看))矢量就是任性。

 

其實大家最關(guān)心的還是工作效率的問題,能用一個搞定我們就少操作一個軟件,我也是這么想的,以前在公司,我也不愿意打開AI,能用PS就用PS,但是經(jīng)過我一天的咨詢,我發(fā)現(xiàn)雖然我的公司是這樣,但不代表UI設(shè)計行業(yè)都這樣,我不能坐井觀天。我相信大家糾結(jié)的關(guān)鍵因素是因為切圖,切圖的@2X@3x,會不會受到影響。

 

如果公司要求不嚴(yán)格,或者公司自己開發(fā)一款用戶范圍很小的APP一般不會要求那么細致,在PS里面隨便做一套icon然后切出來適配某幾個分辨率就行了。這樣的公司設(shè)計師比較舒服,不用過多考慮切圖問題。

 

第二種公司就是類似于QQ百度微信這種級別的應(yīng)用或者要求更高的專業(yè)公司,他們的APP絕不可能只切幾個分辨率進行適配,因為受眾群體太多,考慮的手機平臺更多。舉個栗子:在PS中我們做出icon切圖后輸出不同尺寸的切圖,PS是不能保證每一個尺寸的切圖都是沒有變形或者虛邊的。(仔細想想是有道理的)

UI知識,制作icon到底是用AI還是用PS?_m.tgudhdp.cn

但是AI等矢量軟件輸出什么樣的尺寸都無所謂,所以我肯定類似BAT這樣的公司是絕不可能用PS制作或者直接切圖重要位置圖標(biāo)的;疽WC重要圖標(biāo)的矢量效果適應(yīng)各種尺寸規(guī)范。

 

這時候大家覺得看來專業(yè)的還是得用AI啊,但是AI和PS交換使用做設(shè)計時候會不會麻煩啊。
UI知識,制作icon到底是用AI還是用PS?_m.tgudhdp.cn

 

 

通過跟這位設(shè)計師對話我明白了一個道理:我們在PS里面只是演示一個界面設(shè)計,如果很完美那么就直接保存PNG然后用馬克鰻標(biāo)注,但是前端那邊最好是接到AI矢量圖標(biāo)再按照我們效果圖標(biāo)注的大小進行切圖(這公司UI設(shè)計師都不切圖的,太閑了吧)結(jié)合大眾那就是我們設(shè)計師效果圖標(biāo)注,用AI切圖。因此省去了我們一個非常重要的步驟:AI里面的圖標(biāo)不必每次調(diào)整都要放到PS效果圖里面展示,只需要用PS里面的形狀工具畫出一個效果即可。(因為AI沒有像素概念A(yù)I里面的圖標(biāo)拖到PS里面有可能會出現(xiàn)很多半像素,所以拖過來制作效果沒有必要)。

 

 

綜上所訴:我個人理解就是PS做效果,AI繪圖標(biāo)。涉及到切圖在PS里面制作大小效果,在AI里面大小自定義(因為矢量)也就是說對切圖要求嚴(yán)格的公司里面的UI設(shè)計師是肯定用AI制作icon的并進行切圖,但是PS里面的icon效果就不一定是從AI那邊拖過來的了畢竟來回拖拽太麻煩。

以上只是我一個初級設(shè)計師的淺顯理解,不作為任何設(shè)計的的參考建議,本文最終目的也只是想拋磚引玉,希望有人能指點錯誤,我會及時改正,并標(biāo)注出來,感謝大家。如果有大神指導(dǎo)AI切圖方法,也請不吝賜教。

 

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

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

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

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