设计iOS高阶UI相关UI/交互设计规范

光的视觉艺术2——阴影

2016-09-10  本文已影响452人  陈好元

让我们开始本系列的第二篇——阴影

阴影赋予画面真实感


首先我们来看一下阴影的两种分类:轮廓阴影投射阴影

轮廓阴影是物体表面上光线无法达到的背光处,即明暗交界线暗的那部分。

投射阴影即是我们一般理解的影子。

观察上图,我们很容易发现,轮廓阴影明显比投射阴影要来的浅,这是因为地面可以大面积的反射光线影响球体,而球体相对地面面积要小很多,反射光线也少,对地面的投射阴影的影响很小,所以轮廓阴影要比投射阴影浅的多。当然,这是在自然光环境下,室内灯光复杂,可能会出现相反的情况。

↓让我们看一下两种阴影在视觉设计中的应用

脸部右侧的浅蓝色轮廓阴影(来自dribbble) 扁平化的作品通过轮廓阴影和投射阴影来提升质感(来自dribbble)

↓轮廓阴影能有效地赋予作品质感和纵深感

通过轮廓阴影使脸部轮廓清晰,质感更强

接下来我们谈谈环境光遮蔽这个东西

在3D里这叫AO,是增加真实感的一种方法。

其实很好理解,就是在两个物体相近或相交区域添加阴影

每个颗粒之间的阴影就是环境光遮蔽效果

区别于轮廓阴影,环境光遮蔽是两个对象物体靠的太近,而使得进入两者间隙的散射光线变少而造成的。

___________

谈到环境光遮蔽,就不得不说边界投影

看下图,这是我之前做的一张图,注意看木板与平面的间隙,我想你能很明显的发现两者阴影的区别,

右图为边界投影的应用

边界投影是对象物体与平面间隙内的阴影,是画面中最暗的部分。

跟环境光遮蔽很相似,很容易傻傻分不清楚。


阴影嘛,有光才会有阴影呀,所以接下来我们看下光源对阴影的影响。

决定阴影外观的最重要因素是光源的大小和距离。

面积小或距离远的光源造成边缘清晰的阴影。因为这种光源的光线几乎不相交,趋于平行。

而面积大或近的造成边缘柔和的阴影,这种光源的光线相交,互相影响。

↓下面看看不同光源情况下的阴影

平行光线,如太阳光 近距离的大光源 复杂的光源,一般试试人造光情况下

___________

下面讲个特殊的——透明或半透明物体的阴影

透明物体的阴影会带有物体的颜色,因为光线进入透明半透明物体,在内部散射,又向不同方向射出,影响阴影颜色。这也叫做次表面散射。

橙色阴影

讲到带色彩的阴影,有必要提一嘴现在比较常见的一种阴影的表现方式——“弥散形阴影”。

它的做法是把原图片进行模糊处理后置于原图下一层,制造带有原图色彩属性的“阴影”。

我不知道“弥散形阴影”这个名词是从何而来的,突然大家都这么叫它。我觉得这个叫法是不妥当的,这种手法其实是将图片当做了一个发光体来运用,称作阴影是不合理。虽然这种手法和透明物体的投影形式很相似,但很明显图片并不是一个透明的介质。如果我理解有误,还望指出。

以前做的一张图,看她绿色的“弥散形阴影”

在找图例的时候看到这么一张图,感觉作者对阴影的处理很有意思,第一次看到这种方式。在千篇一律的阴影使用中,这张图显得非常特别。

___________

我们很容易把光线当做理所当然的东西,观察它并真正意识到它的存在——一旦迈出了这关键一步,对光的理解就简单了。

以上

上一篇下一篇

猜你喜欢

热点阅读