1.設置新文檔
首先確保已經在后臺啟動并運行了Illustrator，創建一個新文檔（文件> 新建或Control-N）：
畫板數量：?1
寬度：?800像素
高度：?600像素
單位：?像素
進入“?高級”選項卡：
色彩模式：?RGB
柵格效果：屏幕（72ppi）
預覽模式：默認
2.創建自定義網格
由于我們希望創建一個完美的矢量圖標，所以我們需要創建一個精確的網格，以便我們可以更加精確的控制我們繪制的形狀。
第1步
進入編輯>首選項>參考線和網格子菜單，然后調整以下設置：
網格：?1 px
細分：?1
第2步
設置好自定義網格，接下來為了確保我們繪制的形狀看起來更加清晰，我們可以在“?視圖”菜單選擇“?對齊到網格”選項，每次進入“?像素預覽”時，它都會默認轉換為“?對齊到像素”模式。
3.如何設置圖層
創建新文檔后，使用幾個層構建項目是個好主意，因為這樣我們可以通過一次關注一個圖標來維持穩定的工作流程。
話雖如此，打開“?圖層”面板，共創建四個圖層，我們將重命名如下：
第1層：參考網格
第2層：手機聊天
第3層：電子郵件
第4層：聊天氣泡
4.創建參考網格
通常網格的大小決定了圖標的大小，所以在圖標的繪制過程中確定參考網格的大小是我們工作開始的第一步。
接下來我們要創建的一組128 x 128 px大小的圖標集。
第1步
首先鎖定除參考網格圖層以外的所有圖層，然后選擇矩形工具（M）并創建一個128 x 128像素的橙色（#F15A24）方塊。
第2步
接下來添加另一個較小的120 x 120 px?矩形（#FFFFFF），它將作為我們的活動繪圖區域，并為我們提供4 px的邊緣。
第3步
使用Control-G鍵盤快捷鍵將構成參考網格的兩個正方形進行分組，然后在彼此相距40 px的位置創建兩個副本，將它們與畫板的中心對齊。
完成后，鎖定當前圖層并轉到下一個圖層，我們開始制作第一個圖標。
5.創建手機聊天圖標
選擇第二個圖層放大參考網格，方便我們之后繪制圖標的過程中觀察圖標的細節。
第1步
使用8 px圓角、56 x 94 px大小的圓角矩形創建手機的主體形狀，并使用#C4CEE8進行著色 ，然后將其放置在距離底層活動繪圖區域距離左下角4px的位置。
第2步
給剛剛創建的圖形添加輪廓。通過創建它的副本（Control-C），將副本粘貼（Control-F）在原圖形前面，然后將其顏色更改為#2B3249，然后將其輪廓設置為8px。
完成后，使用Control-G鍵盤快捷鍵選擇并將兩個形狀組合在一起。
第3步
創建一個32 x 58 px矩形我們開始在手機的顯示屏上繪制形狀，首先將該矩形顏色設置為#8195C1，然后水平居中對齊到我們剛剛分組的兩個形狀，距離填充形狀的頂部邊緣12 px的距離。
第4步
使用描邊為顯示器創建8 px輪廓（#2B3249），然后選擇兩個形狀并將它們進行分組（Control-G）。
第5步
創建手機底部的圓形按鈕，創建8 x 8 px圓圈，并使用#2B3249為它進行著色，然后保持與手機主體形狀居中對齊。
第6步
啟用“像素預覽”模式，并使用鋼筆工具（P）繪制12 px長、?4 px寬前置揚聲器單元，使用#2B3249為它進行著色，然后將中心對齊手機主體部分的上方。
第7步
使用12 x 4 px矩形創建手機的電源按鈕，使用#2B3249為該矩形進行著色，然后定位到輪廓的頂部，距離活動繪圖區域左邊緣12 px的位置。
第8步
在“?形狀”面板的“?矩形屬性”中將其頂角的半徑設置為2 px，然后選擇并分組（Control-G）手機的所有組成形狀。
第9步
使用我們剛剛完成的副本（Control-C> Control-F）創建第二部手機，給手機整體形狀進行水平和垂直映射（右鍵單擊>變換>反射>水平/垂直），然后將其定位到活動繪圖區域的右側，頂部繪圖的邊緣。
第10步
創建一個20 x 20像素圓圈開始繪制心形，使用#ED664C為它進行著色，然后定位到左側手機的顯示屏上，距離其頂部邊緣9 px，距離其左邊緣6 px的位置。
第11步
另外創建兩個20 x 20 px圓圈（#ED664C），第一個圓放置在圓圈的右方，與圓的表面重疊4 px，下方的圓與另外兩個圓的表面重疊8px。
第12步
完成三個圓圈，然后選擇路徑查找器的聯集選項將它們組合成一個更大的形狀。
第13步
刪除在聯集過程中產生的中心錨點，通過使用刪除錨點工具（ - ）調整生成的形狀。
第14步
通過選擇其錨點的手柄并拖動它們調整新形狀。完成后，給生成的形狀創建8 px輪廓（#2B3249），并選擇圓形端點，然后選擇并將生成的兩個形狀進行分組。
第15步
創建一個24 x 50像素的矩形（選擇一個比較顯眼的顏色）來掩蓋心形的半邊。然后，選擇心形和矩形，右鍵單擊并選擇“?制作剪切蒙版”，使用Control-G鍵盤快捷鍵將其與左手機組合在一起 。
第16步
創建心形的副本，然后將其居中對齊到右側手機的顯示屏，進行垂直翻轉（右鍵單擊>變換>反射>垂直）
準備完成后，將其與手機形狀一起進行分組（Control-G），然后對圖標的所有組成部分進行相同操作。第一個圖標我們就完成了。
6.創建電子郵件圖標
移動到第三個圖層，放大第二個參考網格，讓我們開始創建電子郵件圖標吧。
第1步
使用96 x 64 px矩形創建信封的主要形狀，使用#ED664C為該矩形進行著色，然后將其中心對齊到下面的活動繪圖區域，放置在距離底部邊緣4 px的位置。
第2步
在“?形狀”面板的“?矩形屬性”中將?其底角的半徑設置為8 px，調整我們剛剛創建的形狀。
第3步
使用描邊方法為生成的形狀提供8 px的輪廓（#2B3249），將其邊角設置為圓角連接，之后將兩個形狀進行分組（Control-G）。
第4步
使用96 x 64 px矩形創建信封的上半部分，使用#BF402E為該矩形進行著色 ，然后將其中心對齊到底部形狀，與下半部分形狀相重疊。
第5步
使用添加錨點工具（+）將新錨點添加到其各個邊緣的中心，使用錨點工具中的刪除錨點工具（ - ）（在參考圖像中突出顯示）移除它，將我們剛剛創建的形狀轉換為菱形（ - ）?。
第6步
給得到的形狀添加8像素輪廓（#2B3249）進入描邊選擇邊角中的圓角連接，選擇并將完成的圖形進行分組（Control-G?）。
第7步
選擇鋼筆工具（P）并使用圓形端點8 px粗細的線條?（#2B3249）繪制信封上的兩條對角線。
第8步
使用64 x 80 px、8 px 輪廓的圓角矩形創建賀卡的主體部分，使用#F4E9E9為形狀進行著色 ，然后將其中心對齊到下面的活動繪圖區域，距離其頂部邊緣4 px。
第9步
給我們剛剛完成的圖形添加8 px輪廓的#2B3249，然后使用（Control-G）鍵盤快捷鍵選擇并分組兩個形狀。
第10步
創建心形副本（Control-C）并將其粘貼（Control-F）到當前圖層上，將其對齊到賀卡，將其定位在賀卡頂部邊緣8像素的位置。
然后，完成后，使用Control-G鍵盤快捷鍵選擇并將它們進行分組。
第11步
創建信封上部分形狀的副本（Control-C）掩蓋我們剛剛分組的兩個形狀，將其粘貼在賀卡形狀的上方（Control-F），然后通過移除其底端錨點。然后閉合路徑，調整形狀大小使其與信封的寬度相同（如下圖所示形狀）。
第12步
選擇完成的形狀和賀卡部分創建剪切蒙版得到下圖所示的形狀。
完成后，在圖形的底端使用鋼筆工具添加兩條4px線段，然后選擇蒙版形狀和線條并進行分組（Control-G），以便它們不會被意外分開。
第13步
選擇鋼筆工具（P），粗細設置為4 px（#2B3249）繪制箭頭的前端，并將箭頭的邊角設置為圓形。
完成后，使用Control-G鍵盤快捷鍵選擇并將完成的形狀進行分組。
第14步
使用28像素長4像素寬的線條（#2B3249）繪制箭頭的后部，將其尾端連接到在活動繪圖區域。
第15步
使用矩形工具創建12 x 12 px正方形，并使用#EAA74E進行著色，然后將其中心對齊到箭頭的后部，距離活動繪圖區域左邊緣2 px。
第16步
使用添加錨點工具（A）將新錨點添加到方形的兩邊中心位置，?然后選擇并向右推動6 px的距離（右擊>變換>移動>水平> 6 PX）。
第17步
為結果形狀提供一個4 px輪廓（#2B3249），進入描邊將邊角設置為圓形連接，并給圖形進行分組（Control-G），然后將它們發送到箭頭后部的背面（右鍵單擊>變換>排列>后移一層）。
7.創建聊天氣泡圖標
接下來我們開始繪制聊天氣泡圖標，也是最后一個圖標，所以讓給我們移動到最后一個圖層，放大它的參考網格，開始制作圖標。
第1步
使用88 x 68 px矩形創建左側對話框的主體形狀，使用#C2A6DD為該矩形進行著色，然后將其放置在底層活動繪圖區域的左上角，留下4px的間隙。
第2步
在“?變換”面板的“?矩形屬性”中將其頂部和右下角的角半徑設置為8 px，調整我們剛剛創建的形狀。
第3步
切換到像素預覽模式（Alt-Control-Y），然后使用添加錨點工具（+）將新錨點添加到對話框底部左邊緣20px的位置。
第4步
使用直接選擇工具（A）選擇其左下錨點調整對話框形狀，然后使用移動工具（右鍵單擊>變換>移動>垂直> 16像素）將其向底部移動16 px的距離。
第5步
為圖形添加8px的輪廓并將邊角設置為圓形連接（#2B3249），然后使用Control-G鍵盤快捷鍵選擇并將它們組合在一起。
第6步
按照債之前一樣的方法繪制一個心形圖案放置在對話框的中心位置。
第7步
創建三個6 x 6 px圓并將彼此的距離為2px，使用#2B3249為它們進行著色，給完成的形狀進行分組（Control-G），然后定位到對話框的右下角，將它們放置在活動繪圖區域右邊緣4px的位置。
完成后，使用Control-G鍵盤快捷鍵選擇所有完成的形狀并分組。
第8步
創建左側對話框的填充形狀和輪廓的副本（Control-C> Control-F），并將它們對齊到底層活動繪圖區域的右下角，之后水平翻轉它們（右鍵單擊>變換>反射>水平），將填充形狀的顏色更改為#9F88BA。
第9步
打開像素預覽模式（Alt-Control-Y）并創建18 px長、?4 px寬的線條（#2B3249）繪制文本形狀，然后繪制另一條34 px長、?4 px寬，距離之前形狀4 px。完成之后將兩個形狀進行分組（Control-G），然后將它們放置在距對話框左下邊緣8 px的位置。
第10步
通過選擇并將右側對話框的所有組成形狀組合在一起（Control-G）完成圖標，然后將它們發送到左對話框的下方（右鍵單擊>排列>后移一層）。
完成
