首页 > 分享 > 设计中的光影应用案例：10种极为有效的小技巧

设计中的光影应用案例：10种极为有效的小技巧

萌宠菠菠乐园
2024-10-04 00:28

你是否观察过穿过窗户的一缕阳光，看它是如何改变屋子里物件的颜色并投下阴影的？

没有？我猜想大部分人都对光与影习以为常，所以几乎不会去想它们的原理是什么。然而，无论我们有没有注意到它们，光影都是我们每天会遇到的视觉暗示——它们提示着我们物体的形状、远近、位置和纹理等其他质感。

设计中光影的运用：赞同 & 反对

关注现实生活中光影的相互影响可以让我们从中获得灵感，从而让设计更具生命力。除非谁的家里有一台3D打印机，否则大部分人还是只能进行二维设计。但是我们已经习惯了以三维的眼光看待事物，有时这让我们难以在视觉上将我们在日常生活中看到的事物与在纸上或屏幕上的事物联系在一起。在设计中运用光与影就可以帮助我们解决这个难题，让二维设计更显真实，有一种三维既视感。

Dribbble/Martino Pennati

但是，如果你经常上网你就会发现光影效果很容易被滥用。正如一位设计师在他的博客“关于沉迷使用垂直投影（Drop-shadow）的自白”中幽默地描述道，在现代世界，对于只需动几下鼠标就马上能完成设计来说，人们很容易添加阴影效果到停不下来，而没有真正的思考阴影对他们的设计项目到底有没有必要或者有没有帮助。

下面我们来看看一些支持和反对运用光影效果的观点：

光与影可以为设计增加纵深感、维度感、不同角度、真实感和视觉趣味感，让读者立马就被这份设计吸引，让它从纸上或屏幕上脱颖而出。但是光影效果很容易被滥用，这样反而会让一份好的设计看起来既不专业又显俗气。

总之，巧妙运用光影的秘诀有两点：目的性和微妙性。首先，要确定任何一种光影应用都有实际、特定的效果，对设计是有意义的；然后，秉承“少即是多”的原则，将光影运用到设计中。在设计中运用光影效果时，默认设置一般都更加夸张，缺少真实性（尤其是阴影效果），所以不要使用默认设置，要通过调整让它们更显柔和、微妙。

光影原理简介

在介绍设计中光影运用的技巧前，对它们的原理有一个基本了解会更有帮助。这是艺术家和摄影师在研究如何创造明亮构图时一定会掌握的知识，但是它也可以帮助平面设计师和网页设计师创造出真实的光影效果。

图片文字：

光源

高光

最暗区

阴影

投影

上图中已经标出了几个关键术语，它们的定义如下：

光源：如果有阴影和高光，那么就一定有光源。这句话听起来似乎是显而易见的，但是在大多数设计中（而不是包括太阳、月亮、台灯等的示意图），光源一般都不明显。不过，如果你假定一个光源位置，然后根据光源来安排光影，那么你会设计出更加真实、连贯的作品，而不仅是随机设定光影特效。

高光：这是光线投射在物体上时最亮的部分（正对着光源且与之距离最近）。

阴影/最暗区：这是物体上最暗的区域（离光源最远）。但是阴影区并不是一团统一的黑暗区域，它们的阴影程度也有所区别。阴影最深的是物体上完全背对着光源的部分，也就是所谓的最暗区。

投影：与位于物体上的最暗区不同，投影是由物体产生的。由于物体挡住了光源，所以在其坐落位置的表面就会投射阴影。投影的方向与光源的方向一致，在物体的背面。

这是让你开始正确应用光影的基础入门知识。现在，让我们进入正题，介绍十条光影设计技巧。

01.利用颜色制造纵深感

不需要使用预设的效果，仅用颜色就能制造出明暗对比的错觉。尤其是利用同一颜色的不同深浅就能制造一种纵深感或距离感。这是因为，对我们的眼睛来说，如果深色突出，浅色就会弱化。

以下这幅图片就完美诠释了这一点。注意越靠近前景的山脉就显得颜色越深，而越靠近背景的就越浅，仿佛远远地笼罩在雾气里。

Dribbble/Harry Nesbitt

此外，这幅设计里还有许多出色的光线与颜色应用。例如每一个画板采用了不同的色温，极大地增强了明暗对比。天色的渐变也同样体现了一天的不同时间点以及不同的光线（例如太阳冉冉升起时的暖光与夜晚月色的清冷白光形成对比）。说到渐变，请见下一条技巧……

02.为背景加上渐变效果

点亮房间里的一盏台灯，注视离灯最近的一面墙。墙上并不是单一不变的一种颜色，对吧？最靠近灯的一部分颜色更亮且颜色偏暖，而离光线越远的部分就越暗淡。你可能会觉得自己这面墙只是简单的发蓝，但是仔细看去，你可能会看到灰、绿、蓝、紫等多重色调。因此光线很少会让一个物体或者某一表面看上去是毫无变化的一种颜色。

所以营造动态颜色变化的一个方法就是在设计背景或者其他大片区域添加颜色渐变。说到这里，你想的可能是上世纪90年代网页上多种颜色混搭的可怕背景图，上面的文字都很难识别，这种是渐变的错误用法。如果应用得当，渐变会带来一种微妙的颜色变化（上文已经提到），帮助柔和/淡出阴影区，或是在某一区域创造一个亮光区（尤其是放射状或圆形的渐变。）

下图中网站登录界面的放射状渐变就有多重意图。渐变的亮光区看上去就像是有一缕光线从上方照射下来，同时也让手机的投影更加明显。光影效果的结合让这一场景显得更加贴近生活，就如同你可以伸出手触碰到那部手机，感受它的形状和维度。同时注意右上角的高光区，与阴影相邻，让这部手机更具有三维的既视感。

Dribbble/Hoang Nguyen

03.利用高光吸引关注

物体上发光的部分总是吸引着人们的目光。在设计中，高光的作用就像是一个微小聚光灯，让某些元素看起来更显眼一点，同时还可以像前一点提到的那样，让物体看上去更加真实。如果想在设计中高亮多个部分，一定不要忘记了假想的光源，不然你的高光就会显得不连贯。

下图产品包装上的“801”就是一个简单的高亮区。仅运用比数字原色稍微明亮一点的颜色，就可以让设计的焦点更为突出、更有趣味。

Dribbble/Emrich Office

04.掌握阴影：明暗法

明暗法（Shading）是阴影技巧的另一说法，与上文提到的最暗区定义相似，明暗法可以让设计中的平面元素和文字显得立体感十足。

下图中，白色平面商标字体上的纹理阴影让它看起来层次丰富、繁复精美。

Dribbble/Michael Spitz

05.掌握阴影：投影与垂直投影

还记得上文提到的苹果阴影示意图吗？那里的投影是指由于苹果自身挡住了光源而在其一侧产生的阴影，而作为投影的一种特殊形式，垂直投影一般是指光线从正上方投射下来，在物体后方或下方产生的阴影，让这一物体看起来像是悬浮在图面上。

从设计的角度，垂直阴影可以让物品或者文字信息从整个版面上“升起”，让它们看起来更加突出。这对于提高浅色元素，尤其是浅色文字的存在感非常有效。例如，以下这幅网页设计中，垂直阴影让图中特定内容显得更加突出显眼。

Dribbble/Ben Schade

垂直阴影在各种设计项目中的应用都很广泛，但同时也经常被误用。一个典型误用就是让阴影范围太大、太黑以及/或者阴影边缘太尖锐。设计中运用阴影一般不应该让读者产生“噢，这里运用了阴影！”这种想法，而是应该与其他部分巧妙融合。

06.调节不透明度

现实生活中，阴影并没有不透明度，光线也不是状似白色或黄色的平面垫圈，它们都是透明的，在设计中也理应如此。为了营造一种真实的微妙感，不透明度和透明度的设置是运用光影效果时的一对好助手。要练习这一技巧最好是从较低的不透明度开始，然后按照需求慢慢调高，这样就可以较低意外误用的可能性。

07.结合光影打造亮眼字体

设计中的字体十分适合运用光影效果，无论是在字母上方或下方，尤其是那些以文本为焦点的设计，可以让文字生动起来，吸引人的目光。

以下图的文字商标为例：图中字母同时使用了高光和阴影，淡入淡出（阴影渐变），从而制造一种凿刻上去的3D效果。同时字母下方恰当运用了垂直投影。（注意整个设计的假想光源都一致来自左上方：主要光源投射到字母的上方和左边；而垂直投影在字母右下方，远离光源，保持了高度的一致性）。而微妙的纹理感也让整个设计更加和谐。

shadow_8

Dribbble/Nick Slater

08.更多文字阴影技巧：尝试凹凸风格

字体真的是应用创意阴影风格的绝佳元素，大部分字体都很容易添加阴影（有的甚至自带阴影），这类字体可以让你的字体排版有一种特别的定制感。下面是两种字体阴影风格：

凸显阴影：作为一种印刷技巧，浮雕式凸显阴影可以从视觉上让某一设计元素（通常是文字）从纸（或其他材质）的表面上凸显起来，一般通过一些金属印章来完成。你可以运用数字化手段在字母边缘恰当添加阴影，或者在字母上设置高光，从而达到这一效果。

Boltz & Hase

凹陷阴影：有很多词可以形容文字在某一表面的雕刻感或凹陷感。凸版就是一个常用的词——凸版也是一种印刷技巧，通过金属片将某个设计（带墨或不带墨都可以）按压于柔软且厚重的纸张上面——但是这个词现在也频繁出现于模仿这一效果的数字设计领域。例如，下面这幅商标设计：

Dribbble/STUDIOJQ

与凸显阴影相反，凹陷阴影中的阴影在字母内部，而外部的高光代表着字母被按压凹陷下去。

09.扁平化设计

扁平化设计如今已经逐渐成为了一种长期流行的设计趋势：从苹果开始转用扁平化的手机设计到谷歌的扁平化新图标，扁平化的潮流似乎还会一直延续下去。这种设计的一个最显著特点就是缺乏深邃感，也就是说人们不会看到太多的阴影和高光。不过，如果你想要保留扁平化设计的极简感，同时又想增添一些动态的光影效果，该怎么办呢？设计师们已经有了对策，下面就是一些常用技巧：

颜色：使用颜色变化或者渐变来增加维度感或光/影交织的感觉，同时依然严格遵守扁平化设计的概念。

这幅404错误信息的网页设计就运用不同深浅的颜色来营造纵深感（在第一点中介绍过的技巧）。

Dribbble/Jonathan Patterson

延长阴影长度：这种独特阴影风格经常与扁平化设计搭配使用，尤其是文字和图标。这种阴影一般会延长至该物体的边缘。

Dribbble/Georgi Davitaya

10.网页设计：利用阴影制造可点击的质感

网页设计自然需要重点考虑如何让用户与网站进行互动。用户界面应该简单易懂，容易上手，而让用户知道哪里可以点击和哪里不能是设计的关键。这也是光影可以发挥作用的地方，尤其是在设计按钮时。

仔细看下图的按钮就结合了本文提到的许多种技巧，包括渐变、高光、明暗、阴影等，给人一种很强的立体感。在这里高光的作用十分明显，左边按钮的边缘处有一条细细的高光让它看起来是微微凸起的（表明可以点按），同时按钮上半部分的圆弧形高光也让它呈现出凸起的形状。右边的按钮采用了内部阴影的技巧，让它看起来是按压下去的形状。