随着互聯網技術的發展，人們對産品用戶體驗設計的要求越來越高。無論是App界面設計，還是Web界面設計，單靠文字已經無法明确傳達信息，而通過圖标等元素，可以更高效地向用戶傳遞交互體驗信息，達到提升用戶體驗的目的。

繪制“鐘表盤”圖标

“鐘表盤”圖标的繪制流程和完成效果如圖所示。

01

新建一個916px×710px的畫布，填充為淺藍色（R:227，G:233，B:235）至深藍色（R:160，G:181，B:194）的線性漸變效果，如圖所示。

選擇“圓角矩形”工具，在畫布中繪制一個512px×512px的圓角矩形，設置圓角“半徑”為90px，然後填充為淺藍色（R:248，G:250，B:251）至稍微深一些的淺藍色（R:238，G:240，B:245）的線性漸變效果，使用“左右居中對齊”工具和“垂直居中對齊”工具将其進行對齊，如圖所示。

02

複制一個圓角矩形放在上方，設置“内陰影”為淺藍色（R:110，G:144，B:166），“不透明度”為48%，“Y”為-11，“模糊”為18，如圖所示。

03

再次複制一個圓角矩形放在上方，然後設置“内陰影”為白色（R:255，G:255，B:255），“Y”為5，“模糊”為18，如圖所示。

04

觀察圖形，由于前面繪制的陰影和高光在背景的對比下看起來不夠明顯，因此為圖形再添加一些投影。再次複制一個圓角矩形，将該圓角矩形放在底圖和繪制的第1個圓角矩形中間，然後将圓角矩形填充為深藍色（R:94，G:135，B:167），并且在“高斯模糊”一欄中設置“半徑”為10px。将該圓角矩形移至右下方位置，作為陰影，如圖所示。

05

觀察陰影的效果，看起來有點兒模糊。為了使其更立體，将第1個圓角矩形複制一個，然後設置“内陰影”為白色（R:255，G:255，B:255），“Y”為1，“模糊”為17，如圖所示。

06

使用“橢圓形”工具在畫布中繪制一個直徑為416px的圓形，填充為淺藍色（R:140，G:172，B:210）至深藍色（R:115，G:150，B:197）的漸變效果。設置“内陰影”為藍色（R:103，G:139，B:189），“X”為2，“Y”為2，“模糊”為15，“擴展”為2，如圖所示。

07

将上一步繪制的圓形複制一個，然後設置“内陰影”為白色（R:255，G:255，B:255），“X”為-2，“Y”為-2，“模糊”為2，如圖所示。

08

使用“鋼筆”工具在畫布中繪制一條線段，然後設置描邊“位置”為居中，“粗細”為8px。選中線段，單擊“描邊”選項欄中的“設置”按鈕，設置“端點”和“轉折點”為圓滑效果。設置“内陰影”為淺藍色（R:135，G:168，B:206），“X”為1，“Y”為1，“模糊”為2，如圖所示。

09

再次選中繪制好的線段，單擊“旋轉複制”按鈕，在彈出的對話框中設置“副本數量”為7，然後單擊“好”按鈕，如圖所示。

從中心處開始，拖動顯示的錨點并調整位置，得到的表盤效果如圖所示。

10

使用“橢圓形”工具在畫布中繪制一個直徑為50px的圓形，然後填充為白色（R:238，G:246，B:255），設置“陰影”為淺藍色（R:82，G:125，B:182），“内陰影”為白色（R:255，G:255，B:255），“X”為-1，“Y”為4，“模糊”為6，“擴展”為4，如圖所示。

11

使用“鋼筆”工具在畫布中繪制一條線段，描邊“位置”為居中，“粗細”為8px，然後選中線段，單擊“描邊”選項欄中的“設置”按鈕，設置“端點”和“轉折點”為圓滑效果，如圖所示。

使用“旋轉”工具将該線段旋轉到合适位置，然後選中該線段，使用“輪廓”工具将其變成矢量圖形并填充為橘黃色（R:240，G:191，B:133），如圖所示。

12

使用“橢圓形”工具在畫布中繪制一個直徑為30px的圓形，然後填充為橘黃色（R:240，G:191，B:133）。選中這個圓形和上一步繪制好的秒針，按快捷鍵Command G打組。選擇該組，設置組的“陰影”為深藍色（R:107，G:142，B:191），“X”為4，“Y”為5，“模糊”為4，如圖所示。

13

按照繪制秒針的方法，将時針和分針一起繪制出來，得到的圖标效果如圖所示。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!