如何做出有逼格的投影？

作者：Hindy

原文地址：uicircle.club/a/71

轉載無限歡迎，但請註明「作者」和「原文地址」。感謝您對作者版權的尊重。

前言

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

一、談「影」先談「光」

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

1. 光的基礎邏輯

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

（光的基礎邏輯）

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

• 光源色是指射在物體上的光的顏色；

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

3. 光源的遊戲

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

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

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

4. 物體材質

（隨手拍）

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

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

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

（Shadowmatic 遊戲界面）

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

二、模擬真實的投影

by Ollin

https://dribbble.com/shots/2342674-Drill

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

by Soda

https://dribbble.com/shots/1216496-Old-Stuff

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

by Studio–JQ

https://dribbble.com/shots/2828034--Chilled-Sunday-And-Relax

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

三、抽象的陰影效果

by Yoga Perdana

https://dribbble.com/shots/2090864-Polar-Bear

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

by zldesign

https://dribbble.com/shots/2694099-Dumbbell

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

by 不要臉の俺様（●＾3＾●）

http://hindydesign.com/

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

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

（1. 運用好等高線）

（2. 運用固有色）

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

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

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

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

微信公眾號：uicircle

會同步推送文章，歡迎關注哦

推薦閱讀：