ps阴影:用PS精准的实现MaterialDesign的阴影效果

404 坐标: 132093 目录:婚姻家庭
我们找到第

以下是的一些我们精选的ps阴影:用PS精准的实现MaterialDesign的阴影效果

在谷歌的 Material Design 规范中一个重要的特征就是阴影高度,阴影的由来:" 材料总是 1dp 厚,材料会形成阴影,阴影是由于材料元件之间的相对高度(Z 轴位置)而自然产生的 "

一个包含卡片和 FAB 应用布局的实例与它在 Z 轴上元素高度的横截面图表。在这里抽屉栏在 Z 轴的高度是最高的有 16dp 高,第二高是黄色的悬浮按钮 6dp 高,菜单栏只有 4dp 高。

阴影

在设计的时候,每一个元素都能在规范里找到相应的高度,那么这个高度的阴影是如何实现的呢?下面会详细讲到。

阴影有两部分组成:顶端表达深度的阴影和底端表达边界的阴影

首先我们看看上面的 2 张图,第一张图是 5 种阴影高度,第二张图是 5 种阴影高度在 Ai 这款软件中的阴影参数。

图中给了顶端(Top shadow)阴影的参数,和底端(Bottom Shadow)阴影的参数。

我们在 PS 实现以下这 2 种阴影效果,以 APP 菜单(app bar)为例:

第一步:新建一个 720X1280px 画布。状态栏 48px 菜单栏 112px(因为在 720p 里 1dp=2px)

第二步:在 Material Design 里菜单栏的阴影高度是 4dp,我们在上面的图片中找到 z-depth = 2 的参数。

翻译 z-depth=2 的参数:

顶端阴影不透明度为 16%

向 x 轴移动 0dp

向 y 轴一定 3dp

模糊为 3dp

低端阴影不透明度为 23%

把菜单栏图层复制 2 层,颜色填充黑色,分别命名为:顶端阴影和低端阴影(图层的顺序如下图)

第三步:按照上面给的参数设置 2 个阴影图层的参数,

先做顶端阴影

1 把顶端阴影图层向下移动 6px

2 再高斯模糊 6px ( 高斯模糊效果最接近,不信你试试! )

3 再调整不透明度到 16%

(得到效果如下图)

再做底端阴影

2 再高斯模糊 6px

3 再调整不透明度到 23%

(最终效果如下图)

再用这种方法把卡片和悬浮按钮加上去

卡片用的是 z-depth=1 悬浮按钮用的是 z-depth=4

有别的方法可以交流交流哦

最新ps阴影:用PS精准的实现MaterialDesign的阴影效果可以看看这篇名叫假戏真做电影:苹果真的进去了吗浴室假戏真做图片 感觉和佟大为的文章,可能你会获得更多ps阴影:用PS精准的实现MaterialDesign的阴影效果

专题栏目
最新