恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
微软FluentDesignSystem-亚克力材质PS教程
0.0°
2017-06-08 原创文章 教程 举报 7926 33 30 3

http://www.ui.cn/detail/184864.html 针对此文章中的材质(亚克力)的讲解,PS中的做法教程。

首先感谢 @David_Wang 在前段时间的文章 【全面解读】Microsoft 流畅设计体系 ,为更多的设计师普及了微软新的设计语言,针对文中提到的【亚克力】材质的制作方法,官方只给出了图层的讲解,并未对具体方法做展示。介于很多网友的需求,我写下此教程,希望能普及一些【亚克力】材质的PS制作方法。

MicrosoftFluentDesignSystem

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

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


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

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


1、背景图

2、高斯模糊:30px

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

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

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


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


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

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

Image title

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

Image title

4、依次完成  3混合模式:白色 排除 10%,4混合模式:白色 浅色 60% 图层的制作:

     复制矩形2次,调整图层参数,按顺序放置,依次向下剪切蒙版。

Image title

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

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

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

Image title


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

Image title

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

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

Image title

以前为原文中提到的【亮色60%】的亚克力制作方法,如果要制作暗色类型的效果,只需要把第二个图层填充色白色变为黑色,混合模式改成深色即可。


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



附件地址:http://pan.baidu.com/s/1slvyl69

更新:2017-06-08

收藏

33人已收藏

h0ngzhe

上海设计爱好者

  • 1

    作品

  • 8

    粉丝

  • 11

    关注

    猜你喜欢

      2017-06-08 原创文章 教程 举报 7926 33 30 3

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

      0.0°

      你确定要举报微软FluentDesignSystem-亚克力材质PS教程

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年05月31日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      30
      33
      3

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录