創(chuàng)建新文檔
啟動(dòng)Illustrator進(jìn)行File> New（或使用Control-N鍵盤快捷鍵）操作來創(chuàng)建一個(gè)新文檔，進(jìn)行如下操作：
畫板數(shù)量：?12
間距：?32像素
專欄：?4
寬度：?64像素
身高：?64像素
單位：像素
調(diào)整“?高級(jí)”選項(xiàng)卡：
色彩模式：?RGB
光柵效果：屏幕（72 ppi）
設(shè)計(jì)是一門不斷學(xué)習(xí)、積累的過程，所以我強(qiáng)烈建議大家瀏覽一些優(yōu)秀的圖標(biāo)網(wǎng)站積累素材。
設(shè)置圖層屬性
建立新文檔，我們需要建立幾個(gè)圖層，以便我們可以將圖標(biāo)與參考網(wǎng)格分開。要執(zhí)行此操作，只需打開“?圖層”面板，然后創(chuàng)建總共兩個(gè)圖層，我們將重命名，如下所示：
第1層>參考網(wǎng)格
第2層>圖標(biāo)
創(chuàng)建參考網(wǎng)格
步驟1
選擇矩形工具（M）創(chuàng)建一個(gè)64 x 64像素的正方形，使用＃F15A24進(jìn)行著色，然后使用“?對(duì)齊”面板的“?水平”和“?垂直對(duì)齊中心”選項(xiàng)定位到第一個(gè)畫板的中心。
第2步
創(chuàng)建另一個(gè)較小的56 x 56像素正方形（#FFFFFF），作為有效繪圖區(qū)域，從而為我們提供全面的4 px保護(hù)填充。完成后，使用Control-G鍵盤快捷鍵選擇兩個(gè)形狀并將它們組合在一起。
第3步
使用我們剛剛完成的工作的副本（Control-C）添加剩余的參考網(wǎng)格，使用（Control-F）粘貼到相鄰的畫板上。鎖定當(dāng)前圖層，然后再繼續(xù)下一步。
創(chuàng)建空白文件夾
當(dāng)我們完成了參考網(wǎng)格的創(chuàng)建，我們可以繼續(xù)下一層（這將是第二層），我們開始創(chuàng)建十二個(gè)圖標(biāo)需要使用的空白文件夾。
步驟1
返回第一個(gè)畫板上，然后使用56 x 40像素矩形創(chuàng)建文件夾主體的主要形狀，使用＃FFCD50進(jìn)行著色，然后將中心對(duì)齊到繪圖區(qū)域，將其定位在距離為距離底邊4 px。
第2步
使用20 x 8 px矩形（＃FFCD50）添加較小的上部，定位在上一個(gè)形狀的頂部，將其對(duì)齊到其左邊緣。
第3步
使用36 x 4 px矩形創(chuàng)建后部，使用＃FFA852進(jìn)行著色，然后定位到主體的上部，對(duì)齊到右邊緣。
第4步
創(chuàng)建兩個(gè)2 px高的矩形（＃FFE164）給文件夾添加高光，調(diào)整邊緣長度。完成后，不要忘記使用Control-G鍵盤快捷鍵將做好的圖像組合在一起。
第5步
給剛剛完成的文件夾創(chuàng)建副本（Control-C> Control-F）填充剩余的畫板，完成后繼續(xù)下一步。
創(chuàng)建音樂文件夾圖標(biāo)
第1步
創(chuàng)建6 x 4 px的橢圓創(chuàng)建音符頭部的主要形狀開始創(chuàng)建音符，使用＃E58C3C進(jìn)行著色，然后定位到下面的文件夾，距離其左邊緣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）添加音符柄部，我們將其定位到參考圖像中看到的橢圓的右錨點(diǎn)，并將它們組合在一起（Control-G）繼續(xù)下一步。
第4步
給我們剛剛完成圖像創(chuàng)建副本（Control-C> Control-F）將其向右移動(dòng)12 px的距離，然后在另一個(gè)的頂部向下移動(dòng)2px的距離（右鍵單擊>變換>移動(dòng)>水平> 12像素>垂直> -2像素）。
第5步
創(chuàng)建一個(gè)輪廓2 px的（＃E58C3C）12 x 4 px矩形（＃E58C3C）和音符柄部疊加，將圖像進(jìn)行分組（Control-G），如參考圖像中所示。
第6步
完成當(dāng)前圖標(biāo)，雙擊創(chuàng)建的圖形將其隔離（右鍵單擊>隔離所選組），然后使用直接選擇工具（A）選擇錨點(diǎn)，將它們推到頂部2 px距離。完成后，按Esc鍵退出隔離模式，然后選擇并組合（Control-G）所有符號(hào)的組成形狀，然后對(duì)整個(gè)圖標(biāo)執(zhí)行相同操作。
創(chuàng)建視頻文件夾圖標(biāo)
完成第一個(gè)圖標(biāo)后，跳到下一個(gè)圖層，開始處理第二個(gè)圖標(biāo)。
第1步
創(chuàng)建一個(gè)16 x 18像素的矩形，使用＃E58C3C進(jìn)行著色，然后定位距文件夾左邊緣21 px的距離，距離文件夾的左邊緣11 px。
第2步
使用添加錨點(diǎn)工具（+）創(chuàng)建新錨點(diǎn)添加到其右邊緣的中心，將我們剛剛創(chuàng)建的形狀轉(zhuǎn)換為三角形。
第3步
使用刪除錨點(diǎn)工具（ - ）刪除其右角錨點(diǎn)，繼續(xù)調(diào)整形狀，創(chuàng)建一個(gè)指向右邊的三角形。
第4步
給剛剛創(chuàng)建的三角形添加2 px寬的輪廓（＃E58C3C），將兩者組合在一起（Control-G），然后對(duì)整個(gè)圖標(biāo)執(zhí)行相同操作。
創(chuàng)建照片文件夾圖標(biāo)
第1步
創(chuàng)建18×14像素的矩形，使用＃E58C3C著色，然后調(diào)整到距離底部11像素左邊緣15像素的位置。
第2步
將形狀轉(zhuǎn)換為三角形，方法是使用“?添加錨點(diǎn)工具”（+）在其上邊緣的中心添加錨點(diǎn)，使用“?刪除錨點(diǎn)工具”（ - ）刪除其側(cè)邊錨點(diǎn)。使用描邊創(chuàng)建2 px寬的輪廓（＃E58C3C），使用Control-G鍵盤快捷鍵選擇并將兩者組合在一起。
第3步
創(chuàng)建12 x 8 px矩形（＃E58C3C）參照上一步的方法添加一個(gè)較小的三角形。
第4步
完成當(dāng)前圖標(biāo)，創(chuàng)建4 x 4 px圓（＃E58C3C）和2 px寬輪廓（＃E58C3C）添加太陽的形狀，分組（Control-G），然后將其放在較小的三角形上方。完成后，不要忘記使用Control-G鍵盤快捷鍵選擇并分組。
創(chuàng)建聯(lián)系人文件夾圖標(biāo)
第1步
首先創(chuàng)建18 x 6 px矩形創(chuàng)建人下半身的主要形狀，使用＃E58C3C對(duì)其進(jìn)行著色，然后將中心對(duì)齊到下面的文件夾，定位在距離其底邊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）然后將兩個(gè)中心對(duì)齊到較大的主體，將它們定位在距離身體2px的上端。完成后，請(qǐng)確保選擇并分組（Control-G）所有圖標(biāo)的組成形狀，然后再轉(zhuǎn)到下一個(gè)圖標(biāo)。
創(chuàng)建書簽文件夾圖標(biāo)
第1步
使用矩形工具（M），創(chuàng)建一個(gè)12 x 18像素的矩形，我們將使用＃E58C3C進(jìn)行著色，然后將中心對(duì)齊到較大的文件夾，將其定位在距離其底邊11 px的位置。
第2步
通過使用添加錨點(diǎn)工具（+）將新錨點(diǎn)添加到其上邊緣的中心，然后選擇并使用移動(dòng)將其推入內(nèi)部6 px的距離來調(diào)整我們剛剛創(chuàng)建的形狀工具（右鍵單擊>變換>移動(dòng)>垂直> -6 px）。
第3步
通過使用描邊為上一步創(chuàng)建的形狀建立2 px寬的輪廓（＃E58C3C），選擇并分組（Control-G）兩者，然后對(duì)整個(gè)圖標(biāo)執(zhí)行相同操作，完成當(dāng)前圖標(biāo)。
創(chuàng)建安全文件夾圖標(biāo)
第1步
創(chuàng)建10 x 12 px矩形做為鑰匙孔的下半部分，使用＃E58C3C進(jìn)行著色，然后將中心對(duì)齊到較大的底層文件夾，放到距離其底邊11 px的位置。
第2步
通過使用直接選擇工具（A）單獨(dú)選擇其頂部錨點(diǎn)，然后使用方向箭頭鍵將它們推入內(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）添加鑰匙孔的上部來完成圖標(biāo)，我們將分組（Control-G）然后定位在在參考圖像中。完成后，將創(chuàng)建圖形進(jìn)行分組（Control-G）。
創(chuàng)建上傳文件夾圖標(biāo)
第1步
首先使用4 x 6 px矩形（＃E58C3C）創(chuàng)建箭頭的下部，給該矩形創(chuàng)建2 px寬的輪廓（＃E58C3C），對(duì)其進(jìn)行分組（Control-G），然后將中心對(duì)齊到底層文件夾，將它們定位在距離底邊10 px的位置。
第2步
使用18 x 12 px的矩形創(chuàng)建箭頭的主要形狀，并使用＃E58C3C進(jìn)行著色，然后將中心對(duì)齊到之前的形狀并定位到參考圖像中看到的上邊緣。
第3步
將我們剛剛創(chuàng)建的矩形轉(zhuǎn)換為三角形來完成圖標(biāo)，方法是使用添加錨點(diǎn)工具（+）將新錨點(diǎn)添加到其上邊緣的中心，然后使用刪除錨點(diǎn)工具（ - ）。使用描邊為剛剛創(chuàng)建的形狀提供2 px寬的輪廓（＃E58C3C），選擇并將兩者組合在一起（Control-G），然后對(duì)整個(gè)圖標(biāo)執(zhí)行相同操作。
創(chuàng)建下載文件夾圖標(biāo)
步驟1
首先創(chuàng)建向上箭頭的副本（Control-C），然后我們將其（Control-F）粘貼到當(dāng)前的畫板上。
第2步
使用“?反射”工具（右鍵單擊>“變換”>“反射”>“水平”）水平翻轉(zhuǎn)箭頭來完成當(dāng)前圖標(biāo)，使用Control-G鍵盤快捷鍵選擇并分組其所有合成形狀。
創(chuàng)建添加新文件夾圖標(biāo)
步驟1
創(chuàng)建4 x 18 px矩形（＃E58C3C）創(chuàng)建加號(hào)的垂直部分，創(chuàng)建2 px寬輪廓（＃E58C3C），選擇分組（Control-G）然后定位到中心底層文件夾。
第2步
創(chuàng)建2 px輪廓（＃E58C3C）的18 x 4 px矩形（＃E58C3C）添加水平部分，使用描邊，選擇圖形進(jìn)行分組（Control-G），然后將兩者定位到中心。
創(chuàng)建刪除當(dāng)前文件夾圖標(biāo)
步驟1
首先創(chuàng)建加號(hào)的副本（Control-C），然后我們使用（Control-F）粘貼到當(dāng)前的畫板上。
第2步
首先取消組合當(dāng)前的組成部分（右鍵單擊>取消組合），然后使用Delete鍵選擇并刪除其垂直部分來完成圖標(biāo)。完成后，不要忘記選擇并分組（Control-G）當(dāng)前圖標(biāo)形狀，然后再轉(zhuǎn)到下一個(gè)圖標(biāo)。
創(chuàng)建缺少的文件夾圖標(biāo)
步驟1
首先創(chuàng)建添加新文件夾圖標(biāo)的加號(hào)的副本（Control-C），我們將其粘貼（Control-F）到當(dāng)前的畫板上。
第2步
將加號(hào)轉(zhuǎn)換為x，選擇加號(hào)圖形變換角度（右鍵單擊>變換>旋轉(zhuǎn)>45o）。
第3步
完成圖標(biāo)，將旋轉(zhuǎn)后的形狀的錨點(diǎn)復(fù)位到原位，然后將它們向外延伸1 px。然后選擇并分組（Control-G）所有組成形狀。
創(chuàng)建搜索當(dāng)前文件夾圖標(biāo)
步驟1
創(chuàng)建14×14像素寬4 PX的圓（＃E58C3C）作為放大鏡的上半部分，移動(dòng)到距離文件夾圖層左邊18px底層12px的位置。
第2步
創(chuàng)建4 px寬4 px長的直線（＃E58C3C）繪制手柄，如參考圖像中所示。完成后，選擇并將兩者組合在一起（Control-G）。
完成
總結(jié)
圖標(biāo)設(shè)計(jì)是UI設(shè)計(jì)中非常重要的一環(huán)，因?yàn)槌宋淖趾蛨D片的排版之外，在扁平時(shí)代我們能夠傳遞給用戶情緒和設(shè)計(jì)感的通道就是頁面中的各種圖形和圖標(biāo)了，如果做不好圖標(biāo)，用戶就將在使用界面時(shí)失去樂趣。所以，我建議每位UI設(shè)計(jì)師都需要在平時(shí)做大量的圖標(biāo)練習(xí)。
