在Adobe XD中如何制作凹陷 凸起 内阴影效果

如果在 Photoshop 中凹陷、凸起、内阴影等效果非常容易,使用图层样式就可以,但是在 Adobe XD 中没有对图层样式的支持的功能,本文尝试通过多个形状的组合支持凹陷、凸起、内阴影等效果。

内阴影

在 Adobe XD 中只有阴影的选项,添加的阴影会只存在于外部,但是我们可以怎样做:

  1. 新建一个比需要做内阴影范围更大的形状;

  2. 使用布尔运算减去内阴影的范围;

  3. 添加阴影将 X 偏移量和 Y 偏移量均设置为0,此时阴影在内外都存在,当然也可以根据需要设置其它的值;

    image.png

  4. 最后使用一个跟需要做内阴影范围相同的形状做剪切蒙版即可得到内阴影的效果。

image.png


凸起

凸起需要高光、内阴影、外阴影,可以使用多个图层叠加完成,这里使用最简单的方法,两个图层叠加,上方的图层为本体,复制一个本体移动图层顺序到下方设置颜色为白色(亮色),稍微移动位置呈现高光的效果,并单独给两个图层添加相反方向的白色(亮色)和黑色(暗色)阴影。image.png


凹陷

凹陷好像在前面凸起的效果上做一个剪贴蒙版就可以了。

image.png