不知道网·友们有没□□□□有发现，现在很多◤科技类，或者医药□□类的网站、小程序、App，都出现了□□□很多精美□□的图标。这种图标□□□□表面都有◤一层像玻□□璃一样透□□□明模糊的•效果，看上去十◥分高级舒□□□服，相对于传□□统的图标，绝对高级□□□了一个层□□□次。最早是出□□现在MacOS和iOS，现在微软Windows下的各种□□□□网页也广□□泛应用开□□□来。那么什么□□是毛玻璃○效果呢？毛玻璃效◎果的图标□□如何去制◣作呢？下面小编▼带你去揭□□开这个神□□□秘的面纱！

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

毛玻璃，学名“类玻璃柔□□□□光材质”，在设计中□□□也叫“玻璃拟态”。在生活中□□□叫磨砂玻▲璃，俗称“毛玻璃”。毛玻璃的□□□□特点是层•次分明效□□□□果模糊通□□透，通过设计□□一层图标，一层磨砂□□□□的半透明□□□□图层的组▼合，来呈现图□□□□标的整体□□□状态；鲜艳的背□□□景底色，使用鲜艳□□色彩作为△强调色并□□□且从半透□□明层中透□□□出，更突出了□□□模糊的透◢明效果；。通过毛玻□□□□璃层可以□□□看到底层□□□丰富多彩◎的设计元□□□□素，再结合毛□□□玻璃状态，会让人产□□□□生一种若★隐若现的❖朦胧美，让浏览者□□□□感受的设□□计的细腻□□□感。

有一段很□□长的时间□□□流行的设□□计风格是□□□□扁平化风◢格，由于各大□□网站或者◢是各种终□□□端的网页□□□或者APP都是这种□□风格，让人产生□□□了视觉疲□□□□劳。苹果在2013年发布的IOS7系统和2014年发布的OS X 10.10Yosemite系统中开◥始出现这□□□些毛玻璃※图标。这些风格◆的图标出□□□□现，突然让人❖眼前一亮，大家都觉□□□□得这种风★格新颖高□□级。一时间，设计师们◈争相模仿□□去设计，后面毛玻□□□□璃效果不▽断的完善。
 

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

本文主要□□□用Photoshop绘制，但只要学□□□会它的结□□□□构原理，你就可以◎在Photoshop, Sketch, Figma和AI上绘制出丨来。毛玻璃图□□□标结构原◎理，它分别是□□由：主元素、模糊效果、玻璃投影、磨砂玻璃□□□组成。教程简单□□□易易懂，特别适合□□□□设计思维▲的成熟设□□□□计师，话不多说，直接开始□□□□上设计教□□□程！

操作步骤：

第1步：先打开Photoshop,先画好你□□□□想要扁平□□□□化icon图标，然后添加□□□□一个形状□□□□图层，给底层加△一个合适□□□□的颜色，渐变或者◇纯色都可□□以。我这边使□□□用的渐变□□黄色。

第2步：在表层画一个圆形的形状放在顶层的位置，调整好颜色位置
 

第3步：然后对上□□层形状执✦行滤镜-模糊-高斯模糊，半径像素□□我选择的☆是10，你也可以□□□根据自己□□□的情况调□□□□整。
 

第4步：执行完高※斯模糊，然后把复□□□制底层图□□□□层剪切蒙◇版到顶层，这样大致□□的效果就□□□出来了，如下图所□□□示

第5步：效果大致□□□完成以后▽就可以在□□□□图标上绘□□制你需要□□的效果，也可以根◈据自己的□□□需求调整□□□图标的透✦明度为了□□要求更完□□美的图标□□□□质感，你可以通□□□□过描边、阴影、发光、投影等效□□果根据自□□□□己需求来▲调整，最终完成□□□效果如下

总结：
毛玻璃效□□□□果可以应□□□□用于设计※中的特定◉用户界面□□□元素。我们都知▼道，如果一个□□网页界面□□平淡无奇，人们是没□□□有点击欲□□□望的，而通过突□□出重点可•以使得层□□次结构更□□□合理，更受用户□□青睐。毛玻璃的□□□质感不仅□□□凸显层次□□感而且极□□□□具设计美◈感，取悦用户□□□身心。清晰的视♦觉层次，使用户简□□单快速地□□识别和读□□□□取需要的□□□□页面内容。