绘制正确投影大小与距离

在现代设计中,投影几乎无处不在。绘制投影是个基础的技能,但是这看似简单,却很容易犯各种错误。一种常见的投影错误就是投影的大小与距离。

投影能够创造一种立体的感觉。在一幅图片或者网页的设计中,所有元素组合成一个整体,所有元素的投影都必须满足一体性。初学者通常在各个堆叠的元素上会放置同样的大小和距离的投影。以下面这幅图片为例。

drop-shadow-incorrect

在这幅图中,各个元素是堆叠在一起的效果,按照投影产生的层次感来看,由下到上依次是右下,左下和上部。想象一下现实生活中的情况就会发现这个投影有些不合适。右下的投影距离是20像素,而左下在右下的投影距离是20像素,那么距离叠加起来之后,左下距离背景应该有40像素,而这里还是20像素,这明显就是不合逻辑的。很多时候一附图看起来就是有那么一些不对劲,但是又说不上来在什么地方,这些问题往往都是最基本的一些原则性错误。

drop-shadow-correct

这附图的投影就是正确的。右下的投影是10像素,左下在右下的投影是5像素,那么很自然的左下投影在背景上的距离应该是15像素,接着上部的投影也应该符合这个逻辑。而且距离不同投影的大小也不同。这样一幅图片就看起来非常习惯了。

绘制投影大小要注意一个整体的层次感,这样才能设计出美观而且又合理的图片。其实投影并没有这么简单,这里只是讲解了投影的大小和距离而已。

12 Comments

  1. 若果举一反三,尝试以投影做斜向平面是否成立。
    比如中线5px 改1px,顶端5px改3px,10px改6px可构建一个凹面吗?

    Reply

Leave a Comment.