教你在设计中如何运用光影来更好的营造画面
设计中适当的掌握光影，能让我们的设计更加自然、生动、直观、精致。
光是生命之源，365日时刻与我们同在。设计中适当的掌握光影，能让我们的设计更加自然、生动、直观、精致。然而，构图、色彩和光影属于设计中非常重要的3块体系，但构图和色彩大多是偏感性的主观理解，而光影则是理性的客观判断。因为这是自然界中真实存在的物理现象，因此设计时的“添加光影”都是在还原真实，理性认知无疑是打牢光影基础的第一步。
只有“光影统一”，才能让所有元素真实的融合在一起，最终形成真实立体、有层次的画面。那么，今天小编就带大家了解一下设计中的光影视界。
透视作为空间表现的手法源于我们用眼睛观看真实事物的感受，用来在图形图像上表现空间感和立体感。在绘图的时候，透视的对错决定了整体结构的好坏，错误的透视从一开始就破坏了“真实感”，会给视觉造成很大的不适应、虚假的感觉。
单点透视
两点透视
多点透视
透视分为单点透视、两点透视和多点透视，视点越多透视越复杂，带给人的冲击力越强烈，也越难控制，网页设计中经常用到的是单点和两点透视。
以上这种用平行投影原理绘制的投影图，叫做轴测图。它避开了近大远小的关系，在水平方向上按照角度进行偏移，无论从哪一点看，都感觉是贴近真实，符合人们的视觉习惯。这种方法特别适合室内设计、机械等展示清晰的结构效果，被优秀的图形设计师用在很多2D游戏和近来的扁平画法上，结构简单、脉络清晰，形成统一又有趣的视觉关系。
在美术中用三大面和五大调子来表述物体受光后的明暗变化。三大面指物体受光后被分成的三大敏感区域。即亮面、灰面、暗面，简单来说就是黑白灰。调子是指画面不同明度的黑白层次，也就是受光的深浅程度，除了亮调、灰调和暗调外，暗面由于环境的影响又出现了“反光”。另外，在灰面与暗面交界的地方，既不受光源的照射，又不受反光的影响，因此挤出了一条最暗的面，叫“明暗交界”，这就是五大调子。
三大面和五大调子
所有真实的光影基本上都会遵循这样的规律，受光、反光影响了物体在环境中的立体形态，根据物体的材质和颜色，受光和反光强弱也会不同。在同一个空间中，所有物体的受光（包括强度、冷暖等各种因素）是一致的，透视是否准确、光影能否一致、色调是否相同，决定了一张图是否合理。
同一部手机，工信部发布的手机照片和官网上的几乎完全不同，我们随手拍的任务照片和精修出来的也是两种效果，除了增加材质质感的因素，光影在其中起着最重要的作用，适当的光影增加了物体的立体感，好的反光增加了和环境的互动。
①真实质感
在网页设计中，我们几乎每天都会和各类产品照打交道，把产品抠出来，然后组合到设计中，在这个“换背景”的过程中，这些物体的光影自然发生了改变，光的方位、强弱不一定相似，有的甚至偏差很大。往往大多数照片是没有经过修饰的，光影变化因为拍摄环境和拍摄设备的原因复杂，不能很好地表现产品本身的质感，大多数专业修图其实就是假定单一主光源配合少许辅助光进行物体的明暗反光，变化这样的图片因为光源一致，能更好地凸显产品的立体感和本身的质感。
雅诗兰黛粉底液产品展示图
②简化质感
光影对质感的塑造不止体现在真实物体上，在网页设计、UI 设计中，我们往往用一些简单的光影变化来塑造物体的立体感，它们遵循的原理是一样的，只是在调子上做了减法。一个简单又经典的案例如下。
按钮中间这道凹凸线是很多网页和UI中经常出现的分割线，精致却不繁复，这条线因为旁边文字的内阴影和右下边缘高光的引导是凹进去的，虽然没有复杂的光影变化，我们也能感知光是从左边来的，如果交换线条的深浅位置，那么它就是凸出来的，由一个简单线条的“凹凸”我们就能理解光影的简化也存在于细节里。
大多数UI、卡通、扁平化的设计或者艺术作品中，光影通过不同程度的简化或者模拟形成了很多不同“模拟真实”的质感，调子的简化或者拟真造成了物体不同的质感，它们遵循合理的光影变化，却形成了不同风格的设计。
同一片草原，在白昼和黑夜看到的完全不一样，不同的光造成不同的空间感觉，也给人带来不同的心理感觉。在设计中，我们往往需要通过模拟不同的光打造不同的场景，展现不同的情感。
①光源位置不同
1）前光（正面光）
光源在场景和物体前上部，这是最常见的光源布置，大多数明亮的、温馨的、开阔的、表现商品的场景大多是前置光源。明亮的前置光能打亮整个场景，使物体能清晰地展现，将投影置于后方，给人正面和明确的舒适感。正面光对空间和物体造成的明暗对比较弱，所以往往选择侧面的角度，使物体在左侧或者右侧形成对比，增加空间感。
2）顶光/侧面顶光
就像舞台上的聚光灯一样，在网页设计中这类方式一般选择聚焦的光源，形成比较强烈的空间差。将多余的空间隐藏在暗部，光源投射出一个圆形的亮面，用于突出其中的人和物，并且造成强烈的明暗对比，给人以视觉冲击。
奔驰汽车产品展示图
3）背光
人们在取景框中，我们看不清他的脸，只能看到剪影。背光是最容易表现神秘、力量感的场景，用于表达或辽阔、苍茫或深沉的情感，隐约在背光中的人激发起人们想要了解全貌的欲望。
一代宗师电影海报（英文版）
②明暗对比不同
以上说到的三种光源位置对空间的影影响并不绝对，结合光的聚像明亮与否和对比也能影响光影对空间造成的感觉。
1）亮光
亮光包括很多种，晴空万里的阳光、室内明亮的吸顶灯、舞台上耀眼的聚光灯都属于其中的范畴，明亮的空间给人安全、舒服、清新、激扬的正面积极感受，诸如从窗户洒进来的阳光，虽然使室内的物体都呈现在背光中，但却有一种温馨、浪漫的感觉。
Cappy饮料产品展示图
2）暗光
相反，昏暗的空间给人不安、窒息、神秘的负面消极感受，我们在设计中用它来设计神秘感、低对比的空间。在战争类、设计类的游戏页面中大量运用暗光的设计营造空间气氛。
游戏界面图
3）强烈对比
刺激的阳光和聚光灯等带来强烈的对比，夏天的阴影、聚光灯下清晰的影子都给人强烈的印象，用于表达强烈的、明快的、激烈的情感。
4）虚弱对比
正如乌云天气几乎看不到阴影，因为没有强烈暗面的影响，虚弱的光影对比使空间更加明显，但损失了对比度。正是如此，那些不需要强烈情感因素的正式的、温馨的、浪漫的、清新的场景都会用到不那么激烈的光影对比来表现平和的画面。当然，结合上文中亮光和暗光的不同，也会产生阴冷、恐怖、黑暗的消极空间感受。
我们并没有像塑造质感那样去讲述光影如何塑造空间，而是讲不同的光影塑造怎样的空间感受，因为所用的原理和方法都是一样的，在塑造空间的时候我们更需要迅速地理解想要表达怎样的情感，从而选择适当的方向，用光影的方式讲述它们。几乎所有的图像设计中都会包含光影的影响，换一种对比方法就会影响画面表达的感受。
光影是一个看似稀松平常，但真实操作起来却非常复杂的东西，学美术的学生要花很长时间去画苹果、画鸡蛋，摄影师们为了看似纤毫变化的光影可以蹲守深山很多天，这正说明了光影的无穷魅力。光影的使用和技巧千变万化，使用恰当便可起到画龙点睛的效果。
文章内容参考于《全能网页设计师精炼手册》，作者：谢思靖（全速网络西安创意总监）安维堂（全速网络西安创意组长），图片来源于网络，版权归原作者所有，侵删
