2020-9-9 資深UI設計者
構圖、色彩和光影屬于設計中非常重要的3塊體系，但構圖和色彩大多是偏感性的主觀理解，而光影則是理性的客觀判斷。因為這是自然界中真實存在的物理現(xiàn)象，因此大部分時候畫面的「添加光影」都是在還原真實，所以本文的很多知識都偏理論和科普，但理性認知無疑是打牢光影基礎的第一步。
如果說「構圖」和「色彩」是視覺設計的基礎，那光影便是「錦上添花」，當各種視覺元素組合完成后，只有「光影統(tǒng)一」，才能讓所有元素真實的融在一起，最終形成真實立體、有層次的畫面，而「光影統(tǒng)一」便是這篇文章的核心原則。
其實我們看到的萬物色彩，都是物體表面的反射光，是「光」創(chuàng)造了色彩，同時也創(chuàng)造了「影」，只有經過光照才會出現(xiàn)明暗，才有所謂的「光影」，所以我們先來說說一切的源頭——光。
發(fā)光的地方就是「光源」，當我們對畫面「添加光影」時，一定要先留意光源在哪，像我每次畫設計草圖時，就會先把主光源的位置確定并標示出來，只有清楚位置，「光影統(tǒng)一」才有了依據(jù)。
那常用的光源類型都有哪些呢？其實就2大類：照射光和環(huán)境光。2類光源往往同時存在，相互影響，塑造場景時必須同時考慮。
照射光就是畫面中的主要照明光，這是影響整體光影的核心光源，根據(jù)光線照射路徑的不同，又分成直射光、散射光和折射光。
直射光
直接照射的光源就是直射光，光線路徑呈方向明確的兩點一線，整體集中、聚焦。
直射光能在物體表面形成強烈的明暗對比，并且過渡偏硬，形成清晰的輪廓邊緣，最常見的直射光就是晴天陽光，它屬于自然光。如下圖所示，陽光直射形成的明暗強對比能呈現(xiàn)人物及建筑的輪廓，突顯立體感。
和自然光相對應的是人造光，在人造光中，例如攝影棚里常用的閃光燈和常亮燈（不帶柔光罩）都算直射光，照射效果和晴天陽光類似，仔細觀察投影，邊緣都很生硬、清晰。
散射光
當光束穿過某一介質（云層、柔光布等），被其表面分散傳播的光便是散射光，散射光的光線路徑呈多方向發(fā)散狀，整體分散、無明確方向。
自然光中，陰天、雨天、霧天的光照都屬于散射光，當陽光穿過大氣時，大氣層能讓光線朝不同方向發(fā)散，發(fā)散后的光線柔和，在物體上形成的明暗對比較弱，過渡也柔和。如下圖所示，不管人物還是景物，都無明顯的陰影輪廓，整體層次豐富而細膩，影調柔和，特別是暗部的細節(jié)都能保留完好。
而人造光中，如果給閃光燈和常亮燈裝上柔光罩，這時發(fā)出的光就會變成散射光。例如下圖中，人物和產品都顯的特別柔和、舒服。
折射光
當光束從一個介質射入另一介質時，傳播方向發(fā)生偏折的光就是折射光。常見介質有水、玻璃等，它們的折射角度也各不相同。
日常生活中，像泳池里的水波光影、玻璃杯投射的光線圖案都是與折射相關的自然現(xiàn)象。
而我們在設計Banner時，若將這些折射效果表現(xiàn)出來，就會給畫面增添很多細節(jié)，同時也會增加真實感，像水波光影在電商中用的就很多。
很多新手在做設計時，往往只注意照射光（主光源）對物體的影響，而忽略環(huán)境光，導致畫面總是不夠真實。簡單來說，畫面中除了主光源外的所有光線都算環(huán)境光，環(huán)境光的亮度一般很低，且沒有明確方向性，常見的環(huán)境光有2種：散射光和反射光。
散射光
和照射光一樣，環(huán)境光中也有散射光，但它們的不同在于：
像自然界中的夕陽西下，當紅色的太陽光（照射光）減弱時，建筑的暗部便會顯現(xiàn)藍色的天空光（環(huán)境光），這時紅光和藍光會形成鮮明對比，極具沖擊和美感，這樣的畫面在攝影及設計中都非常常見，也是攝影界公認的「黃金一小時」，這時的天空光就屬于環(huán)境光中的散射光。
生活中還有一個常見現(xiàn)象也能看到散射光影響，當你走在戶外，觀察自己的影子，特別當影子較長時（清晨或傍晚），這時離自己越遠的區(qū)域顏色越淺，這是因為越遠的影子所處區(qū)域就越開闊，受周圍散射光的影響就越明顯，因而顏色更淺。
反射光
環(huán)境光中還有非常重要的一類是反射光，當光束射到介質表面時，有部分自介面射回的光就是反射光。可以毫不夸張的講，世界萬物之所以出現(xiàn)明暗就是因為反射光的存在。反射光一般有2種情形：鏡面反射和漫反射。
鏡面反射。當反射面非常光滑，這時平行射入的光線仍會向一個方向平行的反射出來，效果如同鏡子一樣，雖然這樣物體本身的明暗就會非常微弱，但人們透過反射面能看到周圍的環(huán)境信息，這就是鏡面反射光。
日常生活中像平靜水面、鏡子、拋光金屬等都會有鏡面反射光，例如我們在刻畫金屬材質的元素時，常常會在表面加些近乎白色的高光，這就是由于鏡面反射而進入眼中的刺目強光。
另外晴空萬里時，海面也常出現(xiàn)「波光粼粼」的閃光，同樣也是陽光射入水面的鏡面反射光。
漫反射光。當反射面凹凸不平時，這時平行射入的光線就會向各個方向反射出去，這便是漫反射光（以下簡稱「漫射光」）。需要說明這里的凹凸不平也包括微觀結構，例如有些墻壁看著光滑，但仔細看表面也有粗糙顆粒，這時反射出來的光線也是各個方向的漫射光。
漫反射在這個世界里無處不在，它是我們對物體形態(tài)及色彩產生明確認知的基礎。
因為有漫反射的存在，物體才會有清晰的明暗關系，我們才能看清這個世界，它賦予了物體縱深感和體積感，不管是產品還是環(huán)境皆是如此。
這里列舉一個設計中常用的漫反射現(xiàn)象，我們將一個白色茶杯放入一個綠色盒中，打上一束光，這時茶杯整體都帶有綠色調，這是因為盒子表面產生了大量綠色的漫射光，這些光束射在茶杯上，進而發(fā)生偏色現(xiàn)象，如下圖所示。
可見環(huán)境色對物體的視覺影響還是相當明顯。再如下圖中，當模特處于一個紅色空間時，受到環(huán)境中紅色漫射光的影響，模特也明顯偏向紅色，這時我們就說環(huán)境光影響了這位模特的「色彩平衡」，關于「色彩平衡」在后面還會細講。
當然現(xiàn)實是復雜的，其實還有大量物體會同時存在鏡面反射光和漫射光，誰的強度大誰就更突出，例如起風時的水面，就不全是鏡面反射，還有漫反射，這里就不再深究。
小結
以上提到的「照射光」和「環(huán)境光」便是設計中常用的2大光源類型，這2類往往是同時存在，一般照射光會直接影響物體的明暗結構，而環(huán)境光則影響物體的色彩平衡及反光。
只有把這些光影都表現(xiàn)清楚，畫面才更有代入感。其中對于照射光的理解，絕不僅僅是考慮直射或散射這么簡單，還需分析照射方向、照射角度、照射形狀、光源距離、光源強度、光源軟硬、光源大小、光源顏色等因素，待會會針對這些因素展開講解。
前面介紹了光源類型，主要讓大家對「光」有個整體認知，內容偏科普，屬于「光影」的理論基礎，現(xiàn)在開始講「影」，這塊內容更偏實戰(zhàn)運用，教大家如何在設計中準確表達光影。本文的「影」涵蓋兩塊內容：物體的明暗和投影，其中物體是泛指，包含電商常用的兩大元素：人物和產品。
先說物體明暗，當光源發(fā)出的光線射向物體時，由于光反射，物體會有對應的明暗變化，記得在高中學習素描時，老師就曾提過光影的「五大調」，這正是人們對物體明暗關系的理論化總結。
但現(xiàn)實世界卻要復雜的多，因為物體光影還與材質密切相關，不同材質的明暗關系截然不同，所以決不能撇開材質談明暗，而設計中常用材質有三大類：漫反射材質、鏡面反射材質和透明/半透明材質。
不管現(xiàn)實世界還是電商視覺，漫反射材質都是最常見的材質，因為這類材質的光影最有規(guī)律也最有代表性，明暗關系也簡單很多，剛剛說的「素描五大調」就是針對漫反射材質，那我們就從這類材質入手，詳細講講漫反射的光影到底如何呈現(xiàn)。
「漫反射材質」是指表面產生漫反射光的材質，日常生活中，漫反射材質（以下簡稱「漫射材質」）的物體占據(jù)大多數(shù)，像棉布、啞光紙、啞光塑料甚至人類肌膚等等都屬于漫射材質。
而我們在刻畫漫射材質的物體明暗時，需遵循3點原則：近亮遠暗、先整體再局部以及細節(jié)刻畫。
近亮遠暗
對于漫射材質，首先一個大原則就是「近亮遠暗」：
以畫面的主光源（照射光）為圓心，物體距離光源越近會越亮，越遠則越暗。
對單個物體來說，距離近的就是亮面（受光面），而距離遠的是暗面（背光面），如下圖所示。
在很多攝影或設計作品中，能看到不管人物還是產品，都會遵循這一原則：距離主光源越遠則越暗。
先整體再局部
在「近亮遠暗」的大原則下，先確定物體的整體光影，表現(xiàn)三大面（亮面、灰面、暗面），其本質就是在固有色（物體在白色光下所呈現(xiàn)的色彩）的基礎上進行深淺色調的變化。
然后再添加物體的局部光影，這個局部主要針對有塊面的物體（立方體），「局部光影」意味著亮面和灰面也要分別遵循「近亮遠暗」原則（由于暗面是背光，不受主光源影響，所以不在遵循范圍內），這樣光影才會更有層次。而沒有明顯塊面的曲面物體（球體）則把握好整體光影即可，或許聽著有些復雜，下面通過圖例強化理解。
細節(jié)刻畫
最后是刻畫光影細節(jié)，這里列出2個常見細節(jié)，這些細節(jié)雖不影響整體明暗，但會讓物體光影更加細膩和真實，屬于「加分項」。
物體表面最亮的地方就是高光，高光其實不是光，而是直接反射主光源的地方，如果要給漫射材質的球體添加高光，那在亮面添加一個羽化的圓斑即可。
往往越光滑的物體高光就越清晰。但對漫射材質而言，高光不會很清晰，不過模糊程度要看物體的固有色以及粗糙度，粗糙度越大的物體高光越模糊。另外高光的外形還和物體的本身結構有關。
在表現(xiàn)高光時，還有一塊高光區(qū)也經常被刻畫出來，那就是塊面物體的「倒角高光」。
「倒角」其實是個工業(yè)設計術語，三維設計也常提到，一般塊面物體的棱角通常會做些圓滑過渡，這種過渡結構就是倒角，有了倒角，轉折才不會「鋒利」，這時若有光線照射到表面，倒角處便會形成高光線。
一般亮面和灰面轉折處的倒角高光最亮，而灰面和暗面的轉折處最暗，核心還是遵循「近亮遠暗」原則。
電商設計中，若給塊面物體加上「倒角高光」，細節(jié)無疑更豐富，也更耐看。仔細看下圖，在塊面轉折處都有明顯的亮線勾勒，雖然不是很起眼，但這就是常說的「設計細節(jié)」。
當2個物體相鄰時，它們相鄰的那面會有「重合陰影區(qū)」，并且物體離的越近，陰影會越深。這是因為相鄰空間隨著物體間距越小，接受的環(huán)境光也會越來越少。
「重合陰影」是一個非常容易被大家忽略的設計細節(jié)，但若表現(xiàn)得當，就能提升作品的精細度，如下圖所示。
說完漫射物體的明暗刻畫原則，接下來講講周圍環(huán)境對物體的影響，還記得剛剛講過的環(huán)境光嗎？環(huán)境中除了主光源外的一切光線都是環(huán)境光。
而「環(huán)境色」則是環(huán)境光中的一種情形：就是當周圍環(huán)境有明確色彩時，這時產生的環(huán)境光會給物體帶來怎樣的影響？主要影響其實有2方面：物體的色彩平衡和反光，實際表現(xiàn)時也是從這兩點入手。
色彩平衡
「色彩平衡」是PS中的一項調色工具，主要是調節(jié)畫面的整體色彩。既可校正畫面的偏色，使色彩舒適平衡；也可反其道而行之，根據(jù)場景和需求讓畫面有意偏向某種顏色。例如下圖中的人物，受環(huán)境色影響就明顯偏向黃色。
所以當物體處在一個有明確色彩的環(huán)境時，受環(huán)境四周的漫射光影響，整個物體都會偏向環(huán)境色，注意由于暗面受到的影響更大，因此暗面的偏色現(xiàn)象也會更加明顯。總之物體偏色程度是和其固有色、材質及漫射光強度都息息相關。
反光
一般物體都是放置在地面上，而地面作為環(huán)境的一部分也會出現(xiàn)漫射光，這部分光線射到物體上就會形成一層微弱的亮面，這就是「反光」。
其中物體表面離地面越近的地方反光就越強，一般來說反光最強處就是物體暗面最靠近地面的地方。但不管如何反光都不宜過亮，更不能超過物體亮面。
上圖是環(huán)境為白色的情形，而當環(huán)境有明確色彩時，這時反光面就應呈現(xiàn)環(huán)境色，如下圖所示，物體的反光都是淺藍色。
另外能產生「反光」的不單單是地面，其實只要離物體較近且能反射光線的面都能讓物體產生「反光」。
例如下圖中，就能明顯看到白色瓶子的右側有一層綠色「反光」，這是因為旁邊的綠色外盒反射出的綠色光線射在了瓶身表面。
再如戶外拍攝人像時，有時為了不讓暗部過暗，往往會在旁邊添上一塊「反光板」，這個反光板所起作用就是讓臉部的背光面產生反光，以達到提亮暗部的目的。
小結
綜上所述，周圍環(huán)境的漫射光影響著物體的色彩平衡；而地面（也可是離物體較近的面）的漫射光則為物體暗面添加了反光。
為何要單獨講解環(huán)境色影響？因為現(xiàn)在很多Banner都是在一個有色背景中添加人物或產品，其實就可理解成是將物體放入一個環(huán)境色中，這時若想和背景自然融合，就需要它們的色彩平衡及反光都偏向背景色，不然整體就會失真。
總之調節(jié)「色彩平衡」能讓物體融進有色背景中；而添加「反光」可使物體更加通透，體積感也更強，下面展示2個融合不錯的案例。
在實戰(zhàn)案例中，我們會給2款產品分別添加一個藍色背景，然后用 「明暗原則」及「環(huán)境色影響」中提到的方法給產品加上光影，并將它們融進背景中（由于投影在后面才會提到，所以當前為保畫面完整性，關于投影部分只先添加，但不展開細講）。因為物體的明暗、投影和光源屬性密切相關，因此這里先設定主光源來自畫面左上方、強度中等、軟硬適中、白光，下面看具體如何呈現(xiàn)。
在上述案例中，我們事先給主光源做了一個設定，為何要這么做呢？因為主光源的很多因素都直接決定了物體會呈現(xiàn)怎樣的光影，特別當畫面有多個物體時，只有確定了光才能使它們「光影統(tǒng)一」。
例如剛剛通過左上角的主光源能判斷畫面屬于側光，那產品也是對應的側光影，如果位置改變那光影也將發(fā)生改變，那光源的眾多因素究竟會讓物體產生哪些不同？下面一一細說。
照射方向
先說光源的照射方向，主要會影響物體的「明暗配比」，隨著方向不同，物體明暗也在發(fā)生微妙的變化，同時還會影響畫面的情感表達，所以照射方向是我們首先就要確定的因素，一般方向有7種。
而在實際運用時，常用方向是4種：前側光、側光、側逆光、逆光，這4種我們分成2組來講。（其他方向由于使用較少，就不展開）
前側光/側光。當光源的照射方向和視線方向成30°-60°夾角時稱為前側光；而當夾角成90°時則為側光。如圖所示，前側光一般明多暗少；側光則是明暗對半。
下面再看產品在前側光及側光下的光影呈現(xiàn)，主要區(qū)別在于明暗比例的變化，但變化很微妙，區(qū)分沒有那么明顯。這里我是用PS對產品進行的光影調整，因為日常工作中，PS處理光影才是大家的常用方法。
前側光及側光是電商設計中最常用的布光方式，這樣不管人物還是產品，明暗比例都比較適中，既能保證物體的亮度，也能很好的凸顯物體形態(tài)和質感，所以大量Banner的主體展示都會采用這種布光方式，下面看案例。
側逆光/逆光。當光源的照射方向和視線方向成120°-150°夾角時稱為側逆光；而當夾角成180°時則為逆光。如圖所示，側逆光和前側光剛好相反，物體是明少暗多；而逆光時的物體則幾乎全是暗面。總體來說，不管側逆光還是逆光，物體都以暗調為主。
再看看產品在側逆光及逆光下的光影該如何處理，雖然產品看著有些灰暗，但場景卻頗有氛圍和調性。
這也是一組常見的布光方式，和前測光/側光主要凸顯物體的立體感不同，側逆光及逆光主要是營造獨特的場景氛圍。
其中要特別注意物體背光面的暗調程度，根據(jù)需求提亮或壓暗，但多數(shù)時候都不會調的太暗，還是會保留物體該有的一切細節(jié)，避免色調過深而丟失了暗部層次，如下圖所示，元素的背光面依然都清晰可見。
逆光其實很有趣，當光照強烈、光質偏硬時，物體邊緣就會出現(xiàn)一圈非常明顯的高光，高光顏色和光源顏色一致，這就是「輪廓光」。光照強度越大、光質越硬，輪廓光就越明顯。
輪廓光一直都是攝影師的最愛之一，如圖所示，它能勾出人物輪廓，進而分離人物和背景，讓影調富有變化，提升畫面層次和細節(jié)。
在電商設計中也同樣常見，例如下圖中，仔細觀察人物和產品的邊緣，有些地方會有一層非常高亮的「輪廓光」，這處光影細節(jié)使畫面更具形式感和設計感。
還有一種情形也頗有藝術感，如果物體完全背光，這時背景偏亮而物體正面又無光時，就會形成「剪影」效果。在攝影中這是一種很有趣的拍攝方式，如圖所示，圖中的人物剪影會給觀眾留下豐富的想象空間。
在電商設計中，剪影同樣以表現(xiàn)人物或產品輪廓為主，突出整體造型，「剪影構圖」會更強調畫面的形式感傳達。
光源強度/距離
光源強度和距離會影響物體明暗的反差大小，強度越弱或距離越遠則物體明暗反差越小；而強度越強或距離越近則明暗反差越大。
原因很好理解，先說光源強度，當光源增強時，周圍環(huán)境和物體的受光面會更亮，因此亮面和暗面的反差也會更大。還有距離同樣如此，所有人造光源的光照都有衰減性，而光源強度隨著距離拉近而升高，因而距離越近的光源，照射強度同樣增強。
需要注意，還有一類光源是自然光，自然光比較特殊，如果在室外環(huán)境下，任何時候的光照（晴天、陰天等）都不會有衰減現(xiàn)象，因為作為光源的太陽太強，距離太遠，衰減可忽略不計。
但若在室內，陰天從窗外射入的自然光則會有衰減性，因為這時的光線以散射光為主，而這類光照要弱的多，再加上窗外射到室內的輻射范圍有限，所以衰減性便會顯現(xiàn)出來，如下圖所示。
光源強度和距離對產品的明暗影響也同樣如此：左圖設定的光源強度弱、距離遠，因而產品的明暗反差小；而右圖設定的光源強度強、距離近，因而明暗反差更大。
如果選擇明暗弱反差，為避免畫面灰暗，我們需要提升畫面的曝光值，使整體明亮。
在實際運用時，明暗弱反差降低了明暗對比，人物或產品都沒有很深的陰影，整體呈現(xiàn)清晰、柔和，同時也弱化了結構和立體感，如圖所示。
而明暗強反差則讓人物或產品的明暗對比強烈，陰影明顯，質感凸顯，更強調整體結構和立體感，如圖所示。
光源軟硬
喜歡攝影的朋友對這個詞應該再熟悉不過，是指光的性質（簡稱「光質」）變化，分成硬光和軟光。
一般直射光屬于硬光，而散射光和漫射光則屬軟光。光源軟硬會影響物體的明暗過渡，硬光的光照直接，會讓物體的明暗過渡更為生硬，有明顯的陰影輪廓，突出表面結構和質感；而軟光的光照柔和，能讓物體的明暗過渡更為自然，無明顯的陰影輪廓，突出表面層次和細節(jié)。
另外在同等的光照強度下，由于軟光的光線呈分散狀，所以相比硬光，明暗反差也相對較小，如下圖所示。
下面再展示產品在硬光和軟光下的光影刻畫，明顯左圖的影調更為硬朗。
在設計時，硬光常用來表現(xiàn)人物的強勁、硬朗和力量，常用于男性、運動、健身等類目，另外也能凸顯產品的結構和造型，提升質感和立體感。
軟光則側重表現(xiàn)人物的柔美、清新和嬌嫩，常用于少女、兒童等類目；而用于產品則會讓其表面的層次細膩而豐富，更接近生活里的真實呈現(xiàn)。
光源顏色
最后是光的顏色（簡稱「光色」），光色變化會影響物體的表面顏色，由于人們對色彩的敏感度很高，所以眾多因素中，光色帶來的影響最為直觀。
一般來說，不管物體的固有色如何變化，表面呈現(xiàn)的都是光線顏色，只是明暗程度會有不同。如圖所示，當紅光照在球體上，亮面會呈現(xiàn)紅色；而綠光照射則會是綠色。
若產品被有色光照射時，受光面同樣會出現(xiàn)對應的光色，這時畫面會更生動，同時也提升了用戶的視覺印象。
在日常設計中，使用有色光算是「戲劇化用光」的一種手法，如圖所示，當畫面出現(xiàn)光色變化和鮮明對比時，畫面會更有沖擊和氛圍，也讓場景帶有強烈的情緒感。
小結
以上便是影響物體明暗的4個光源因素：照射方向、光源強度/距離、光源軟硬以及光源顏色。
通過相關案例，細心的小伙伴該會發(fā)現(xiàn)，當照射光的這些因素發(fā)生改變時，不單單是物體表面的明暗會有變化，其實投影也有明顯不同，確實物體的明暗和投影都是緊密相關，正因為投影太過重要，所以接下來單獨介紹。
前面提到本文的「影」會涵蓋兩塊內容：物體的明暗和投影。現(xiàn)在就說說投影，我們還是從最具代表性的漫射材質入手。
何為投影？簡單說就是光線照射不到的地方。它是光影表現(xiàn)中非常重要的一環(huán)，有了投影，環(huán)境中的物體才有真實感，并和環(huán)境產生呼應關系，給人帶來現(xiàn)實感。
而投影呈現(xiàn)，就屬于典型的看著簡單其實復雜的細節(jié)刻畫，新手往往覺得投影不就是添加黑色的模糊橢圓嗎，偶爾雖然可行，但這并不適用所有場景。設計師真正要做的，是能根據(jù)各類場景準確表現(xiàn)出讓人舒服的物體投影。而物體投影，又分為表面投影和地面投影，投在物體表面的是表面投影；而物體投在地面的就是地面投影。
剛剛講「照射光影響」時提過，當光源強度、軟硬等因素改變時，物體的投影也會有明顯不同，那接下來我們就看看物體投影到底受哪些因素影響？又會有哪些不同？刻畫時考慮的要素都有哪些？相信看完會刷新大家對投影的認知，原來看似簡單的投影竟藏有這么多細節(jié)！
首先要考慮投影的方向，這是大前提，它和光源位置密切相關，核心原則是投影永遠在光源相對的一面，屬于光源光線的延伸。如圖所示，當畫面有多個物體時，要確保所有影子都和光源的光線方向保持一致，若不一致畫面就有違和感。
下面看案例，注意有時畫面的光源位置并不明顯，會在畫面外，例如右圖，這時就要事先設定一個光源位置，然后確保所有物體的投影都處在光源光線的延伸線上，這樣才合情合理。
確認方向后就要開始繪制投影的輪廓，這是投影表現(xiàn)中最難的一步，很多畫面的投影看著很假往往就是輪廓出了問題，一個優(yōu)秀設計師要能準確呈現(xiàn)出物體投在地面的真實形狀，而不是所有投影都是一個圓形或矩形。那怎樣才能準確的勾出外形呢？我們需從以下3點來考慮：基本外形、發(fā)散程度和外形起伏。
基本外形
是指物體在光源照射下投在平面上的基礎形狀，關于形狀繪制有章可循，但需用到我們在高中「立體幾何」中所掌握的空間感。
總體來說，是先把光源的「位置點」和物體的各個「頂點」連成直線，再把每條直線延長至所在平面，這樣就能得到多個「交點」，最后把平面投影外圍的所有「交點」連接起來便會得到準確輪廓，如下圖所示。
上方是單個長方體的投影外形，可能這樣的簡單物體還比較好呈現(xiàn)，那復雜物體呢？其實用同樣方法即可，如下圖所示，我們先用上述方法將2個長方體的投影輪廓分別呈現(xiàn)，再合并就好。只是這時的空間更復雜，頂點也更多，我們要有足夠的眼力和耐心。
需要說明，在單一光源下，當畫面有多個物體組合出現(xiàn)時，所有物體的投影都是相加關系。即是說當多個投影有交集時，這些交集區(qū)域不會產生更深的疊加投影。
但以上只針對單一光源產生單一投影時的情況，若畫面有多個光源并讓物體產生了多個方向的投影時，此時投影便成疊加關系。
如下圖所示，示意圖和案例中都有2個主光源，因此物體產生了2個相交投影，投影的交集區(qū)域最深，而非交集區(qū)域由于光源的相互影響則會變淺。
最后通過投影基本形的繪制方法我們還能得出一個結論：影子長短和光源光線的入射角有關。入射光線和垂直地面的法線夾角就是入射角，入射角越大投影越長，入射角越小則投影越短。
準確的投影輪廓能讓產品呈現(xiàn)更真實，也更有美感，下面展示2個優(yōu)秀案例，當然這些的前提是要光源為硬光，只有硬光才會有清晰的投影輪廓。
發(fā)散程度
接著要考慮投影外形的發(fā)散程度，「發(fā)散」是說投影輪廓離物體越遠則開口越大。所有物體的投影都有發(fā)散現(xiàn)象，只是程度不同，這和光源的面積大小及光源距離有關。
先說光源大小，光源面積越大則發(fā)散程度越小；而面積越小則發(fā)散程度越大。
再說光源距離，距離物體越遠則發(fā)散程度越小；而距離越近則發(fā)散程度越大。
例如太陽距離地球就非常遙遠，因此室外物體的影子擴散程度會非常小，像下圖中的樹木，投影都接近于平行。
其實距離遠近是光源非常重要的一個分析維度，它影響的因素有很多，不光是投影發(fā)散，還會影響投影的深淺和虛實，后面再細說。
一般在電商設計中，擴散程度較小的投影用的更多，畢竟生活中這類投影更加常見，呈現(xiàn)出來的影子也會比較自然和真實。
擴散程度較大的投影雖然用的不多，但使用恰當則會讓畫面充滿張力和氛圍，使人眼前一亮，如下圖所示。
外形起伏
投影的輪廓繪制還需考慮外形起伏，「起伏」是說投影不光要有二維平面的形狀變化，還要根據(jù)地面凹凸進行縱向的起伏調整。
其中地面凸起主要指「墻面」；而地面凹陷則指「階梯」；最后還有地面凹凸不平的「肌理」呈現(xiàn)。
當?shù)孛嫱蛊鹦纬深愃啤笁γ妗菇Y構時，如果物體的影子長度大于墻面間距時，就會出現(xiàn)「投影上墻」現(xiàn)象，這是因為墻面也會出現(xiàn)一塊光線照射不到的區(qū)域，如下圖所示。
在設計時，如果投影剛好出現(xiàn)在產品和墻面的中間區(qū)域時，最好都設計成「投影上墻」的布光效果，這樣兩個元素間（產品和墻面）就會產生呼應和聯(lián)動，整體感更強。
當?shù)孛姘枷莩霈F(xiàn)類似「階梯」結構時，如果物體的影子長度大于階梯轉角的間距時，就會出現(xiàn)「投影下沉」，如圖所示。
這里要注意一個關鍵點，上圖中的主光源出現(xiàn)在物體背面，屬于側逆光，這時「階梯結構」受光照影響也會出現(xiàn)暗面，和投影一樣，都屬于光線照不到的區(qū)域，因此在階梯轉角的背光面，不會出現(xiàn)物體投影，有時設計師會順手將物體投影疊加在轉角暗面，其實是錯誤呈現(xiàn)。
我們在觀察下生活中的真實投影，下方是我隨手拍的一張屋頂照片，上午9點，欄桿在屋頂投下了長長的影子，可以清晰看到，圈中擋板的背光面并沒有欄桿投影，就像被斷開了一樣。這是因為該區(qū)域都是背光面，不可能出現(xiàn)投影疊加的反常現(xiàn)象。
因此我們在設計時要額外注意，千萬不要犯這種「投影疊加」的常識性錯誤，仔細觀察下方作品中方塊轉角的背光面，都不會出現(xiàn)產品投影的疊加現(xiàn)象。
有時地面還會以「肌理」方式呈現(xiàn)，像常見的草地、水面、沙灘等等，如圖所示，它們的表面都是凹凸不平，因此投影外形也要根據(jù)肌理起伏進行形態(tài)變化，這樣才不會顯得投影「太假」。
雖然投影的輪廓繪制我是從3小點依次展開，但實際設計時應該一氣呵成，根據(jù)畫面的光源同時確定投影外形、發(fā)散程度以及起伏，最終是為營造出物體在環(huán)境里的真實存在感。
有了投影的「形」，現(xiàn)在我們要確定投影的「色」。很多新手在添加投影時不管周圍的環(huán)境色是什么，都會給影子直接填充黑色，最后導致影子在畫面中格格不入，像是多余的存在。
其實投影呈黑色的情況非常少見，由于受到周圍漫射光的影響，大部分時候都是跟著地面顏色走，這是總體原則。具體是會先給投影填上地面色，并將混合模式設成「正片疊底」，再將透明度調至合適數(shù)值即可。
仔細觀察下方案例，投影并非「黑色」，都是深色調的地面色，這樣投影才不至于突兀。
既然投影都是深色調的地面色，那到底「多深」才合適呢？這就需要我們調整投影的深淺。關于投影深淺，需從2個維度來調整：整體深淺和相對深淺。
整體深淺
整體深淺是指投影的整體明暗，和上節(jié)講的「物體明暗」一樣，都是受光源強度和距離的影響。其中「深淺」是說環(huán)境明暗的反差大小，因此所謂的「投影深」其實是由于環(huán)境的明暗反差很大，反之亦然。
如下圖所示，光源強度越強則投影的明暗反差越大（投影深）；而光源強度越弱則投影的明暗反差越小（投影淺），因此投影的整體深淺是相對周圍環(huán)境而言的。
另外整體深淺還受光源的距離影響，由于光線有衰減性，光源距離越近則投影的明暗反差越大，而距離越遠則投影的明暗反差越小。例如下方案例中，明顯左圖的明暗對比更強，投影更深。
相對深淺
相對深淺是指投影自身的明暗變化，即是說投影本身的明暗分布并不一致，哪怕整體很深的投影，但本身還是會有相對的深淺變化，具體則看投影所處區(qū)域的開闊程度：開闊程度越小投影越深；而開闊程度越大則投影越淺。
一般情況下，靠近物體底部的區(qū)域開闊程度最小，接受的環(huán)境光（散射光/反射光）也最少，所以投影最深；而離物體最遠的區(qū)域開闊程度最大，能接受的環(huán)境光也最多，所以投影最淺。
綜上所述，整體是遵循著「近深遠淺」的原則，投影靠近物體的區(qū)域更深；而遠離物體的區(qū)域更淺。該理論看似復雜其實簡單，下面我再用一張示意圖進一步說明。
若要表現(xiàn)投影的「相對深淺」，我們要重點呈現(xiàn)3個區(qū)域：
這3個區(qū)域會沿著投影輪廓呈直線分布，如下圖所示，在實際設計時，投影的暗角區(qū)往往是單獨的薄薄一層（作為點綴，面積不能太大），而本影區(qū)和半影區(qū)則會合并成另一層（色調由深到淺的漸變層），這樣刻畫產品投影時就是用這2個圖層來呈現(xiàn)。
再看電商作品中，物體的投影刻畫也是分2層呈現(xiàn)，注意物體底部的暗角區(qū)色調最深。
投影呈現(xiàn)的最后還要調整「虛實」：「虛」是說投影的邊緣模糊；而「實」是說投影的邊緣清晰。和深淺一樣，虛實也分整體虛實和相對虛實。
整體虛實
投影的整體虛實是和光源軟硬及距離有關，先說光源軟硬，上節(jié)曾說過「光源的軟硬會影響物體的明暗過渡」，那現(xiàn)在還可加一點，光源的軟硬同時也影響著物體的投影虛實。
當光源為硬光時，光照直接，這時投影整體偏實、邊緣清晰、過渡生硬；而當光源為軟光時，光照柔和，光線分散，這時投影整體偏虛、邊緣模糊、過渡柔和。
除了光源軟硬，還有光源距離，光源距離越近則投影越虛；而距離越遠則投影越實。
這是因為光源的距離越近，相交的光線就越多，這時光線的相交區(qū)域也越大，如下圖所示，這樣投影便會形成更加柔和的邊緣。
從上圖能看到，光源的距離變化對物體的光影影響很大，不但影響了投影虛實，同時還決定了投影的擴散程度和整體深淺，這和我們之前講的一致。
一句話總結：光源的距離越近，投影的擴散程度越大、明暗反差也越大、邊緣則越模糊；而光源的距離越遠，投影的擴散程度越小、明暗反差也越小、邊緣則越清晰。
在實際運用時，「實影」會讓產品的明暗過渡生硬，暗部細節(jié)缺失，對投影的輪廓要求也高，總體較難掌握，因此使用相對較少。但「實影」卻有著更強的表現(xiàn)力和沖擊力，形式更加鮮明，富有張力。
而「虛影」則用的更多，它讓物體呈現(xiàn)的更加細膩和自然，由于投影的邊緣模糊，所以對輪廓要求也低，無需非常精準，哪怕結構復雜的物體，也無需勾勒出具體形狀，因此若對投影表現(xiàn)沒有把握，可以優(yōu)先「虛影」，易操作也易出效果。例如下方案例中，不管什么樣的物體，在軟光的照射下，投影都是「模糊一片」，就算輪廓異常也不易察覺。
相對虛實
投影除了整體的虛實變化，自身也會有相應的虛實過渡，這和「相對深淺」類似，整體遵循著「近實遠虛」原則：投影離物體越近，則邊緣越清晰；若離物體越遠，則邊緣越模糊。
注意虛實過渡其實是個非常柔和的變化過程。之所以出現(xiàn)「越遠越虛」，是因為越遠的區(qū)域受到的環(huán)境光（散射光/反射光）影響越大。
當然在軟光照射下，有些畫面也會忽視投影的「近實遠虛」，將投影直接處理成整體模糊，其實也不太違和，因為「近實遠虛」算是一個非常微妙的細節(jié)呈現(xiàn)，不影響全局，但若能做到，畫面層次將更加細膩，如下圖所示。
小結
以上就是關于投影呈現(xiàn)的5大要素：投影方向、輪廓、顏色、深淺及虛實。但要注意設計不是物理學，設計師也不只是為了還原現(xiàn)實，因此很多時候不用太較真。例如有些畫面的光源并沒那么明確，這時投影有些地方刻畫的差不多即可，出現(xiàn)一點失真也沒關系，關鍵是不要讓人覺得畫面別扭和違和。
實戰(zhàn)案例
還記得前面講「明暗原則」時畫的立方體和球體嗎？下面我們用剛剛講的知識給它們逐步加上投影，物體只有同時加上明暗和投影，才算真正融進了環(huán)境里。首先還是先明確光源情況：來自畫面的左上方，強度中等，軟硬適中，白光。
在剛剛「物體明暗」的實戰(zhàn)案例中，我們曾給2款產品添過「物體明暗」和「投影」，但投影并未細講，現(xiàn)在再逐步剖析一下產品的投影刻畫，其實和剛剛講的立方體如出一轍，同樣先設定好光源：來自畫面左上方，強度較大，軟硬適中，白光。
前面展示的都是相對簡單的示意案例，現(xiàn)在將以2款產品作為主視覺，分別用側光和逆光來設計2張不同風格的Banner，通過完整案例讓大家了解兩種布光方式的不同以及物體對應的光影刻畫。
通過2個綜合案例，大家能看到不同光源所帶來的感受也會不同：側光使物體呈現(xiàn)的更加真實和立體；而逆光則營造出一種獨特的場景氛圍，因此我們要根據(jù)需求選擇合適布光。
另外刻畫投影時需要考慮的因素也有很多，例如影子的輪廓、深淺及虛實等等，但不用生搬硬套，還是前面那句話：核心是不要讓人覺得別扭與違和。
又又是一篇很長的文章，信息量很大，我們圍繞「光影」依次講了光源類型、物體明暗以及物體投影，當然都是從漫反射材質入手，相對簡單也有代表性，其實常見材質中還有鏡面反射材質和透明/半透明材質，而這2類則要復雜很多，也較難呈現(xiàn)，這里就不展開。但不管材質如何變化，正如本文開篇所說，「光影統(tǒng)一」都是核心原則，什么樣的光就會得到什么樣的影，雖然聽著簡單，但當中要做的細節(jié)其實很多。
可能耐心讀完，有些小伙伴會覺得很多內容過于理論和枯燥，好像不用這么麻煩也能做出差不多的「光影」，其實這種想法還是比較淺顯的。「光影」和構圖、色彩不同，它是現(xiàn)實中客觀存在的一種現(xiàn)象，若表現(xiàn)過于感性就會導致畫面違和、不真實，所以本文的大量內容都是在理性推導后得出的結論，總之「理性學習」是培養(yǎng)「正確設計感」的必經之路。最后為方便大家梳理邏輯和內容，下面附上本文的內容結構和知識框架。
藍藍設計( m.gyxygd.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業(yè)提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務