這樣設計光影輕擬物，想不脫穎而出都難！

還記得2019年4月上映的複仇者聯盟4麼，漫威電影宇宙的第三階段結束了，電影很精彩，但最令人震撼的是先導版的電影海報！就是那個「五彩斑斕」的黑～

從設計上看，海報的設計師是把光運用到極限了，通過逆光和環境塑造出了酷+神秘的視覺感受。光是一切視覺表現的基礎，是構圖和傳遞調性的關鍵，也是視覺表現重要的組成部分。所以今天就和大家聊聊啥樣的光是一個牛X的光以及如何塑造一個合格的光影？

光影的基本原理

常見形式1-聚光

△ 圖片來源：小米米家台燈1S

聚光是最常見光，也是在設計中用到最多的光，通常在塑造一個物體的時候就會用的到。

因為聚光的原因，場景更像個舞台，凸顯「主角」的存在。具體的原理可以根據下圖去理解。

常見形式2-自然光

自然光其實就是陽光，理論上講其實光源是太陽也是聚光，但由於光源太過於龐大，無法真正的聚焦，所以就把這種光當成一種泛光源就好。在產品設計中也會經常看到類似的光源出現，比如行為召喚按鈕：

因為不需要強有力的表現和氛圍的營造，所以通常產品設計中更需要自然光來作為核心光源，通過泛光源去統一控製產品的光影體係就好（最新發布的 Mac OS – big Sur 的整體光源同樣是自然光，下文會講到）。

常見形式3-逆光

坦誠的講逆光也是聚光的一種，隻不過由於角度特殊，呈現的視覺效果也非常不一樣，所以就單獨把逆光拿出來說一說。當畫麵需要逆光來營造氛圍的時候，隻需要在固有色上加上黑色蒙板和邊緣的高光就可以大概塑造出一個處於逆光的物體了。

小米是典型的逆光氛圍營造高手，但萬變不離其宗，依舊可以從海報裏看到相同的方法。

△ 圖片來源：小米傳播物料

光影的塑造（光影層級）

通常現實中的光源並非那麼理想，光線的複雜超出肉眼所見。所以我們在繪製的過程需要注意到，可以適當的抽象。舉個例子，自然光是普照的，所以我們抽象為四個小光源平均分布，依次打到物體上：

在他們疊加的部分可以清晰的看到，1是最重的，2其次，3再次。按照這個辦法就可以獲得光影的層級關係，在繪製輕擬態的圖標或者運營活動中更加細膩。

體積塑造+色彩對光影的影響（反光/對比光）

△ 圖片來源：09UI設計工作室-陌陌直播禮物設計

所有的光影其實都是幫助主體塑造體積感，一個合格的立體圖形必須具備：高光/過度色/明暗交界線和反光這四個基本屬性。

然後需要一點超現實主義的手法，把太陽光過濾下，從「赤橙黃綠青藍紫」的色調裏提取跟主體和諧的顏色（通常是補色），營造出介於真實與玄幻之間的美妙效果hiahia～

然後再在投影上加一點點色彩傾向，一個完美的黑八就出現啦～按照這種方法，你可以試著去嚐試更多的物體/場景。（下圖是筆者作品「插著紅旗的地球」hiahia）

光影/材質與產品設計中的層級關係

影響主體的除了光影之外就是材質了，近年來的三大巨頭apple/Microsoft/Google的設計都在材質上下足了功夫，蘋果的毛玻璃，微軟的亞克力和穀歌的「紙」。

從趨勢上看，材質的引入對產品中拉開層級關係上有巨大意義，以往的設計僅僅是通過光影和焦距來拉開關係，這兩個維度在少量的疊加界麵中還能有效果，但到了複雜的多窗口互壓互疊裏就不是那麼奏效了，所以鐵子們要善於運用材質區分產品顯示的優先級。

圖標與插圖的光影使用技巧

△ 圖片來源：Eric Hoffman – Big Sur Mac Icons

△ 圖片來源：JIAJIE – WeSing Live gift

圖標好壞除了造型之外最重要的就是質感了，通常圖標也就是4種形式（如下圖），類似蘋果的係統圖標和抖音直播間禮物的圖標都是最後一種形式。

但如果僅僅是這樣就太水了，既然都說了是幹貨預警，那就要拿出哥們看家的本領～此圖是大家關注公號後就會收到的推圖，主體就是一個POI的圖標加上微信的對話框和代表幹貨的小星星營造出的氛圍。

刨析下這個圖，三個發光體和底下的投影，通過上文的講解依次繪製完成～

之後就到了amazing的時刻了，打開photoshop找到「濾鏡-模糊畫廊-場景模糊」設置幾個key-point，調試模糊值和透明度/亮度，最終完成對光影的塑造。

借助環境塑造光影

空氣中的灰塵相信大家都不陌生，這種情況多數是一束光影從窗戶裏射入後，在光的折射下把平時看不到的灰塵統統照了個遍。

如果你是mac用戶一定熟知keynote裏的動畫效果「轟然墜落」，這個效果是在模擬物體振動後彈開周圍灰塵，非常震撼。在PPT的設計中你也可以同樣借助光和霧來營造你想要的效果，下圖是我在做工作總結的時候為了凸顯Q4工作采用的辦法。

小結一下

光影輕擬物在產品設計中的應用麵還是很廣的，比如：圖標、數據可視化、插圖等等。而在大量扁平設計時代適量使用會顯得很出彩，當然再好的教程也比不上大家多動手試試練練，所以鐵汁們行動起來咯~

原文： Nana的設計錦囊