微软FluentDesignSystem-亚克力材质PS教程

近日微软提出了新的设计语言FlunetDesignSystem。其中很重要的一条就是【亚克力】材质的产生，让人机交互更贴近自然、更贴近现实。微软提供了【亚克力】的图层说明但是并未给出具体方法，介于很多网友的需求，我写下此教程，希望能普及一些【亚克力】材质的PS制作方法。

这是我按照fluent的设计语言，自己做的一个sample。

文末提供了sample的源文件，下载即可。

Microsoft 官方规定了三种亚克力材质的设计规范，分别为 60%亮色／暗色、70%亮色／暗色、80%亮色／暗色的亚克力材质。 在这里演示 60%亮色的亚克力材质的具体算法。

上图是官方的【亚克力】图层展示，原文中作者提供了详细的参数，我直接总结出来就是：

1、背景图

2、高斯模糊：30px

3、混合模式：白色 排除 10%

4、混合模式：白色 浅色 60% 

5、滤 镜：杂点 4% 平均分布

解释：1背景图不用说，2高斯模糊层是对背景的一块区域进行的高斯模糊，为了保证做出来的亚克力块能够移动切被编辑，所以必定要用到【剪切蒙版】。2一但出来后，345直接依次向下剪切蒙版即可。下面看具体步骤展示。

1、创建一个新画布，宽高800px*800px,其他默认；

2、导入一张自己喜欢的背景图片；

3、新建一个图层，用形状工具画出一个矩形，只做剪切蒙版用，所以颜色随机，然后复制背景图，置于矩形上方，向下做剪切蒙版。

4、依次完成  3混合模式：白色 排除 10%，4混合模式：白色 浅色 60% 图层的制作： 复制矩形2次，调整图层参数，按顺序放置，依次向下剪切蒙版。

5、最后一步，杂点 4% 平均分布。因为原文中对此图层没有具体的说明，导致我也没办法理解作者的微软的实际制作方法，再次分享一下，我认为效果最好的制作方法。

再次复制矩形置于最上方，赋予杂色效果，参数如下。

4%，平均分布，勾选单色（期间会出现转为智能对象的提示，同意就好）

添加完杂色效果后，设置杂色图层：正片叠底 80%，仍然向下做剪切蒙版。

至此亚克力  亮色 60% 的效果就制作完成，因为除了背景层，其他图层均为形状工具制作，所以可以任意缩放，及时编辑。

选中所有形状图层，建立链接关系，这样在实际操作中，会非常方便高效。

以前为原文中提到的【亮色60%】的亚克力制作方法，如果要制作暗色类型的效果，只需要调整第二个图层的混合模式即可。

把 浅色 60% 改成 深色 60% 即可实现 暗色60%效果。

教程到此结束，希望能多的朋友能接触到微软的新设计语言，也祝愿MFDS越来越好，站酷越来越好！