小小投影大大提升设计美感度

被你忽略的投影,实用性竟有这么大!

说到影子,相信大家并不陌生,在现实生活中有光的地方就会有影,影子让现实中的物体更具空间感、立体感,而且也更真实。

我们常听到:杰出的设计源于生活但必须高于生活这样的话,现实生活中随处可见的影子在设计工作中一样常见,使用的也越来越广泛,那么该有人问了:影子层次越多越出彩吗?

我的回答是:并不全是这样!

废话不多说,直接进入今天的主题,常用的投影方式有哪些?
被你忽略的投影,实用性竟有这么大!

在设计中,影子的作用有很多,比如:丰富画面层次、拉伸作品的空间感、加强产品立体感、增加作品细节……

很多设计初学者在添加影子时很喜欢用到PS软件里的图层样式(fx),直接一步搞定影子:
被你忽略的投影,实用性竟有这么大!

如图所示,展示了平时工作比较常见的色块、模特以及产品的投影,但表现出来的整体感受,都不太好。
为什么?

并不是因为图层样式(fx)不实用,而是从上图来看,不管是产品、色块还是模特,投影给人的感觉很糊、而且稍微有点脏脏的,视觉层次感、空间感没有拉开,非但没有起到增加细节的作用,反而给人一种多此一举的感受。

被你忽略的投影,实用性竟有这么大!

现实生活中,影子的形态有很多种,比如硬投影、虚化投影、倒影、悬浮投影、长投影等等,投影形态的不同也代表着物体所处状态的不同。
同理在设计中,投影形态一样可以参考现实生活中的。而且图层样式里(fx)的投影在设计工作也很实用。前面说了,设计中的影子并不全是层次越多越好,比如接下来要说的色块,这里简单的把色块分为无彩色块和有彩色块。

无彩色块

无彩色,俗称黑白灰,投影颜色大多以灰色为主,若色块底部有颜色,也可以使用比底部颜色偏暗的颜色作为投影颜色,投影模式常用正片叠底:

被你忽略的投影,实用性竟有这么大!

这里列举的是常用的表现形式,同样是使用PS软件中的图层样式(fx),给人的视觉感受却差距很大,最直观的区别就是投影的明度提高了、更通透了,而且空间立体感更强。
具体数值以及角度根据实际情况而定,不用死记硬背,下面看一下实际工作中的应用:

被你忽略的投影,实用性竟有这么大!

被你忽略的投影,实用性竟有这么大!

被你忽略的投影,实用性竟有这么大!

被你忽略的投影,实用性竟有这么大!
如上图所示,简单的色块投影让作品的展示在视觉上更加丰富、有层次,也起到了很好打破板式的作用。

有彩色块

 

这里把有彩色和无彩色两种色块分开来说,两者投影的常用形式基本一致,区别在于有彩色块的投影颜色与色块颜色相似的表现形式用的比较多,下面看张示意图:

被你忽略的投影,实用性竟有这么大!

同样,投影的常用模式是正片叠底,下面看一组实际应用:
被你忽略的投影,实用性竟有这么大!

被你忽略的投影,实用性竟有这么大!

被你忽略的投影,实用性竟有这么大!

还可以继续延伸,在设计工作中,也可以把大号文字当做色块来看,当画面缺少层次、立体感时,可以通过常用投影的方式来改变,下面看两个案例:

被你忽略的投影,实用性竟有这么大!

被你忽略的投影,实用性竟有这么大!

把文字当做大色块,通过添加投影,使得作品整体出彩度大大提升,空间感也更强。当文字是有彩色时,投影的颜色与文字颜色保持相似视觉效果会更好!

实物产品
实物产品的投影种类相比抽象色块来说,因为真实环境光源不同,所以影子的形态也各不相同,这里无法全部列举出来。实物产品的影子会让其更加真实、立体,这里我们以手机为例,列举六类投影形式:

被你忽略的投影,实用性竟有这么大!

如图所示,涉及到了虚化投影、悬浮投影、长投影、落地投影等等,当我们做海报时,作品出现空、太平、缺少层次感的问题时,不妨尝试给产品添加投影,能很好的改善以上问题。

很多人不知道移轴模糊是怎么使用的?我做了个示意图,一起来看看:
被你忽略的投影,实用性竟有这么大!

最后看下成品:
被你忽略的投影,实用性竟有这么大!

还可以继续延伸,实物产品除了投影之外,倒影也很实用,接下来在投影的基础上再加一层倒影,看下效果如何:
被你忽略的投影,实用性竟有这么大!

添加倒影之后,整体层次感又丰富了很多,接下来我又想了一下,只用上侧实例中的投影+倒影的效果,添加买点文字,是不是就可以做成一个简单的海报了?想到就要做!

示例一:

被你忽略的投影,实用性竟有这么大!

示例二:

被你忽略的投影,实用性竟有这么大!

我从前面常用投影展示中随即选择两个,加上刚发布没多久的华为P40宣传标语,在没有加任何装饰元素的情况下,两幅海报也没有给人很空或者单调的感受,简约大气!

注意:因为产品有了影子,所以背景也要遵循靠近光源亮,远离光源暗的法则,故而使用了有白到灰的渐变,使得整体视觉层次感更强、更真实。

 

再看看实际工作中的应用:

被你忽略的投影,实用性竟有这么大!

 

被你忽略的投影,实用性竟有这么大!

被你忽略的投影,实用性竟有这么大!

非实拍图的产品,影子一般都是需要设计师手动添加的,这与抽象化色块不同的是:实物产品的影子要结合作品整体光源方向而定。注意别把影子做糊就可以。

被你忽略的投影,实用性竟有这么大!

投影的种类并不只有文中提到的这些,本期所说是工作常用的影子,常用的意思就是:实用且制作并不复杂,这类投影一般多用在偏平面海报、网页的设计工作中,对于一些小场景的合成工作也同样适用。

一般情况下,有影子就要有拟定光源,整体背景以及其他视觉元素都要遵循光影明暗关系,并且现实工作中,能加投影的元素远不止文中说到这四类,比如植物、画框、桌子等等,该有人问,这些元素怎么加?
只要你懂了文中所说的,这些自然就会了!

 

 

原文地址:美工美邦(公众号)

作者:张家彬

被你忽略的投影,实用性竟有这么大!

本站所有素材均来自网络,如果侵犯了您的版权,就随时联系我们的客服。你还可以关注我们的微信公众号与微博公众号随时获取我们最新动态。
UI社 » 小小投影大大提升设计美感度

良凡设计-专注高端品牌企业官网建设--UI社官方推荐

立即查看 咨询客服