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

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

1.隨意縮放大小

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

2. 以物件或路徑進行管理

這是我個人覺得用AI來製作UI最方便的地方,相對於PS,PS是用圖層進行管理,因此常常要在圖層裡,開開關關的,個人認為比較麻煩。而在AI裡,在繪製任何畫面是以路徑及物件為主,所以可以隨意的去移動物件與路徑,如果用不到的物件可以暫時放在工作區域外,要用時再移至工作區域就可以了。

3. 多個工作區域

使用PS在繪製UI時,每一個動作或進到下一層的畫面時,若差異不大,可以在同個畫面,用圖層來進行管理,但如果愈到差異很大的狀況, 例如:前一個畫面是九宮格(Springboard)的畫面,下一個畫面變成清單(List menu)的畫面,基本上就是要重新開一個新的文件,但在AI, 就可以直接新增工作區域來進行繪製。

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


 

請先設定以像素為基礎的文件

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

  1. 單位為像素(pixel)
  2. 寬度與高度必需是以整數的像素為主。
  3. 打開進階設定
  4. 設彩模式必需是RGB(CMKY是印刷輸出使用的模式)
  5. 點陣特效設定為72ppi.。
  6. 預覽模式設為:像素。
  7. 選取切齊相素格點

7Headlines - How to Get Pixel-Perfect Designs in Adobe Illustrator - Medialoot_MarkMan 完成後,在文件進行任何編輯,都會以像素為最小單位進行編輯。 此外,有些細節的情況要注意到,這也是後來發現的一些問題,提供大家參考。

1.方向鍵的鍵盤漸增請調整為1px

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

2. 就是差那該死的1像素!

請比較下面兩圖之間的差異

4433

可以看到左圖是4×4的方型,在以中心為「參考點」的情況下,x與y軸分別是(2,2) 而在右圖是3×3的方型,在以中心為「參考點」的情況下,x與y軸分別是(1.5,1.5) 這有什麼影響呢? 影響在於在繪製UI時,對齊是很常用的方式,假設一個4×4的方型要與一個3×3的方型要垂直置中對齊時,會發生什麼事?如下圖

align_center

會變成靠左對齊,所以就會差那「該死的」1像素,因此這個地方要特別注意。

3.繪製任何對稱圖型請使用偶數

如同我前面所提到的那「該死的」1像素,有些情況在以像素為基礎的模式下無法避免, 請參考下圖繪製一個9×9(像素)的圓與10×10(像素)的圓會差在那裡?

circle 有沒有發現,在右圖9×9(像素)的圓,無法對稱… 這對於UI Designer 是無法忍受的,這也是用AI來繪製UI常見到的問題,因此要繪製任何對稱圖型,請盡量以偶數為單位。

結論

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

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

廣告

3 thoughts on “如何在illustrator上設定完美像素(pixel perfection)”

  1. […] 但對於介面設計還有 icon 的繪製有什麼樣的建議,電腦會自動幫你補足這一 px 的間隙,如果切出來的圖會歪,那大概就是對齊的問題了,另一點就是如果要保有比較好的銳利度,或許算好px再繪製icon,會是比較好的方式,當然這就比較困難一些。但一般人的眼睛很難去辨視 1px 的差異,尤其是在高解析度的螢幕上,那就更難了,所以對齊倒是可以努力去方向,那就回到我的另一篇文章(如何在illustrator上設定完美像素(pixel perfection)中所提的,對稱圖形盡量用偶數去算,比較不會有歪掉的感覺。 […]

    按讚數

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

    按讚數

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

      按讚數

留言

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

WordPress.com Logo

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

Twitter picture

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

Facebook照片

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

Google+ photo

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

連結到 %s