等等

 

以下是图文版:

新年伊始,去年欠的今年来还,之前答应过大家出一期关于阴影的文章,本期教程就来兑现承诺了。平时设计工作中,关于投影,简单一点的就是一个图片中的主体抠下来放到画面中,这个时候就要设置一个投影,让主体在画面中更和谐,难一点的就是在合成设计里,涉及到每个物体的投影形状、颜色、透视等等,根据分析画出投影,这期教程就给大家普及一下投影的相关知识,以及如何去做投影。

阴影是什么呢?阴影是光带给这个世界的礼物。是不是贼文艺

 

阴影的概念

还是正经解释一下什么是阴影?

在客观世界中,光线总是从光源沿着直线方向发散。

在光线的照射下,受光部分称为亮面,仅次于亮面的受光是灰面,而光线无法照射到的部分,称为暗面,由于被受光面遮挡,物体所在环境中出现的阴暗部分称为影,阴与影的总合就是阴影。

 

阴影形成的要素

阴影形成的要素有哪些呢?

首先要有光源,光源就是光点,光点向下的垂线与承接面的焦点就是光足,阳光的光足在地平线上,灯光的光足在照射的基面上,然后是要有物体,光点发出的光线,经过物体上阴点,光足与物体底点也就是阴足连线,与光线相交的点就是影点,阴影就是阴足到影点的部分。

画阴影时,一般就是先定光点和光足,然后是阴点阴足,光点连接阴点,光足连接阴足,这样阴影自然就画出来了,是不是很简单。

用这张照片来做个简单说明

光源的位置,就是太阳,向下垂线交于海平线于一点,这个就是光足。

然后,定出一些椅子上的阴点和阴足

光点连接阴点,光足连接阴足,这样就能画出阴影的大致形状了。

 

光源的分类

光源总体上可以分为两大类,一类是自然光,比如:太阳光、月光。一类是人造光,比如:灯光、烛光。

自然光

 

自然光有两个特点

  • ① 光线平行

因为太阳、月亮、这样的发光体离我们太过遥远,所以可以把它发散的光线视为平行的。再来说下这张图片,同样是自然光,为什么它的光线不是平行的?

这因为透视的现象,就像这个地板,不也是平行的吗,但是因为透视的关系,它们会相交于一点,光线也是同样道理,因为我们以这个角度观察,所以光线会出现透视现象。

也就是说,当我们从侧面观察的话,就很明显看到光线是平行的。

  • ② 随着时间的变化⽽变化,不会为⼈的意志所转移

日升日落,阴晴圆缺,都是自然的规律,不会为我们的意志所改变。

 

人造光

人造光有两个特点:

  • ① 光线不平行, 呈放射状

用这张图片来举例,画面中光源是路灯,物体是消防栓,我们对它进行一个简单的分析:

它的光点是路灯,向下的垂线,到地面上的光足,然后是消防栓,光点连接阴点,光足连接阴足,画出阴影,可以看出,因为与光源距离近,所以光线是不平行的,呈现一种放射状,并且影子也会呈现放射状。

  • ② 根据需要变换位置

为了呈现想要的视觉效果,可以随意移动光源的位置,甚至调整它的颜色、明暗等,可以人为改变。

 

灯光属于电光源,它可以是单一光源或者组合光源,常见的像这样的白炽灯、还有日光灯等等。

当各个方向都有光源的时候,投影就会消失,在医学上,用的无影灯就是根据这个原理制成的,因为医生做手术的时候,手和器械都有可能对手术部位造成干扰的阴影,所以无影灯就是能尽量消除阴影。

 

阴影规律及特点

我们模拟一个太阳移动的轨迹,当太阳位置比较低的时候,光线与地面的夹角就会比较小,影子会很长,升高一些,夹角就稍微大了些,影子缩短了点,再升高一些,夹角更大,影子很短了,然后当太阳在物体正上方的时候,与地面的夹角接近90度,影子基本就是一个点,那另一边,基本就是相同的情况,所以,光源离照射物体越高、越远、光线角度越大,阴影越短。

我们再通过几张图片来进一步了解阴影规律及特点

我们看到人物的影子非常的长,光线与地面夹角比较小,说明它的光源在一个比较低的位置上。

这个正俯视的图片,影子也很长,说明它的光源也在一个较低的位置。

影子的长度也不算短,但是看光线与它的夹角比较大,证明它光源在相对比较高的位置上。

这张照片比较明显了,影子比较短,接近中午的阳光。

接近中午的阳光

 

我们之前在透视的那篇教程里说过,物体的透视线,最终都会消失在视平线上,所以,当画面中先有一条视平线,我们同样可以画出一个立方体。

当物体有一个阴影,我们可以通过影点与阴点和阴足的连线,找到光点和光足。这样也就找到光源的位置。

这张图片,我们就可以通过倒推的方式找到光点,如果画面中再放入其他物体,就可以用光点和光足对其连线,从而做出投影。

正常情况下,物体在光源下的投影,如果在其中出现一个台阶会怎样?影子就会随着阶梯的形状而产生变化,也就说阴影投在不同的承影面上,会随着受影面的变化而变化。

这两张图片就明显看出阴影根据地面起伏的形状而变化。

 

阴影在设计中的应用

 

第一个是接触阴影,是物体与物体之间接触所产生的阴影,一般这种我们都可以用图层样式当中的阴影来设置。

 

还有一种接触阴影,是物体立面与承影面之间投影关系。

 

第二种是悬空式投影,这类投影给人很强的空间感,并且大多数情况,投影都会成为画面中的主角。

第三种是倒影,针对反光较强的面会有,比如镜面、水面、琉璃台面等,并且在表现一些高端产品设计时候经常会使用到。

 

第四种是长投影,也是这几年扁平化流行起来,带动的一种投影形式。

第五种合成设计中的投影,和实际照片中的场景是一样道理的,这也是所有投影当中比较难操作的。

最后一个创意投影,它不会根据物体本身的形态去表现,而是根据文案和设计构思而产生的很有创意的投影形式,当然,这个主要靠大家发散思维的联想了。

 

案例时间

用两个简单的小案例,来给大家讲解一下如何做投影

给下面右侧的书籍做一个和左边一样的投影:

给图层添加投影图层样式,不透明度调整到45,角度137,距离26,扩展10,大小35。

我们把外围一圈的投影已经设置好,下面就再添加一个投影,也就是最贴近书籍边缘部分。这个部分投影我们可以称之为闭塞投影,是近光量最少的地方。

再添加一个投影,不透明度33,角度不变,距离5,扩展10,大小10。

利用图层样式的投影就完成了,大家在调整的时候可以边调整边观察,以达到一个自然的效果。

第二个方案,是给画面中的立方体添加一个投影,要符合光影关系。

第一步要按照透视关系,把立方体看不到的面给画出来。

根据之前我们学到的知识点和画面中其他阴影来进行分析:

先连接几个人物的影点和阴点,我们知道自然光的光线是平行的,并且我们标记出来的也确实近乎平行的光线,既然这样,我们就不需要找到光点的位置。

只要复制其中一条光线到立方体上的阴点即可,然后我们再去找光足的位置

为了找光足,可以先把画面扩展一下,然后连接影点和阴足,三个参照物的连线的延长线会相交于一点,这个点就是光足。

从光足往回连线,与阴足的延长线,相交于影点,这里为了区分,三条先我用三个不同的颜色,然后我们把三点连线,就是阴影的区域了。

可以发现绿色和蓝色是基本重合了,我们就可以忽略蓝色的那条线了。

立方体阴影的范围与形状,然后再进一步刻画

做个高斯模糊处理,数值2。

在阴影上方新建一个图层,用钢笔工具勾勒一个闭塞阴影,不要太大哦,填充深灰色,模式正片叠底。

做高斯模糊,数值1.4

 

为了不让影子边缘太生硬,选择滤镜——扭曲——波纹——41%

用吸管工具吸一下旁边影子的颜色,填充到立方体影子

如果影子太重,可以适当降低不透明度,再统一暗部的色调,这样阴影就做完了。

 

最后总结

  1. 阴影的反向就是光源的位置
  2. 根据项目需要,选择用图层样式做投影或用钢笔/画笔工具画投影
  3. 学会在画面中找参考
  4. 阴影不是一片死黑,要有环境光和地面的颜色
  5. 地面起伏会影响影子形状
  6. 画影子时要考虑到看不见的面,它也是投影的一部分
  7. 闭塞区域是近光量最少的地方,也是最暗的地方,要柔和,不能太锐利
  8. 多看摄影照片会提升你的敏感度哦

 

错过上方精彩视频教程,点我一样可以观看哦~

 

原文地址:研习设(公众号)

作者: 研习设

转载请注明:学UI网 » 投影做不好 ,一篇文章就搞定!

登录收藏
 
你可能喜欢的:
如何在产品设计中利用心智模型如何在产品设计中利用心智模型
设计师进阶笔记|1小时想到100个点子的白三角笔记设计师进阶笔记|1小时想到100个点子的白三角笔记
学习导航,这一篇就够了学习导航,这一篇就够了
七大交互心理学(下)七大交互心理学(下)
如何提升产品的易学性如何提升产品的易学性
费茨定律如何指导界面设计费茨定律如何指导界面设计
让你的设计有理有据-竞品分析让你的设计有理有据-竞品分析
关于消息设计的那些事儿关于消息设计的那些事儿
沉浸式体验设计相关思考沉浸式体验设计相关思考
如何减少页面跳转如何减少页面跳转