最終效果：

下面是教程：

步驟一：首先新建畫布* 00px** 00px畫布，命名為質(zhì)感圖標(biāo)，為背景添加圖層樣式。

步驟二：使用圓角矩形工具、繪制一個* * 0px** * 0px圓角半徑為90px底座，并為它添加圖層樣式。

步驟三：高逼格的底座一下就出來了，有木有!!!接下來繼續(xù)使用圓角矩形工具、繪制一個* 90px** 90px圓角半徑為90px的形狀，命名為底座-2，并為它添加圖層樣式。

步驟四：為底座-2添加金屬拉絲效果，新建圖層填充#9f9f9f，添加雜色執(zhí)行動感模糊命令，并創(chuàng)建剪貼蒙版，調(diào)整不透明度。

步驟五：復(fù)制金屬拉絲，ctrl+t旋轉(zhuǎn)90度，并依次創(chuàng)建剪貼蒙版。

步驟六：現(xiàn)在我們繪制內(nèi)框位置，繪制兩個圓角矩形，大小分別為* * 0px,* 90px圓角半徑為90px,合并形狀選擇路徑選擇工具，選中內(nèi)框減去頂層形狀，并添加圖層樣式。

步驟七：我們?yōu)閮?nèi)框添加金屬拉絲效果吧，復(fù)制內(nèi)框圖層清除圖層樣式。獲取選區(qū)其它操作方式如上，并調(diào)整不透明度。

步驟八：現(xiàn)在繼續(xù)繪制一個頂部漸變，選擇圓角矩形工具繪制一個* 90px圓角半徑為90px的形狀，繪制完成后復(fù)制，命名為頂部漸變。

步驟九：將頂部漸變復(fù)制向下移動1* px,并合并兩個形狀，選擇路徑選擇工具，選中內(nèi)框減去頂層形狀，將底座漸變疊加圖層樣式復(fù)制，移動色標(biāo)位置即可，并添加投影圖層樣式。

步驟十：現(xiàn)在我們來繪制最后一個圖標(biāo)吧，用自定義形狀工具繪制一個172px的形狀，并旋轉(zhuǎn)* * 度，最后添加圖層樣式就完成這個案例了哦。

來源：站酷 作者：全棧UI筆記