AI_移動UI設計如何進行切圖

 

　　AI中適合作矢量圖，也徹底可使用AI進行移動UI界面設計徹底沒有問題，可是如今移動開發中矢量文件的使用

　　尚未獲得普及，使用矢量圖形的一些問題尚未一套很是成熟簡單的方法，所以如今大多移動應用仍是使用位

　　圖格式的圖片，那麼這就須要咱們學會在AI中進行切圖和標註尺寸

 

　　尺寸標註

　　對於移動UI界面的設計，用AI也很是的簡單，首先再建立畫板的時候單位使用像素，若是咱們的目標機型是2倍率

　　的機型，那咱們就將畫布新建爲 720 x 1280 px 大小 ，以後就正常做圖便可

 

　　UI界面繪製完成以後，咱們須要進行切圖和尺寸標註，直接在AI中進行尺寸標註的話好像尚未更簡單的方法，得

　　須要本身進行 pt 和 px 之間的換算，這也不是難事，也能夠導入PS中或者使用一些專門的標註工具進行標註

 

　　切圖

　　除了標註，就是切圖，AI中切圖比PS要方便的多，好比咱們有以下的源文件

　　

 

　　首先，要把背景隱藏掉，由於要確保背景是透明的。而後，選中一個按鈕，執行菜單命令：

　 「對象」-›「切片」-›「用所選對象切片」 這個按鈕就被切好了，同理也將第二個切出來

　　

　　   

 

　 　能夠看到，咱們根本沒有作拉線、畫框、對齊這些繁瑣的步驟，僅僅花不到十秒，點擊幾下鼠標，AI 就基於

　　按鈕的外觀自動爲咱們切好了。這種方法特別適合於每一個 UI 元素沒有堆疊這樣的情形

 

　　導出時，依然要使用「存儲爲 Web 所用格式」這個命令，而後按 Shift 選中兩個按鈕切片，導出選項選擇

　 「選中的切片」

 

　　

 

　　

　　導出不一樣倍率的圖片

 

　   因爲在AI中作的圖表都是矢量的，那麼咱們的切片也就可以進行倍率的縮放而不會有任何的問題，如何導出

　　不一樣倍率的圖片也很是簡單，只須要調節上圖中的  百分比  ，咱們的原始稿是720的，若是導出360的，就

　　將  百分比 設爲 50% 導出就好了，很是的簡單