之前发过两个关于漫反射阴影的教程，从新手版到高级版，学生应该都学过。今天最后一个教程不仅会复习Photoshop的漫反射阴影的方法，还会添加HTML/CSS的制作方法，附上很多优秀的案例。学了漫影，海关就通关了。让我们跟上潮流吧！

目录

什么是弥散阴影？用Photoshop来设计的方法：使用矢量图形技术使用图层下拉阴影技术使用智能对象技术用Sketch来设计的方法用HTML/CSS来设计的方法HTML/CSS参考案例可供参考的创意UI设计

什么是漫影？

具体英文名还没定，不过这种手法一般叫漫影，比普通的阴影手法能表现出更深刻的感受。虽然是从平面设计衍生出来的技术，但也反映了当下的设计潮流。

Photoshop的设计方法

有了Photoshop，你可以很容易的在很多方面达到漫射阴影的效果。这次简单介绍一下如何使用矢量图、图层投影、智能对象来达到效果。

01.使用矢量图形技术

这次介绍的Photoshop中的方法，大概是最简单的方法，也是最容易编辑的。首先，让我们准备一下需要添加效果的图像。作为演示，我使用以下UI组件作为案例。

选择矩形工具创建一个与图像大小相同的矩形。在这里，我设置了750 x 1334 px。选择[矩形]工具，直接点击画布。你可以看到一个对话框弹出来让你设置大小。只需输入数值。

将绘制的形状层放在用户界面下，然后在两层之间按住选项[MAC]/Alt [Windows]键，然后单击。

复制刚刚制作的形状层，并将其命名为阴影。然后自由改变【快捷键CTRL T】，将宽度和高度调整到原来的80%，然后将底部居中对齐。

然后选择【移动工具】，选择刚刚变小的图层，向下移动20px。您可以选择该层，按住shift键，然后按下向下箭头两次，一次移动10px。

然后在[窗口]菜单中选择[属性]，让我们调整[模糊]的值。应用的值取决于您设计的图像的大小。在这种情况下，我们选择66px。

应用模糊后，我们将图层的不透明度设置为80%，我们就完成了。

然后我们选择这三层，右击它们组成一个组【CTRL G】。所以我们可以同时移动多层。

这里都做好了，因为应用了矢量图层，所以值可以随时更改。也可以自由定制属于自己的优秀设计。

02.使用图层的下拉[阴影]技术

像以前一样，让我们创建一个矢量图层，其大小与需要添加效果的图层相同。这样，我们在应用各种效果的时候，就不会影响到原图了。

然后我们复制了形状层，命名为“阴影”，然后自由改变宽度和高度，调整到原来的80%中心对齐，和之前一样。然后我们双击这个图层打开图层样式界面。选择[阴影]效果，并按如下方式设置参数。

然后将图层不透明度改为80%。

这就是成品效果。这种技术，无论是形状层还是图像层，都可以一一对应的应用。

03.使用智能对象技术

到目前为止，我们已经创建了一个矩形，并在不改变原始图片的情况下应用了效果。

首先，在图层面板上，选择矩形图层和图像图层，然后右键单击并选择[转换为智能对象]。这样就可以在不破坏原图像的情况下编辑原图像。

复制你创建的智能对象，然后把它放在下面，并命名层阴影。然后在图层样式中选择【颜色叠加】，选择不透明度为100%的【黑色#000000】。

然后自由改变【快捷键CTRL T】，将宽度和高度调整到原来的80%，然后将底部居中对齐。

然后选择【滤镜】→【模糊】→【高斯模糊】，填入数值。在这种情况下，我们将其设置为65px。

选择这两个同时创建的智能对象层，右键单击并选择转换为链接对象，这将防止您在移动一个层时忘记移动另一个层。

这是完成的渲染。我们可以达到和其他技术一样的深度。

在选项设置中，如果隐藏[颜色覆盖]效果，也可以创建反映图像色调的阴影效果。

看起来有点难以理解，但从阴影中可以看到图像下部的黄色。

以下是这三种效果产生的三张图片并列的效果。无论用哪种技术，都可以很好的表现出漫影。

用素描进行设计的方法

接下来我们介绍一下用sketch这种和Photoshop一样普及的设计工具制作漫反射阴影效果的方法。

有两点需要注意:

一方面，应用阴影效果时要注意按住Option/Alt键。另一方面，你可以给阴影添加一点颜色。

用超文本标记语言设计方法

利用CSS的盒影属性，可以实现有深度的阴影效果。

1 .盒影:[水平移动(px)][垂直移动(px)][模糊半径(px)][扩展][颜色(#)]；

水平和垂直移动是为了显示光线的方向，从而确定阴影的位置。比如下面这个案例，他同时使用了多个盒影，让阴影效果更加逼真细腻。

但是，如果您想在框阴影上使用悬停效果，它不会影响页面的加载。

源代码:http://codepen.io/vipcrew/pen/AXoPNA

以下是各个浏览器的支持。我们可以看到，从IE11开始，每个浏览器都开始支持它，所以这项技术在未来会越来越多的被应用。

源代码:http://caniuse.com/#feat=css-boxshadow

HTML/CSS参考案例

向每个用户界面组件添加阴影可以使图像更加完整。

源代码:http://codepen.io/caphil/pen/NxMdRo

苹果电视上专门设计的海报设计效果也可以根据鼠标的反应来移动。

源代码:http://codepen.io/mariusbalaj/pen/MaKRar

应用了渐变效果的漂亮按钮，当鼠标在上面移动时，根据悬停效果使用阴影。

源代码:http://codepen.io/Mohsen-Khakbiz/pen/RaqaOG

这也是一个简单的应用框阴影的效果。

源代码:http://codepen.io/mefynn/pen/XdyyKw

采用的材质设计再现了六种阴影效果，可以记录为速写。

源代码:http://codepen.io/sdthornton/pen/wBZdXq

可供参考的创意界面设计

这是创意UI阴影效果的设计，可以为我们在设计社区网站上的启发提供参考。很多都能给我们留下深刻的印象，所以在以后的设计中使用吧~

然后，大家一起享受设计吧~两周后见~