如何在Illustrator上設定完美像素(pixel perfection)

2021/10/18 更新:
這篇文章是早期為了使用 Illustrator 繪製介面所撰寫的文章,目前已有許多新的介面設計軟體可以使用,目前主流的軟體有:

  • Sketch
  • Figma
  • Adobe XD

以上這些軟體都是針對「數位產品介面」所開發的軟體,要達成完美像素已經不是一件太困難的事!在這邊推薦大家使用更專業的介面設計軟體!下面針對 Illustraotr 完美像素的設定,依然沒有改變,所以還是可以使用 Illustrator 來進行完美像素的設定。


每個人繪製 UI 的習慣不太一樣,有人喜歡 Photoshop(Ps) 繪製 UI,個人是偏好使用 Illustrator(Ai)來繪製 UI,Ai 是向量軟體,所以每個圖案都是由路徑組成,路徑就是線,線是由兩個點來組點,而三點,就可以組成一個面。而PS是影像處理軟體,所有的畫面都是由像相素(pixel)組成, 因此在原理上,Ps 跟 Ai 是不太一樣。但用 Ai 來繪製 UI 主要有幾個好處:

  1. 隨意縮放大小
    量軟體,可以隨意的縮放元件大小,所以用 Ai 來製圖,以後要用來製作不同尺寸的ICON或是用來輸出,都會來的比 Ps 還方便。
  2. 以物件或路徑進行管理
    這是我個人覺得用 Ai 來製作 UI 最方便的地方,相對於 Ps,Ps 是用圖層進行管理,因此常常要在圖層裡開開關關,個人認為比較麻煩。而在 Ai 裡,在繪製任何畫面是以路徑及物件為主,所以可以隨意的去移動物件與路徑,如果用不到的物件可以暫時放在工作區域外,要用時再移至工作區域就可以了。
  3. 多個工作區域( 2021/10/8 補充: 目前 Ps 也支援多開工作區域了。)
    進行管理,但如果愈到差異很大的狀況, 例如:前一個畫面是九宮格(Spring board)的畫面,下一個畫面變成清單(List menu)的畫面,基本上就是要重新開一個新的文件,但在AI, 就可以直接新增工作區域來進行繪製。

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


設定以像素為基礎的文件

首先在 Ai 新增一個文件。在新文件設定,請依照下列步驟進行設定:

  1. 單位為「像素」(pixel)
  2. 寬度與高度必需是以整數的像素為主。
  3. 設彩模式必需是 RGB(CMKY是印刷輸出使用的模式)
  4. 點陣特效設定為 72ppi.。
  5. 預覽模式設為:像素。
Ai 25.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)已不再困擾我,新的軟體可以很完美的解決問題

參考文章 How to get pixel-perfect designs in adobe illustrator

發表者:Rei

介面設計師

如何在Illustrator上設定完美像素(pixel perfection) 有 “ 5 則迴響 ”

  1. 謝謝你的這篇文章~~
    我想請問為什麼有時轉存成JPEG時,他的像素顯示出來都會比原先設定的多了1至2個像素?
    就像是設定為400*400 轉存後卻會變成 401*401…..

    1. 抱歉太久沒看blog了,但我還真沒遇到這樣的問題,你先確定一下工作區域的大小,在轉存時,選擇要存檔的工作區域,他應該就會讓你的圖片鎖定在工作區域的大小。

留言

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Google photo

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

Twitter picture

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

Facebook照片

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

連結到 %s

%d 位部落客按了讚: