不知道網(wǎng)友們有沒有發(fā)現(xiàn)，現(xiàn)在很多科技類，或者醫(yī)藥類的網(wǎng)站、小程序、App，都出現(xiàn)了很多精美的圖標。這種圖標表面都有一層像玻璃一樣透明模糊的效果，看上去十分高級舒服，相對于傳統(tǒng)的圖標，絕對高級了一個層次。最早是出現(xiàn)在MacOS和iOS，現(xiàn)在微軟Windows下的各種網(wǎng)頁也廣泛應(yīng)用開來。那么什么是毛玻璃效果呢？毛玻璃效果的圖標如何去制作呢？下面小編帶你去揭開這個神秘的面紗！

什么是“毛玻璃”效果呢？

毛玻璃，學(xué)名“類玻璃柔光材質(zhì)”，在設(shè)計中也叫“玻璃擬態(tài)”。在生活中叫磨砂玻璃，俗稱“毛玻璃”。毛玻璃的特點是層次分明效果模糊通透，通過設(shè)計一層圖標，一層磨砂的半透明圖層的組合，來呈現(xiàn)圖標的整體狀態(tài)；鮮艷的背景底色，使用鮮艷色彩作為強調(diào)色并且從半透明層中透出，更突出了模糊的透明效果；。通過毛玻璃層可以看到底層豐富多彩的設(shè)計元素，再結(jié)合毛玻璃狀態(tài)，會讓人產(chǎn)生一種若隱若現(xiàn)的朦朧美，讓瀏覽者感受的設(shè)計的細膩感。

有一段很長的時間流行的設(shè)計風(fēng)格是扁平化風(fēng)格，由于各大網(wǎng)站或者是各種終端的網(wǎng)頁或者APP都是這種風(fēng)格，讓人產(chǎn)生了視覺疲勞。蘋果在2013年發(fā)布的IOS7系統(tǒng)和2014年發(fā)布的OS X 10.10Yosemite系統(tǒng)中開始出現(xiàn)這些毛玻璃圖標。這些風(fēng)格的圖標出現(xiàn)，突然讓人眼前一亮，大家都覺得這種風(fēng)格新穎高級。一時間，設(shè)計師們爭相模仿去設(shè)計，后面毛玻璃效果不斷的完善。
 

如何制作“毛玻璃”效果？

本文主要用Photoshop繪制，但只要學(xué)會它的結(jié)構(gòu)原理，你就可以在Photoshop, Sketch, Figma和AI上繪制出來。毛玻璃圖標結(jié)構(gòu)原理，它分別是由：主元素、模糊效果、玻璃投影、磨砂玻璃組成。教程簡單易易懂，特別適合設(shè)計思維的成熟設(shè)計師，話不多說，直接開始上設(shè)計教程！

操作步驟：

第1步：先打開Photoshop,先畫好你想要扁平化icon圖標，然后添加一個形狀圖層，給底層加一個合適的顏色，漸變或者純色都可以。我這邊使用的漸變黃色。

第2步：在表層畫一個圓形的形狀放在頂層的位置，調(diào)整好顏色位置
 

第3步：然后對上層形狀執(zhí)行濾鏡-模糊-高斯模糊，半徑像素我選擇的是10，你也可以根據(jù)自己的情況調(diào)整。
 

第4步：執(zhí)行完高斯模糊，然后把復(fù)制底層圖層剪切蒙版到頂層，這樣大致的效果就出來了，如下圖所示

第5步：效果大致完成以后就可以在圖標上繪制你需要的效果，也可以根據(jù)自己的需求調(diào)整圖標的透明度為了要求更完美的圖標質(zhì)感，你可以通過描邊、陰影、發(fā)光、投影等效果根據(jù)自己需求來調(diào)整，最終完成效果如下

總結(jié)：
毛玻璃效果可以應(yīng)用于設(shè)計中的特定用戶界面元素。我們都知道，如果一個網(wǎng)頁界面平淡無奇，人們是沒有點擊欲望的，而通過突出重點可以使得層次結(jié)構(gòu)更合理，更受用戶青睞。毛玻璃的質(zhì)感不僅凸顯層次感而且極具設(shè)計美感，取悅用戶身心。清晰的視覺層次，使用戶簡單快速地識別和讀取需要的頁面內(nèi)容。