关于Material Design 中Z轴高度所产生的阴影效果,怎样在PS中准确展示

PS CC 2015,添加两层阴影(以静置态的 FAB , mdpi 屏幕为例)关于Material Design 中Z轴高度所产生的阴影效果,怎样在PS中准确展示

关于Material Design 中Z轴高度所产生的阴影效果,怎样在PS中准确展示


■网友
你的问题我挨个回答哈
1-阴影效果能否在PS中还原?哪里找到这些参数?答:阴影效果在PS里可以还原「MaterialDesign」在2018年开放了一个只针对Sketch的插件叫「Material-Theming」,以及5个包含「Material」设计语言的源文件,里面可以直接调用包含「按钮」、「阴影」、「Tool-tips」等组件的文件以及设置属性,如我下图
举个例子,4DP的阴影由三个阴影叠加而成,他们的属性分别是:x0 y4 模糊5 扩展0 #000 14%、x0 y1 模糊10 #000 12%、x0 y2 模糊4 扩展-1 #000 20%。单位均是DP,这种阴影在PS里可以完美还原,在Sketch里可以通过插件直接修改和调用2-如何交付开发?答:「Material-Design」除了对设计有完善的设计语言和组件库提供,对开发同样,在我上面给的官网中的「Develop」同样有针对「iOS」、「Android」、「Web」端的方便开发调用的组件库,你在设计后和研发沟通,如果你大量使用「Material」设计语言和原生样式 (国内很少有这种很Material设计风格的应用),他们在引入这个库后直接调用就可以了。
另:这些阴影样式在软件导出的「Html」文件、蓝湖、语雀等平台可以被直接拷贝,例如我上面说的3层阴影。这是上面提到阴影的CSS样式,iOS和Android有所不同,但也能实现box-shadow: 0 16px 24px 2px rgba(0,0,0,0.06), 0 6px 30px 5px rgba(0,0,0,0.05), 0 8px 10px -5px rgba(0,0,0,0.08); 最后说一句,我司在18年做过一个国外的,只有Android端的应用,我完全使用Material-Design设计语言,和开发沟通使用这个库,开发完美还原还很大的减少了我们的团队的沟通和工作时间成本,在一些条件下真的非常好用
关于Material Design 中Z轴高度所产生的阴影效果,怎样在PS中准确展示

关于Material Design 中Z轴高度所产生的阴影效果,怎样在PS中准确展示

【关于Material Design 中Z轴高度所产生的阴影效果,怎样在PS中准确展示】


    推荐阅读