【ICON】從打開 Ai 到輸出文件，我的獨門秘技之 01 設置篇

04-26

由於本人平時比較喜歡鑽研，在 icon 繪製的過程中總結了一些非常實用的小技巧。其實有點標題黨，這些技巧中很多是從其他前輩的文章中學習到的，當然也有一些是我自己摸索出來的，不敢私藏，在這裡全部分享出來，與大家交流學習，希望能夠共同提高。我會盡量寫的詳細，讓剛入門的小白也能夠輕鬆理解，另外，我會在文章中穿插各種小技巧，可能會導致邏輯稍顯混亂，請不要介意

這篇文章所講的全部是和 Ai 相關的（我使用的是 2017 版本，推薦使用 Ai cc 2015 以上的版本，因為有實時圓角功能，對 icon 的繪製非常有幫助），當然用其他軟體繪製 icon 的朋友也可以看一看，也許能從中獲得一些靈感

首先，我們要對 Ai 進行一些設置（適用於 Ai cc 2017 版本，其他版本可能稍有不同），這樣能夠保證 icon 在繪製的過程中保持像素對齊（當然僅靠設置是不夠的，還有一些其他需要注意的地方我會在後面講到），首先是首選項（ctrl+k）中的設置：

這個主要是我們在 icon 微調的過程中，拉伸圓角矩形，圓角不會因此變化

邊角構件即實時圓角那個小點，這個可以關掉，一般我們都是需要邊角構件來拉圓角的

需要注意的是，即使我們關掉這個選項，在角度過小或者過大的時候，邊角構件還是不會出現，另一種不會出現的情況是構成角的兩條路徑中的一條過短（約小於 1.5px），前者我暫時沒找到解決辦法，後者可以參考我的另一個關於 icon 的回答中的方法： IpNeNaEcRe：如何繪製邊緣清晰又圓潤的小尺寸圖標？

單位都設置成像素

網格線間隔代表粗線大網格的尺寸，次分隔線代表將大網格分為幾個小網格，這裡大網格為 8x8 px，小網格尺寸為 1x1 px，網格置後看個人習慣設置，我習慣關閉，這樣繪製的過程中方便對齊調整

如果覺的兩個數值設置的一樣導致網格太密的話，可以把次分隔線設置為上面的一半，這樣每一小格的尺寸為 2x2px，不過對齊的時候要注意，對齊到網格中間 1/2 處是沒有問題的，如果對齊到 1/4 處是沒有像素對齊的，一般在奇數描邊的情況下需要格外注意像素對齊的問題

首選項中的關鍵選項設置完畢後，點開工具欄中的視圖：

邊角構件一定要顯示，如果隱藏的話你會發現不能拉圓角了
智能參考線打開，方便對齊
顯示網格的快捷鍵（ctrl+」）可以記一下，因為有時候網格打開會非常密集，僅在需要的時候打開
對齊網格是錨點、手柄會對齊網格，但是在奇數描邊的情況下，像素是對不齊的，所以我們一般只打開對齊像素，比較特殊的情況下可以關閉對齊像素，打開對齊網格，具體案例可以參考 IpNeNaEcRe：如何繪製邊緣清晰又圓潤的小尺寸圖標？，這個回答後面需要對齊半個像素的情況，我關閉了對齊像素，使用了對齊網格

對齊像素和對齊網格

當然上面這個例子是有些片面的，因為我使用了居中描邊，而且是奇數描邊。如果使用用內描邊或者外描邊是可以兩者兼顧的，但是，不同的描邊形式下，相同數值的圓角表現也會不同，因此，為了保證 icon 風格的統一，最好使用同一種描邊形式。另外，不閉合的路徑是只能居中描邊的，因此，我個人習慣於居中描邊。

1px 描邊，1px 圓角，居中描邊、內描邊、外描邊的圓角表現

如果使用了網格對齊或者一些其他原因而導致像素沒有對齊，可以選中圖標手動對齊：

手動像素對齊

基本設置就到這裡，更多內容下一篇見！