如何在Illustrator上設定完美像素（pixel perfection） - UI Club

隨意縮放大小量軟體，可以隨意的縮放元件大小，所以用Ai 來製圖，以後要用來製作不同尺寸的ICON或是用來輸出，都會來的比Ps 還方便。

以物件或路徑進行 ... 跳至內容區 2021/10/18更新：這篇文章是早期為了使用Illustrator繪製介面所撰寫的文章，目前已有許多新的介面設計軟體可以使用，目前主流的軟體有： SketchFigmaAdobeXD 以上這些軟體都是針對「數位產品介面」所開發的軟體，要達成完美像素已經不是一件太困難的事！在這邊推薦大家使用更專業的介面設計軟體！下面針對Illustraotr完美像素的設定，依然沒有改變，所以還是可以使用Illustrator來進行完美像素的設定。

每個人繪製UI的習慣不太一樣，有人喜歡Photoshop（Ps）繪製UI，個人是偏好使用Illustrator（Ai）來繪製UI，Ai是向量軟體，所以每個圖案都是由路徑組成，路徑就是線，線是由兩個點來組點，而三點，就可以組成一個面。

而PS是影像處理軟體，所有的畫面都是由像相素（pixel）組成，因此在原理上，Ps跟Ai是不太一樣。

但用Ai來繪製UI主要有幾個好處： 隨意縮放大小量軟體，可以隨意的縮放元件大小，所以用Ai來製圖，以後要用來製作不同尺寸的ICON或是用來輸出，都會來的比Ps還方便。

以物件或路徑進行管理這是我個人覺得用Ai來製作UI最方便的地方，相對於Ps，Ps是用圖層進行管理，因此常常要在圖層裡開開關關，個人認為比較麻煩。

而在Ai裡，在繪製任何畫面是以路徑及物件為主，所以可以隨意的去移動物件與路徑，如果用不到的物件可以暫時放在工作區域外，要用時再移至工作區域就可以了。

多個工作區域（2021/10/8補充：目前Ps也支援多開工作區域了。

）進行管理，但如果愈到差異很大的狀況,例如：前一個畫面是九宮格（Springboard）的畫面，下一個畫面變成清單（Listmenu）的畫面，基本上就是要重新開一個新的文件，但在AI,就可以直接新增工作區域來進行繪製。

看起來AI似乎比較方便，但是用Ai來繪製UI要注意的是Ai是向量軟體，但是輸出設備（手機、平板）是像素組成，只差在密度單位上可能不太一樣，因此在進行UI繪製過程，必須要進行一些基本設定，將向量的畫面模擬成像素的畫面，這樣在進行畫面的輸出時，才不會有0.1234像素的問題。

設定以像素為基礎的文件 首先在Ai新增一個文件。

在新文件設定，請依照下列步驟進行設定： 單位為「像素」（pixel）寬度與高度必需是以整數的像素為主。

設彩模式必需是RGB（CMKY是印刷輸出使用的模式）點陣特效設定為72ppi.。

預覽模式設為：像素。

Ai25.2.1新開檔案 完成後，在文件進行任何編輯，都會以像素為最小單位進行編輯。

此外，有些細節的情況要注意到，這也是後來發現的一些問題，提供大家參考。

方向鍵的鍵盤漸增請調整為1px 方向鍵可以用來控制物件位置，而移動的距離預設是3px,所以請到「編輯」→「偏好設定」→「一般」將「鍵盤漸增」調整為1px，這樣在移動位置時，可以比較精確。

打開對齊像素格點功能 文件右上角，「對齊像素格點」的功能請打開，這樣所有的物件在移動時，就能自動的對齊像素格點。

1像素之差 請比較下面兩圖之間的差異 可以看到左圖是4×4的方型，在以中心為「參考點」的情況下，x與y軸分別是（2,2）而在右圖是3×3的方型，在以中心為「參考點」的情況下，x與y軸分別是（1.5,1.5）這有什麼影響呢?影響在於在繪製UI時，經常會使用到對齊功能，假設一個3×3的方形要與一個4×4的方型要垂直置中對齊時，會發生什麼事？如下圖： 看起來3×3的方塊會與4×4的方式垂直置中，但Ai會幫你把3×3的方塊左右兩側，半透明霧化處理。

繪製任何對稱圖形請使用偶數 2021/10/21更新：對稱的問題，在新版的Ai似乎有獲得改善，但繪製對稱圖形建議還是以偶數做為單位。

有些情況在以像素為基礎的模式下無法避免，請參考下圖繪製一個9×9(像素)的圓與10×10(像素)的圓會差在那裡? 有沒有發現，在右圖9×9（像素）的圓，無法對稱…（已改善），這也是用Ai來繪製UI常見到的問題，因此要繪製任何對稱圖型，請盡量以偶數為單位。

結論 以上操作，有些是我參考國外的文章，部份是自己在繪製UI時所遇到的問題，問題當然還有，像是框線也是一個讓人苦惱的問題，之後有空會再補充，當然有任何疑問或那邊有錯誤，也歡迎提出指教。

2021/10/8更新：框線（border）已不再困擾我，新的軟體可以很完美的解決問題 參考文章Howtogetpixel-perfectdesignsinadobeillustrator Sharethis:分享到Twitter(在新視窗中開啟)按一下以分享至Facebook(在新視窗中開啟)請按讚：喜歡正在載入... 發表者：Rei 介面設計師 檢視更多文章 文章分頁導航 新文章下一篇文章：4amdemocracy海報視覺分析 (part1) 如何在Illustrator上設定完美像素（pixelperfection）有“5則迴響” 引用通告：切圖的細節－不會消失的一像素–ReiDesign 引用通告：切圖的細節－不會消失的一像素|DESIGNINGBYLEARNING 謝謝你的這篇文章~~ 我想請問為什麼有時轉存成JPEG時，他的像素顯示出來都會比原先設定的多了1至2個像素? 就像是設定為400*400轉存後卻會變成401*401….. 讚讚 回應 抱歉太久沒看blog了，但我還真沒遇到這樣的問題，你先確定一下工作區域的大小，在轉存時，選擇要存檔的工作區域，他應該就會讓你的圖片鎖定在工作區域的大小。

讚讚 回應 我也常玉到這個問題，真的是不知道怎解決 讚讚 回應 留言取消回覆 在此輸入你的回應… 在下方填入你的資料或按右方圖示以社群網站登入： 電子郵件（電子郵件地址不會公開） 名稱 個人網站 您的留言將使用WordPress.com帳號。

( 登出 /  變更 ) 您的留言將使用Google帳號。

( 登出 /  變更 ) 您的留言將使用Twitter帳號。

( 登出 /  變更 ) 您的留言將使用Facebook帳號。

( 登出 /  變更 ) 取消 連結到%s 透過電子郵件通知我後續回應。

有新文章時用Email通知我。

Δ 追蹤 已追蹤 UIClub 加入其他85位關注者 我要註冊 已經有WordPress.com帳號了？立即登入。

UIClub 自訂 追蹤 已追蹤 註冊 登入 複製短網址 回報此內容 以閱讀器檢視 管理訂閱 收合此列   載入迴響中...   發表迴響… 電子郵件 名稱 網站 %d位部落客按了讚：