切圖的細節－不會消失的一像素

前陣子跟另一位設計師討論到關於切圖的細節，所以特別寫了這篇文章來討論。

之前的文章有提到過，關於切圖一事，我大多交給工具來處理 cut&slice me，而這套工具的使用，有一個條件，是要用最大的解析度做為切圖的基礎，再生成不同解析度的圖片，也就是我先做大3x，再透過工具縮成1x，而在程式批次縮小的過程，我想大概自動化的流程就是：平面化→縮小→輸出。所以如果我畫了一個 3px*3px 的 block，照他的規則，應該會自動產生出 @1x 的 1px*1px、@2x的2px*2px及 @3x的3px*3px  的切圖，如下圖。

從上圖中可以知道 3px*3px  的 block 會分別縮小成不同解析度下需求的尺寸。

接下來問題來了，如果繪製的圖小於 3px*3px 會發生什麼事情?我們先來看 2px*2px 的 block 輸出成切圖的結果。

很明顯的 2px*2px 的 block在 @2x跟@1px 的條件下，己經是縮小的極限了，不會再更小，所以停留在 1px。

那如果是 1px*1px的block，會是什麼樣的情況?

最小就是1px，不會再更小了，因此我們就可以知道，小於1px的大小在平面化再縮小成切圖的時候，是沒有意義的。

但光是這樣的討論還不夠，會那麼在意切圖的細節，原因在於設計 icon 時，會用到線條，而且線條不會剛好切在每個格點，或是帶有孤度…等等，因此線條或區塊間通常會有間隙，所以我用一個比較極端的方式來比較，存在不同像素的間隙時，切出來的圖會有什麼不一樣。

我先畫了一些固定高度為 6px 長方型，然後給他們不同的間隙，在還沒做切圖之間，我們大概可以猜想一下，切圖會變成什麼樣子，高度在 @3x 的時候會是 6px，@2x時會是4px，@1x時會是2px；而寬度的部份，根據我上面的測試，寬度為 3px 的時候，@2x 會是 2px，@1x 會是 1px，而寬度為 2px 時，在 @2x 之後都是 1px，寬度是 1px 的情況下就都是 1px。

但間隙會怎麼處理，如果照這樣的規則，切出來的圖一定會分不出來間隙，但我們可以直接看結果：

@3x 的情況下，應該沒什麼太大的問題，間隙還是很清楚，但是在 @2x 跟 @1px 的情況下，間隙小於 1px 的情況下，發現電腦會自動幫你補上灰色，有些原本應該要是黑色的區塊，也變灰色了，雖然我不太知道灰色是怎麼決定的，但我想應該是透過補差法的方式而來的，但這就是電腦在做的事情了；我們要知道的是，在遠看的情況下，它依然還保有一定的辨視度。

但更神奇的是，電腦補的不是實色的灰色，而是半透的顏色(*png才會的格式才會保有透明度)，如下圖：

我們可以發現，這些灰色，是帶有透明度的黑色，所以在不同的背景色上，做大圖來縮小圖，只要符合解析度的需求餵圖，間隙的感覺不會消失，這些小於 3px 的間隙會用某種方式來呈現，所以 1 像素永遠不會消失。正常螢幕解析度看是像這樣的：

以上大概就是我的測試結果。

但對於介面設計還有 icon 的繪製有什麼樣的建議，電腦會自動幫你補足這 1px 的間隙，如果切出來的圖會歪，那大概就是對齊的問題了，另一點就是如果要保有比較好的銳利度，或許算好px再繪製icon，會是比較好的方式，當然這就比較困難一些。

但一般人的眼睛很難去辨視 1px 的差異，尤其是在高解析度的螢幕上那就更難了，所以對齊倒是可以努力去方向，那就回到我的另一篇文章(如何在illustrator上設定完美像素(pixel perfection)中所提的，對稱圖形盡量用偶數去算，比較不會有歪掉的感覺。

以上小小討論，如果有任何錯誤或補充，歡迎討論。