iOS7时期，毛玻璃效果在UI届风靡过一段时间，当初的毛玻璃效果是被应用在界面设计中，更多是作为一种蒙层的效果出现。

当下毛玻璃的盛行，是因为有人创造性的将其应用在icon设计中。时尚嗅觉灵敏的UI设计师已经将该种风格加以应用，喜马拉雅金刚区icon就是一例。

这一期的主要内容就是看看毛玻璃效果在技术操作上怎么实现以及应该注意哪些问题，毛玻璃适合哪些产品使用

所谓毛玻璃效果就是看起来像被毛玻璃挡住，有玻璃质感的这样一种视觉表达效果。

动手前先动脑，打个腹稿，看看可能遇到哪些疑难杂症。主体部分就是一个简单的渐变色处理，横向矩形只是一个白色描边以及内阴影，难点在于模糊部分的处理，模糊的造型是两个矩形的重合部分，颜色要与周边连贯，仅仅是前面有毛玻璃挡住了，并无其他影响。前期工作完成了，可以打开那个黄色的钻石软件了

2、上色。主体部分 1 采用渐变色，模糊部分渐变后模糊处理，毛玻璃部分需要多层，第一层用来显示白色描边，第二层用来隔离底部图形，模糊部分处于这两层中间。

3、查缺补漏。打眼一看已经可以完工了，可以仔细看，会发现，白色的玻璃看起来与背景对比度太低，看不清边界，原图是加了一个微投影来界定边界的。

顺着这个思路我又做了其他两个

在制作过程中有几个注意的点，一个是模糊部分的颜色处理（也就是两个造型重合交集的部分），因为是前后关系，前面玻璃挡住后面物体，所以挡住部分的渐变一定要注意与后面一致，这里容易犯的错误是用SK直接调用渐变色，颜色的起点与终点也就是造型的起点与终点，这是不对的，正确的是渐变的起点位置与终点位置需要手动拉伸到主体渐变的起点和终点。

还有一点需要注意的是白色描边层根据视觉效果需要添加白色内阴影。

方法学到之后，还需要摸索该种风格适合哪种场景，哪类产品，适合的才是最好的。s上面采用该风格的icon都至少包含两个图层，因为只有至少两层才会出现遮挡这个概念，才会有毛玻璃的出场；其次对于造型越具象，可选用的色彩越局限，反之亦然，这种设计风格对于色彩的要求也相对较高，不像线描或者单纯面性icon，随便一个颜色至少能到及格线，毛玻璃风格icon色彩搭配不好可能会是负分。这些都是在绘制尝试过程中的一些发现，后续有机会可以针对这部分再梳理。

好了，以上就是这期分享了。

Powered by Froala Editor