你有没有花时间观察从一扇窗户透过的阳光,看看灯光如何改变房间中物体的颜色并投下阴影?
没有?我敢打赌。我们大多数人都习惯于看光和影子,以至于很少花时间去思考它们是如何工作的。但无论我们是否意识到它们,光和阴影都是我们每天都与之互动的视觉线索——它们给我们提供了关于形状、距离、位置、质地以及其他身体和触觉的信息。
使用光影设计:利弊两面
关注现实生活中光影的相互作用能给我们带来一些灵感,让我们的设计看起来更逼真。除非你的地下室里有一台3D打印机,否则我们大多数人都只能在二维空间里进行设计。但我们都习惯了在三维空间中看到事物,有时会在日常生活中看到的东西和在纸上或屏幕上看到的东西之间产生视觉上的脱节。在你的设计中加入光和阴影元素,可以帮助浏览者缩小视觉上的差距,让你的2D设计更加逼真,看起来几乎是3D的样子。
但是你在互联网上肯定会注意到,光和阴影效果很容易做过头。正如一名设计师在他的博客中所承认的那样,在我们的现代世界里,很容易添加一个又一个的效果,而不考虑它们对你的设计项目是否有必要或有益。
话虽如此,让我们来看一些正反两方面的观点:
光和阴影可以增加你的设计的深度、尺寸、透视、现实主义和视觉感兴趣。这可以同时吸引浏览者关注你的设计,使它看起来像是从页面或屏幕弹出。但是过度的效果会让一个好的设计看起来很业余和俗气。
总而言之,聪明地使用光影的秘诀包括记住两件事:目的和微妙。首先确保你使用的任何效果具有特定的实用目的,并且对你的项目有意义,那么采取“少即是多”的方法将其应用于你的设计。如果使用的是设计程序附带的效果,则默认设置总是比实际更具戏剧性(特别是对于阴影); 不要依赖它们,你需要运用它们,使你的设计作品ka更柔软、更轻、更微妙。
光和影的工作原理:
快速概述
在我们就如何将光线和阴影融入设计中提出建议之前,有助于对其解剖学有基本的了解。这是艺术家和摄影师为了创作光线充足的作品而学习的东西,但它也可以帮助平面设计师和网页设计师创作逼真的光影效果。
在上面的图表中,我已经指出了一些关键的术语。我们在这里简单地定义一下:
• 光源:如果你看到的是阴影或高光,则必须有光源。听起来这个很浅显,但是在大多数的设计项目中(除了包括太阳、月亮、灯等的插图),光源都不可见。然而,如果你确定一个假想光源的位置,并设定你的效果,看起来好像它们都是由同一光源引起的,你最终会得到一个更现实、更一致的外观,而不是仅仅是一些随机的特殊效果。
•高光:这是光线在物体上最亮的地方(离光源最近,面向光源)。
•阴影/核心阴影:这是物体最黑暗的部分(离光源最远)。但是阴影并不是一团黑色的颜色,它们的色调有所不同。在阴影的最深处,物体完全背离光源,被称为核心阴影。
•投射阴影:与核心阴影(在对象上)不同,这是由对象创建的。当物体本身挡住光源时,它会在它所在的表面投射阴影。投射阴影指向与光源相同的方向,就在物体的另一边。
这是一个非常基本的概述,它将给你一个正确使用光和阴影的起点。现在,让我们开始谈正事;关于你一直在等待的设计提示:
01.使用颜色创建深度
色彩本身可以成为创造轻盈或黑暗幻觉的绝佳方式——无需诉诸预先包装的效果。特别是将不同颜色的相同颜色分层,可以创建深度或距离的外观。这是因为在我们的眼中,光亮渐渐褪色,暗色渐渐增强。
下面的插图完美地展示了这个想法。注意山脉是如何从靠近前景的地方开始变暗的,但随后变亮并且看起来像是在背景中迷雾般的距离。
这里还有很多其他的灯光和颜色。设计师为每个面板选择的色温,对于增强对光线和黑暗的印象有很大作用。天空中细微的渐变也会产生不同时间和光线类型的印象(例如:日出的暖光与凉爽的白色月光)。谈到渐变,下一个提示来谈......
02.为背景图添加渐变效果
在你的房子打开一盏灯,看看最近的墙壁…...这不是所有都是平坦的颜色,是吧?最靠近灯的部分可能看起来更亮或更暖,而你离灯越远,它看起来就越黑。你可能会认为你在看一面墙,但仔细看,你可能会看到灰色、绿色、蓝色或紫色的阴影。重点是很少有光线使物体或表面看起来像一个均匀的、不变的颜色。
创建这种动态颜色变化的一种方法,是在你的设计中添加一个渐变到背景或其他大区域。现在,渐变可能会让你想起上世纪90年代的网站上一个可怕的多色背景,这使得文本不可能被阅读——但这是一个糟糕的渐变案例。如果做得好,渐变可以添加一些微妙的颜色变化(如前面所提到的),帮助柔化/淡出阴影,或者在你的设计的某一特定区域(特别是径向、圆形、渐变)中创建光线的外观。
下面,一个网站的着陆页面上的径向渐变为多个目的服务。梯度的较轻部分使它看起来像一盏灯从上面照耀,并且也使有阴影的手机更可见。结合起来,这些效果使这里的场景看起来逼真——看起来你可以伸手去摸那部手机,它有形状和尺寸。同时也要注意右上角的高亮显示,以及阴影,使手机有了3D外观。
03. 使用高亮显示来吸引注意力
闪闪发光的东西总是吸引你的目光,不是吗?在设计中,亮点可以像一个微妙的聚光灯, 使某些元素变得更加明显——除了帮助设计项目看起来更真实,正如前面提到的。如果你想在你的设计中强调多个东西,一定要记得考虑你想象中的光源,让你的亮点保持一致。
查看以下产品包装上的“801”标志的简单高亮显示。它只是线条的颜色略轻于主要颜色的数字,但它给设计的焦点提供了更多的可见性和视觉兴趣。
04.阴影大师:阴影
阴影是物体上阴影的另一个术语,如我们在文章顶部定义的核心阴影。阴影可以赋予平面设计元素或文字的形状和尺寸。
在这里,一个平面的白色印刷标志的纹理阴影使它看起来有分层和复杂的效果。
05.主阴影:投下阴影
记得文章前面的苹果图吗?投影是苹果本身遮挡光线而产生的阴影,从而在侧面产生影子。阴影只是一种特定类型的投影,其中光源或多或少直接在头顶上投射,这会在对象后面或下方投射阴影。这使得物体看起来像浮在表面之上。
从设计的角度来看,阴影可以帮助物品或信息“上升”到布局的顶部,使它们脱颖而出。它们对于提高浅色设计元素(尤其是文本)的可见性也很有用。例如:在这个网页设计中,阴影有助于使特色内容更加突出。
阴影在各种设计项目中非常普遍,但也经常被滥用。典型的投影错误是把它们做得太大,太暗或太尖锐。在设计中使用阴影通常不应该让浏览者思考:“哦,看,有一个影子!”相反,他们应该与设计的其余部分无缝融合。
06.调整不透明度
在现实生活中,阴影不是不透明的,光线不是白色或黄色的平面,它们是透明的,在你的设计中它应该是一样的。对于微妙而逼真的外观,不透明度和透明度设置是应用效果时最好的朋友。从一个真正低调的应用程序开始,然后根据需要稍微构建它是一个很好的做法;这会使你不太可能过度使用它。
07.在字体设计中结合光与影,达成令人瞠目的字体排版效果
印刷字体可以通过添加光和阴影效果,使字体突显或者不突显。尤其是在文字排版设计中,这确实能让这些文字以醒目的方式活跃起来。
以这个字体的标志为例:它使用了高亮和阴影的字母用渐变来创建一个轮廓分明的3D外观。下面还有一个漂亮的投影(注意一个假想光源从左上角开始的一致使用:主要的亮点落在字母的顶部和左边,而投影点向下和向右,远离光线,就像它应该的那样)。一些微妙的纹理把一切都拉到一起。