全面系統！GUI設計中如何做出有格調的投影？

@洪涵滴滴?：本文記錄了我對 GUI 設計中陰影效果的一些思考。從「光」出發，記錄了運用好「光源」的幾個點。然后選取了幾個優秀作品介紹「真實」與「夸張」的陰影設計效果。最后分享了我自己在設計投影時的幾個 PS 技法，希望對大家有所幫助。

轉載無限歡迎，但請注明「作者」和「原文地址」。轉載請在文中保留此段，感謝您對作者版權的尊重。

一、談「影」先談「光」

有光才有影。如果理解了光與光對物體的作用，相信就會比較好理解各種陰影的形成了。因此我想先和大家聊聊光~

1. 光的基礎邏輯

當光射在一件物體上時，會產生亮面、暗面以及投影。但我們細心觀察還可發現物體會受到來自其他物體的反射光。

（光的基礎邏輯）

2. 關于光源色、固有色與環境色

• 光源色是指射在物體上的光的顏色；
• 固有色指物體本身的顏色（當然我們所看到的所謂「物體顏色」是由它反射的光決定的←好像是初中科學的內容，跪）；
• 環境色是一個物體受到周圍物體反射的顏色影響所引起的物體固有色的變化。

3. 光源的游戲

當我們在做設計、繪畫、攝影等等的時候，靈活運用各種光、各種角度，就能營造出完全不同的氛圍。好的投影效果，避不開好的打光水平。

我在這隨意截取了幾個蘋果官網的產品展示效果，供大家參考。

（蘋果官網產品展示效果）

4. 物體材質

（隨手拍）

物體材質是非常重要的一個屬性，不同材質會對光產生不同的反射。

如上圖隨手拍中，我們能看出鼠標表面是非常光滑的，因為它對光產生了較明顯的鏡面反射。而紙巾就看不到明顯的反射光線，我能推測這個物體表面是比較「粗糙不平」的。而根據物體體積、材料等屬性不同，陰影也會產生巨大差別。

在這推薦個手機游戲 Shadowmatic，你能看到非常多的材料在光下的反射效果。當然，游戲畫面和可玩性都做得非常出色~

（Shadowmatic 游戲界面）

最后我想說個「禁忌」：不要用純黑色做物體投影（除非要做特殊的藝術效果）。

二、模擬真實的投影

by Ollin：https://dribbble.com

作者用 3D 軟件精彩的表現了各種材質以及色彩效果。金屬的光澤、帆布的紋理、羽毛的輕盈以及細膩的光影表現，看著這樣的圖標就是種享受啊

by Soda：https://dribbble.com

雖然只是用了純白的背景，但通過圖標下的陰影我們卻能輕松想象出這枚圖標所在的空間關系，這也是好的投影的作用：描述空間。

by Studio–JQ：https://dribbble.com

這樣的效果圖最近非常常見，厚重陰影效果，將中間的作品迅速「抬起」，我們甚至可以想象這張圖是由攝影師從上往下拍攝的：準備好背景，將光打在偏右上方，將海報墊高，嗯……大概就是這樣。

三、抽象的陰影效果

by Yoga Perdana：https://dribbble.com

這是個 logo 設計。這個設計風格已經成為了這位設計師的招牌風格。使用輕微變化的色彩拉開層級關系，用形狀勾勒陰影而不是普通的軟陰影。

by zldesign：https://dribbble.com

這種大角度的陰影也不錯呢~夸張但是足夠吸引人。

by 不要臉の俺様（●＾3＾●）：http://hindydesign.com

這是我自己隨意做的一個腦洞。角色的造型本身就設計得非常卡通，于是在做投影的時候想著干脆用面來表現得了。做完感覺效果還不錯，還能突出角色，于是就這么完成了。

四、我的幾個 PS 投影技巧，建議視情況合理疊加運用

（1. 運用好等高線）

（2. 運用固有色）

（3. 多疊幾層陰影（因為真實的陰影大多都有許多層））

（4. 運用形狀羽化（可靈活再編輯形狀））

（5. 模糊效果（記得將圖層轉為智能對象方便再編輯））

最后因為本人知識有限，無法從 3D 角度深入談光影及 3D 軟件技巧。但希望本文能對想要優化 UI 投影表現的朋友有所幫助。謝謝~

歡迎關注作者的微信公眾號「UIcircle」 : )

「如何做出最近超火的彌散陰影？」

1. 簡易版：《PS教程！簡單3步教你快速畫出時尚漂亮的彌散陰影》
2. 進階版：《超贊！一份簡單易上手的青春彌散陰影修煉手冊》

【優設網 原創文章 投稿郵箱：2650232288@qq.com】

================關于優設網================
"優設網uisdc.com"是國內人氣最高的網頁設計師學習平臺，專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書：史上最全的設計師圖書導航：http://hao.uisdc.com/book/。
設計微博：擁有粉絲量160萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com