創(chuàng)建新文檔
啟動Illustrator進行File> New（或使用Control-N鍵盤快捷鍵）操作來創(chuàng)建一個新文檔备典，進行如下操作：
畫板數(shù)量：12
間距：32像素
專欄：4
寬度：64像素
身高：64像素
單位：像素
調(diào)整“高級”選項卡：
色彩模式：RGB
光柵效果：屏幕（72 ppi）
設(shè)計是一門不斷學習提佣、積累的過程，所以我強烈建議大家瀏覽一些優(yōu)秀的圖標網(wǎng)站（尋圖標https://icon.52112.com）積累素材倚喂。
設(shè)置圖層屬性
建立新文檔焦读，我們需要建立幾個圖層矗晃，以便我們可以將圖標與參考網(wǎng)格分開。要執(zhí)行此操作吠冤，只需打開“圖層”面板郭变，然后創(chuàng)建總共兩個圖層，我們將重命名周伦，如下所示：
第1層>參考網(wǎng)格
第2層>圖標
創(chuàng)建參考網(wǎng)格
步驟1
選擇矩形工具（M）創(chuàng)建一個64 x 64像素的正方形片排，使用＃F15A24進行著色迫卢，然后使用“對齊”面板的“水平”和“垂直對齊中心”選項定位到第一個畫板的中心乾蛤。
第2步
創(chuàng)建另一個較小的56 x 56像素正方形（#FFFFFF），作為有效繪圖區(qū)域上荡，從而為我們提供全面的4 px保護填充榛臼。完成后航揉，使用Control-G鍵盤快捷鍵選擇兩個形狀并將它們組合在一起帅涂。
第3步
使用我們剛剛完成的工作的副本（Control-C）添加剩余的參考網(wǎng)格产捞，使用（Control-F）粘貼到相鄰的畫板上坯临。鎖定當前圖層赶促，然后再繼續(xù)下一步鸥滨。
創(chuàng)建空白文件夾
當我們完成了參考網(wǎng)格的創(chuàng)建泊脐，我們可以繼續(xù)下一層（這將是第二層）容客，我們開始創(chuàng)建十二個圖標需要使用的空白文件夾但两。
步驟1
返回第一個畫板上，然后使用56 x 40像素矩形創(chuàng)建文件夾主體的主要形狀紧阔，使用＃FFCD50進行著色活孩，然后將中心對齊到繪圖區(qū)域，將其定位在距離為距離底邊4 px起趾。
第2步
使用20 x 8 px矩形（＃FFCD50）添加較小的上部，定位在上一個形狀的頂部缭保，將其對齊到其左邊緣。
第3步
使用36 x 4 px矩形創(chuàng)建后部隆夯，使用＃FFA852進行著色，然后定位到主體的上部愧口，對齊到右邊緣。
第4步
創(chuàng)建兩個2 px高的矩形（＃FFE164）給文件夾添加高光厚骗，調(diào)整邊緣長度。完成后舍咖，不要忘記使用Control-G鍵盤快捷鍵將做好的圖像組合在一起。
第5步
給剛剛完成的文件夾創(chuàng)建副本（Control-C> Control-F）填充剩余的畫板郑诺，完成后繼續(xù)下一步。
創(chuàng)建副本
創(chuàng)建音樂文件夾圖標
步驟1
創(chuàng)建6 x 4 px的橢圓創(chuàng)建音符頭部的主要形狀開始創(chuàng)建音符，使用＃E58C3C進行著色较店，然后定位到下面的文件夾梁呈，距離其左邊緣19 px底部11 px。
第2步
創(chuàng)建橢圓的副本（Control-C）來給我們剛剛創(chuàng)建輪廓的形狀，將創(chuàng)建的圖像粘貼（Control-F）颈嚼，然后調(diào)整邊緣叫挟，將邊緣寬度設(shè)置為2像素霞揉。完成后绊序，使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起。
第3步
創(chuàng)建12 px高2 px寬的直線（＃E58C3C）添加音符柄部，我們將其定位到參考圖像中看到的橢圓的右錨點钦听，并將它們組合在一起（Control-G）繼續(xù)下一步洒试。
第4步
給我們剛剛完成圖像創(chuàng)建副本（Control-C> Control-F）將其向右移動12 px的距離，然后在另一個的頂部向下移動2px的距離（右鍵單擊>變換>移動>水平> 12像素>垂直> -2像素）朴上。
第5步
創(chuàng)建一個輪廓2 px的（＃E58C3C）12 x 4 px矩形（＃E58C3C）和音符柄部疊加垒棋，將圖像進行分組（Control-G），如參考圖像中所示痪宰。
第6步
完成當前圖標衣撬，雙擊創(chuàng)建的圖形將其隔離（右鍵單擊>隔離所選組）蜡吧，然后使用直接選擇工具（A）選擇錨點牲距，將它們推到頂部2 px距離难述。完成后屯断，按Esc鍵退出隔離模式，然后選擇并組合（Control-G）所有符號的組成形狀滥酥，然后對整個圖標執(zhí)行相同操作。
創(chuàng)建視頻文件夾圖標
完成第一個圖標后您机，跳到下一個圖層仲闽，開始處理第二個圖標。
步驟1
創(chuàng)建一個16 x 18像素的矩形让禀，使用＃E58C3C進行著色，然后定位距文件夾左邊緣21 px的距離捌木，距離文件夾的左邊緣11 px。
第2步
使用添加錨點工具（+）創(chuàng)建新錨點添加到其右邊緣的中心拥峦，將我們剛剛創(chuàng)建的形狀轉(zhuǎn)換為三角形。
第3步
使用刪除錨點工具（ - ）刪除其右角錨點刊懈，繼續(xù)調(diào)整形狀，創(chuàng)建一個指向右邊的三角形眠砾。
第4步
給剛剛創(chuàng)建的三角形添加2 px寬的輪廓（＃E58C3C），將兩者組合在一起（Control-G）蜗搔，然后對整個圖標執(zhí)行相同操作服鹅。
創(chuàng)建照片文件夾圖標
步驟1
創(chuàng)建18×14像素的矩形斟珊，使用＃E58C3C著色综慎，然后調(diào)整到距離底部11像素左邊緣15像素的位置。
第2步
將形狀轉(zhuǎn)換為三角形，方法是使用“添加錨點工具”（+）在其上邊緣的中心添加錨點遗锣，使用“刪除錨點工具”（ - ）刪除其側(cè)邊錨點。使用描邊創(chuàng)建2 px寬的輪廓（＃E58C3C）窃爷，使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起。
第3步
創(chuàng)建12 x 8 px矩形（＃E58C3C）參照上一步的方法添加一個較小的三角形麦箍。
第4步
完成當前圖標漓藕，創(chuàng)建4 x 4 px圓（＃E58C3C）和2 px寬輪廓（＃E58C3C）添加太陽的形狀，分組（Control-G）挟裂，然后將其放在較小的三角形上方享钞。完成后，不要忘記使用Control-G鍵盤快捷鍵選擇并分組诀蓉。
創(chuàng)建聯(lián)系人文件夾圖標
步驟1
首先創(chuàng)建18 x 6 px矩形創(chuàng)建人下半身的主要形狀栗竖，使用＃E58C3C對其進行著色暑脆，然后將中心對齊到下面的文件夾，定位在距離其底邊11 px的位置狐肢。
第2步
打開“變換”面板并在“矩形屬性”中將其頂角的半徑設(shè)置為4 px添吗，調(diào)整我們剛剛創(chuàng)建的形狀。
第3步
使用描邊為上一步創(chuàng)建的圖形添加2 px寬的輪廓（＃E58C3C）份名，使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起碟联。
第4步
創(chuàng)建2 px寬輪廓（＃E58C3C）的8 x 8 px圓（＃E58C3C）作為頭部，分組（Control-G）然后將兩個中心對齊到較大的主體僵腺，將它們定位在距離身體2px的上端鲤孵。完成后，請確保選擇并分組（Control-G）所有圖標的組成形狀辰如，然后再轉(zhuǎn)到下一個圖標普监。
創(chuàng)建書簽文件夾圖標
步驟1
使用矩形工具（M），創(chuàng)建一個12 x 18像素的矩形丧没，我們將使用＃E58C3C進行著色鹰椒，然后將中心對齊到較大的文件夾，將其定位在距離其底邊11 px的位置呕童。
第2步
通過使用添加錨點工具（+）將新錨點添加到其上邊緣的中心漆际，然后選擇并使用移動將其推入內(nèi)部6 px的距離來調(diào)整我們剛剛創(chuàng)建的形狀工具（右鍵單擊>變換>移動>垂直> -6 px）。
第3步
通過使用描邊為上一步創(chuàng)建的形狀建立2 px寬的輪廓（＃E58C3C）夺饲，選擇并分組（Control-G）兩者奸汇，然后對整個圖標執(zhí)行相同操作，完成當前圖標往声。
創(chuàng)建安全文件夾圖標
步驟1
創(chuàng)建10 x 12 px矩形做為鑰匙孔的下半部分擂找，使用＃E58C3C進行著色，然后將中心對齊到較大的底層文件夾浩销，放到距離其底邊11 px的位置贯涎。
第2步
通過使用直接選擇工具（A）單獨選擇其頂部錨點，然后使用方向箭頭鍵將它們推入內(nèi)部4 px慢洋，調(diào)整我們剛剛創(chuàng)建的形狀塘雳。
第3步
使用描邊為結(jié)果形狀創(chuàng)建2 px寬的輪廓（＃E58C3C），然后使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起普筹。
第4步
創(chuàng)建10 x 10 px的圓（＃E58C3C）并添加2 px寬輪廓（＃E58C3C）添加鑰匙孔的上部來完成圖標败明，我們將分組（Control-G）然后定位在在參考圖像中。完成后太防，將創(chuàng)建圖形進行分組（Control-G）妻顶。
創(chuàng)建上傳文件夾圖標
步驟1
首先使用4 x 6 px矩形（＃E58C3C）創(chuàng)建箭頭的下部犀斋，給該矩形創(chuàng)建2 px寬的輪廓（＃E58C3C）兔朦，對其進行分組（Control-G）勃刨，然后將中心對齊到底層文件夾虎敦，將它們定位在距離底邊10 px的位置。
第2步
使用18 x 12 px的矩形創(chuàng)建箭頭的主要形狀沥潭，并使用＃E58C3C進行著色崭添，然后將中心對齊到之前的形狀并定位到參考圖像中看到的上邊緣。
第3步
將我們剛剛創(chuàng)建的矩形轉(zhuǎn)換為三角形來完成圖標叛氨，方法是使用添加錨點工具（+）將新錨點添加到其上邊緣的中心，然后使用刪除錨點工具（ - ）棘伴。使用描邊為剛剛創(chuàng)建的形狀提供2 px寬的輪廓（＃E58C3C）寞埠，選擇并將兩者組合在一起（Control-G），然后對整個圖標執(zhí)行相同操作焊夸。
創(chuàng)建下載文件夾圖標
步驟1
首先創(chuàng)建向上箭頭的副本（Control-C）仁连，然后我們將其（Control-F）粘貼到當前的畫板上。
第2步
使用“反射”工具（右鍵單擊>“變換”>“反射”>“水平”）水平翻轉(zhuǎn)箭頭來完成當前圖標阱穗，使用Control-G鍵盤快捷鍵選擇并分組其所有合成形狀饭冬。
創(chuàng)建添加新文件夾圖標
步驟1
創(chuàng)建4 x 18 px矩形（＃E58C3C）創(chuàng)建加號的垂直部分，創(chuàng)建2 px寬輪廓（＃E58C3C）揪阶，選擇分組（Control-G）然后定位到中心底層文件夾昌抠。
第2步
創(chuàng)建2 px輪廓（＃E58C3C）的18 x 4 px矩形（＃E58C3C）添加水平部分，使用描邊鲁僚，選擇圖形進行分組（Control-G）炊苫，然后將兩者定位到中心。
創(chuàng)建刪除當前文件夾圖標
步驟1
首先創(chuàng)建加號的副本（Control-C）冰沙，然后我們使用（Control-F）粘貼到當前的畫板上侨艾。
第2步
首先取消組合當前的組成部分（右鍵單擊>取消組合），然后使用Delete鍵選擇并刪除其垂直部分來完成圖標拓挥。完成后唠梨，不要忘記選擇并分組（Control-G）當前圖標形狀，然后再轉(zhuǎn)到下一個圖標侥啤。
創(chuàng)建缺少的文件夾圖標
步驟1
首先創(chuàng)建添加新文件夾圖標的加號的副本（Control-C）当叭，我們將其粘貼（Control-F）到當前的畫板上。
第2步
將加號轉(zhuǎn)換為x愿棋，選擇加號圖形變換角度（右鍵單擊>變換>旋轉(zhuǎn)>45o）科展。
第3步
完成圖標，將旋轉(zhuǎn)后的形狀的錨點復(fù)位到原位糠雨，然后將它們向外延伸1 px才睹。然后選擇并分組（Control-G）所有組成形狀。
創(chuàng)建搜索當前文件夾圖標
步驟1
創(chuàng)建14×14像素寬4 PX的圓（＃E58C3C）作為放大鏡的上半部分，移動到距離文件夾圖層左邊18px底層12px的位置琅攘。
第2步
創(chuàng)建4 px寬4 px長的直線（＃E58C3C）繪制手柄垮庐，如參考圖像中所示。完成后坞琴，選擇并將兩者組合在一起（Control-G）哨查。
完成
總結(jié)
圖標設(shè)計是UI設(shè)計中非常重要的一環(huán)，因為除了文字和圖片的排版之外剧辐，在扁平時代我們能夠傳遞給用戶情緒和設(shè)計感的通道就是頁面中的各種圖形和圖標了寒亥，如果做不好圖標，用戶就將在使用界面時失去樂趣荧关。所以溉奕，我建議每位UI設(shè)計師都需要在平時做大量的圖標練習。在不同的圖標風格中忍啤，學會使用各式各樣的工具加勤，文章最后推薦大家可以去尋圖標https://icon.52112.com收集圖標素材以供設(shè)計參考。
