恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
光的视觉艺术2——阴影
0.0°
2017-01-17 原创文章 经验/观点 举报 1672 8 14 0

掌握原理才能看清本质

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



阴影赋予画面真实感

____________


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


Image title


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


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


观察上图,我们很容易发现,轮廓阴影明显比投射阴影要来的浅,这是因为地面可以大面积的反射光线影响球体,而球体相对地面面积要小很多,反射光线也少,对

地面的投射阴影的影响很小,所以轮廓阴影要比投射阴影浅的多。当然,这是在自然光环境下,室内灯光复杂,可能会出现相反的情况。


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



Image title

↑ 脸部右侧的浅蓝色轮廓阴影(来自dribbble)



Image title

↑ 扁平化的作品通过轮廓阴影和投射阴影来提升质感(来自dribbble)



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


Image title

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


____________


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


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


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


Image title

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



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

___________


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


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


Image title

↑右图为边界投影的应用



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


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


____________


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


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


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


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


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



Image title

↑ 平行光线,如太阳光



Image title

↑近距离的大光源



Image title

↑复杂的光源,一般在人造光情况下


___________


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


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


Image title

↑橙色阴影


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


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


我不知道“弥散形阴影”这个名词是从何而来的,突然大家都这么叫它。我觉得这个叫法是不妥当的,这种手法其实是将图片当做了一个发光体来运用,称作阴影是


不合理。虽然这种手法和透明物体的投影形式很相似,但很明显图片并不是一个透明的介质。如果我理解有误,还望指出。

Image title

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


____________


Image title



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


___________



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



以上

更新:2017-01-17

收藏

8人已收藏

陈好元_haoyuan

膝盖要软,肩膀要硬

  • 7

    作品

  • 23

    粉丝

  • 66

    关注

  • WEB | 小码内测官网
  • 光的视觉艺术——基本原理
  • 木材图鉴
  • Daily Pokemon头像
相关标签
设计经验分享GUI

    猜你喜欢

      2017-01-17 原创文章 经验/观点 举报 1672 8 14 0

      光的视觉艺术2——阴影

      0.0°

      你确定要举报光的视觉艺术2——阴影

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2016年09月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      14
      8
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录