UI設計新手入門只需10分鐘教你繪製出5個手機圖標

知識 08-13

第一個圖標：

讓我們用之前用過的相同綠色的底子形成簡訊圖標。製作一個 40 x 40 px的白色圓，然後延伸一點邊，使形狀壓扁到 48 x 40 px。

在白色形狀的底部加一個小小的三角形，形成一個言語泡泡。使三角形下面的角稍微變圓一點。利用-36%垂直彎曲值的弧彎曲效果，使三角形稍微變為弧形。

這裡顯示了完整圖標的樣子。

第二個圖標：

我們接下來的圖標是遠程應用圖標，這也是一個包含單個元素的非常簡單的圖標。

首先，形成一個漸變的底子（從深藍色#2066f0的底部到淺藍色#1dd4fd的頂部）。添加5.3pt寬的白色描邊，然後從內部對齊。在我們的圖標的中心放置一個30 x 30 px白色三角形。

最後，使三角形的角有2.5角半徑。太好了！這個圖標已經到位，所以讓我們轉到下一個。

6. 創建外出，設置和照片App圖標

第三個圖標：

外出圖標描繪了一個風格化的跑步者的身影。

用頂部黃綠色（#c2ec38）和底部綠色（#a3fc3f）的線性漸變來填充，創建一個明亮的底子。

用鋼筆工具（P）創建分離的線作為彎曲胳膊，腿，和軀幹，添加3 pt 描邊寬度以及圓形的端點和邊角。

增加軀幹的描邊寬度的厚度到6 pt，然後添加一個9 x 9 px圓形作為頭部。

對象>擴展線條，然後用黑色填充這個形狀。

第四個圖標：

設置的圖標包含一個齒輪。繪製一個48 x 48 px的圓，切掉中間部分形，製成了一個環。

添加3個有3 pt 描邊寬度線條，在圖標模版的中心相互連接。

現在我們需要添加波紋到我們的齒軌。

製作一個 5 x 9 px的矩形，然後使上端稍微窄一點。使上面的角有1.6px角半徑的圓潤。放這個波紋在齒軌的頂部和底部。

用旋轉工具（R）選中全部波紋，雙擊旋轉工具（R）調用彈出選項窗口，然後設置旋轉值為360/18。這種方式， Adobe Illustrator將會自動計算出18個形狀的合適值。按下拷貝按鈕。

按下Control-D多次重複我們上一個動作，添加更多波紋。為了完成這個圖標，選擇所有波紋，轉換顏色為白色，然後將所有的波紋一起旋轉-10度。

第五個圖標：

我們接下來的圖標是一個風格化的照片App。首先創建一個20 x30 px且具有10 px角半徑的圓角矩形，這樣可以作為花瓣。

複製花瓣，然後放其拷貝在圖標模版的底部，如下面截圖所示。

選擇全部花瓣用旋轉工具（R）製作8份花瓣拷貝，應用 360/8角值，然後按下拷貝按鈕。

按下 Control-D數次形成八瓣花。轉換花瓣為正片疊底混合模式且降低透明度到80%。讓我們應用喜愛的顏色到每片花瓣，從中間最上的開始順時針移動：橙色（#fa9700），黃色（#f0e22c），綠色（#b5d558），綠松石色（#6ec19d），藍色（#71b5e1），紫羅蘭色（#8f60c3），粉色（#d782a4）和紅色（#ff2c2c）。

將花放在白色的圖標底板上。