近日微軟提出了新的設計語言FlunetDesignSystem。其中很重要的一條就是【亞克力】材質(zhì)的產(chǎn)生，讓人機交互更貼近自然、更貼近現(xiàn)實。微軟提供了【亞克力】的圖層說明但是并未給出具體方法，介于很多網(wǎng)友的需求，我寫下此教程，希望能普及一些【亞克力】材質(zhì)的PS制作方法。

這是我按照fluent的設計語言，自己做的一個sample。

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

Microsoft 官方規(guī)定了三種亞克力材質(zhì)的設計規(guī)范，分別為 60%亮色／暗色、70%亮色／暗色、80%亮色／暗色的亞克力材質(zhì)。 在這里演示 60%亮色的亞克力材質(zhì)的具體算法。

上圖是官方的【亞克力】圖層展示，原文中作者提供了詳細的參數(shù)，我直接總結出來就是：

1、背景圖

2、高斯模糊：30px

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

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

5、濾 鏡：雜點 4% 平均分布

解釋：1背景圖不用說，2高斯模糊層是對背景的一塊區(qū)域進行的高斯模糊，為了保證做出來的亞克力塊能夠移動切被編輯，所以必定要用到【剪切蒙版】。2一但出來后，345直接依次向下剪切蒙版即可。下面看具體步驟展示。

1、創(chuàng)建一個新畫布，寬高800px*800px,其他默認；

2、導入一張自己喜歡的背景圖片；

3、新建一個圖層，用形狀工具畫出一個矩形，只做剪切蒙版用，所以顏色隨機，然后復制背景圖，置于矩形上方，向下做剪切蒙版。

4、依次完成  3混合模式：白色 排除 10%，4混合模式：白色 淺色 60% 圖層的制作： 復制矩形2次，調(diào)整圖層參數(shù)，按順序放置，依次向下剪切蒙版。

5、最后一步，雜點 4% 平均分布。因為原文中對此圖層沒有具體的說明，導致我也沒辦法理解作者的微軟的實際制作方法，再次分享一下，我認為效果最好的制作方法。

再次復制矩形置于最上方，賦予雜色效果，參數(shù)如下。

4%，平均分布，勾選單色（期間會出現(xiàn)轉(zhuǎn)為智能對象的提示，同意就好）

添加完雜色效果后，設置雜色圖層：正片疊底 80%，仍然向下做剪切蒙版。

至此亞克力  亮色 60% 的效果就制作完成，因為除了背景層，其他圖層均為形狀工具制作，所以可以任意縮放，及時編輯。

選中所有形狀圖層，建立鏈接關系，這樣在實際操作中，會非常方便高效。

以前為原文中提到的【亮色60%】的亞克力制作方法，如果要制作暗色類型的效果，只需要調(diào)整第二個圖層的混合模式即可。

把 淺色 60% 改成 深色 60% 即可實現(xiàn) 暗色60%效果。

教程到此結束，希望能多的朋友能接觸到微軟的新設計語言，也祝愿MFDS越來越好，站酷越來越好！