【ICON】從打開 Ai 到輸出文件，我的獨門秘技之 02 準備篇

上一篇我們講了 Ai 的設置，這一篇我們講一下繪製前的準備工作，不要小看這些準備，它們可以讓你後面的工作變得事半功倍！

一.新建文件

首先是新建文件，新建之前先搞清楚你的目的，如果你是自己練習繪製或者臨摹一組 icon，那麼新建畫板的大小可以隨意，夠用就行。如果你是在實際工作中需要後期輸出各種 png 或者 svg，那你最好按照我的這個方法來，後期一鍵輸出所有文件 so easy！

假設我要繪製一組 2 倍設計稿中的 icon，大小為 48 px，先設置網格，根據 icon 的大小來設置，盡量設成能夠整除 48 的大小，比如 6、8、12、24，這裡我將網格線間隔和次分隔線都設置為 12，設置好之後新建文件：

• 畫板大小設為 icon 的實際大小，48x48，數量設為 20，多點少點都可以，後期可以在文件中增減
• 更多設置中，將列數和間距設置好，這裡我設置了 5 列，間距是根據網格線間隔的數值來設置的，12 px
• 創建好文檔，發現畫板已經排列了整齊的 4 排 5 列，顯示網格，放大查看，網格和畫板完美對齊！這個關鍵就在上一步設置的間距數值：必須為網格線間隔的整倍數才行

如果你直接創建了文檔而沒有在更多設置裡面排列好畫板，沒有關係， 還能搶救一下，打開畫板窗口（找不到的可以在 窗口 — 畫板 中打開）：

二.設置參考線

利用參考線可以幫助我們保證一組 icon 的視覺平衡，關於視覺平衡，網上有太多相關的文章，我就不重複寫了，在這裡推薦幾篇我認為講的最好的：

• 比圓更圓—視覺感知在UI中的應用
• 優質icon設計的6個簡單步驟 （不只講視覺平衡，還有很多像素對齊相關的知識）
• https://material.io/guidelines/style/icons.html （Google MD 官方文檔，英文不好的朋友可以看這個中文版： 圖標樣式 ）
• 微軟雅黑的設計-齊立_字體之窗_方正字型檔 （雖然是字體的設計，但是道理都是相通的，也很值得一看）

看完是不是有種熱血沸騰想要大幹一場的衝動，可是參考線從哪裡找？不要緊張，我已經為你準備好了：

鏈接: https://pan.baidu.com/s/1kUNnceb 密碼: 4y6y

下載了文件之後不要急著打開！！！因為打開後你會發現裡面什麼都沒有，因為這是一個符號文件。我來為你演示如何使用，首先複製這個文件，然後打開符號面板（找不到的朋友在窗口 — 符號中打開）：

• 將 Icon_Grid 文件粘貼到符號文件所在的文件夾中
• 點開符號面板的左下角，發現 Icon_Grid 已經在列表中了，打開這個文件，裡面是我製作好的參考線，一共5種，適用於 20px、24px、32px（2 種）、48px 的 icon 繪製，如果需要繪製 40px、64px 的，只需把 20px、32px 等比放大，其他尺寸類似。其中橫排相鄰的三個是一模一樣的，只是形式不同，可以根據個人喜好選擇：

選擇你喜歡的形式，將其拖拽到文檔的每一個畫板上，這裡你可以選擇 48px 的參考線，也可以選擇 24px 的參考線放大兩倍，有什麼區別呢？24px 放大的安全區域更多，相應的 icon 會稍微小一點，這裡我選擇 48px 的參考線：

• 這裡我使用了快速複製，首先，按住 Alt 拖動參考線到相鄰的畫板上，然後按 ctrl+D，複製上一步操作，填滿第一排五個畫板。再用相同的方法填滿全部畫板

參考線放置就緒之後，打開圖層面板（找不到的在窗口 — 圖層中打開），將當前圖層鎖定，新建一個圖層，這樣的好處是參考線所在的圖層和 icon 所在的圖層可以很好的區分，可以隨時隱藏參考線查看整體情況：

• 將參考線所在的圖層鎖定，在新建的圖層上繪製你的 icon

三.色板設置

什麼？還要設置色板？我怎麼不知道畫個 icon 還有這麼多破事！

不要急，其實很簡單，很快你就會愛上這個操作：

• 在色板中任選一個顏色，雙擊，勾選全局色，確定，右下角出現了一個小三角，代表這個是全局色，因為描邊和填充有兩種不同顏色，我這裡設置了兩個全局色
• 然後選中你的 icon，將填充和描邊的顏色分別設置為這兩個全局色。我這裡用了幾個簡單的圖形演示，最好在一開始就設好全局色，然後在繪製 icon 的時候就用全局色來配色
• 雙擊全局色，勾選預覽，改變這個顏色，發現 icon 的顏色也隨之改變了，實際上，凡是利用這個全局色配色的所有元素都會跟隨改變。這樣一來，你可以通過改變這兩個全局色實現整套 icon 的快速配色，分分鐘配出成噸的組合

好了，準備了這麼多，終於可以開始 icon 的正式繪製了，我們下一篇見！