圖標的磨砂玻璃質感如何製作？

最近一套磨砂玻璃的圖標受到很多設計師的追捧，最早在一些設計平台出現，後來國內一些產品也都有應用，比如自如、騰訊視頻等。

在準備教程時特意繪製了幾個嚐試一下，先來看看一組四個圖標吧！

這種類似於特殊材質的運用也是最近很多設計趨勢所表露出來的，介於扁平和寫實之間的微質感，帶給用戶一種輕質感的體驗。

下麵黑馬哥挑選四個案例中的第一個來給大家實戰一下，讓你掌握這種磨砂玻璃的圖標繪製技巧。

先拆解再動手

在開始實戰前我們先來拆解一下製作文件，一枚小小的圖標也是多層打磨的結果。

為了帶來更強的質感和在白色背景的運用，在原本的基礎上添加了 1px 的描邊來強化質感。

第 01 步

首先繪製出本案例需要的圖形，這個就是基本的矩形工具配合圓角設置即可完成，無論是 PS、AI、Sketch 等均可繪製完成。（ 以下參數為 Sketch ）

第 02 步

繪製好需要的圖形之後，進行如圖組合。按照圖中將三個元素分為前層、中層、背景層三層，加號為前層采用白色（ 色值：#FFFFFF ）；中層色值：#FFF0F4；背景層采用的是左上角到右下角的斜角漸變，色值為：#FE7F9F 到 #FF4070 進行漸變。

第 03 步

然後我們將背景層的元素複製一個出來，進行高斯模糊，模糊半徑值定為 12px （這裏根據元素大小不同酌情考慮）。然後給一個 50% 左右的不透明度，這些具體數值大家可以根據最終的呈現效果微調，方法不是唯一的，要靈活運用。

第 04 步

選擇剛剛高斯模糊之後的背景層（複製出來單獨做的）與中層元素創建剪切蒙版即可得到下圖示意圖。

和背景元素組合之後得出下圖效果。

為了讓這種磨砂玻璃效果更加明顯，我們特意進行了錯位。將高斯模糊的元素向下和左位移了 6px 左右（這個值可以根據圖標大小自定義）。

第 05 步

最後為了強化質感對中層元素和背景層元素添加了 1px 的漸變描邊，頂層描邊色值由 #FFE0E8 到 #FECBD8 進行漸變，背景層描邊色值由 #FF5983 到 #FF265D 進行漸變。

第 06 步

最後添加加號元素完成本案例，加號的位置會適當靠上一點滿足視覺平衡。

接下來大家采用同樣的技巧和方法進行延展，即可繪製出更多磨砂玻璃效果的圖標作品。

（本文來源於微信公眾號@黑馬家族，作者：黑馬青年）