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

轉(zhuǎn)載無限歡迎，但請注明「作者」和「原文地址」。轉(zhuǎn)載請?jiān)谖闹斜Ａ舸硕?，感謝您對作者版權(quán)的尊重。

一、談「影」先談「光」

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

1. 光的基礎(chǔ)邏輯

當(dāng)光射在一件物體上時，會產(chǎn)生亮面、暗面以及投影。但我們細(xì)心觀察還可發(fā)現(xiàn)物體會受到來自其他物體的反射光。

（光的基礎(chǔ)邏輯）

2. 關(guān)于光源色、固有色與環(huán)境色

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

3. 光源的游戲

當(dāng)我們在做設(shè)計(jì)、繪畫、攝影等等的時候，靈活運(yùn)用各種光、各種角度，就能營造出完全不同的氛圍。好的投影效果，避不開好的打光水平。

我在這隨意截取了幾個蘋果官網(wǎng)的產(chǎn)品展示效果，供大家參考。

（蘋果官網(wǎng)產(chǎn)品展示效果）

4. 物體材質(zhì)

（隨手拍）

物體材質(zhì)是非常重要的一個屬性，不同材質(zhì)會對光產(chǎn)生不同的反射。

如上圖隨手拍中，我們能看出鼠標(biāo)表面是非常光滑的，因?yàn)樗鼘猱a(chǎn)生了較明顯的鏡面反射。而紙巾就看不到明顯的反射光線，我能推測這個物體表面是比較「粗糙不平」的。而根據(jù)物體體積、材料等屬性不同，陰影也會產(chǎn)生巨大差別。

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

（Shadowmatic 游戲界面）

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

二、模擬真實(shí)的投影

by Ollin：https://dribbble.com

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

by Soda：https://dribbble.com

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

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

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

三、抽象的陰影效果

by Yoga Perdana：https://dribbble.com

這是個 logo 設(shè)計(jì)。這個設(shè)計(jì)風(fēng)格已經(jīng)成為了這位設(shè)計(jì)師的招牌風(fēng)格。使用輕微變化的色彩拉開層級關(guān)系，用形狀勾勒陰影而不是普通的軟陰影。

by zldesign：https://dribbble.com

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

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

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

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

（1. 運(yùn)用好等高線）

（2. 運(yùn)用固有色）

（3. 多疊幾層陰影（因?yàn)檎鎸?shí)的陰影大多都有許多層））

（4. 運(yùn)用形狀羽化（可靈活再編輯形狀））

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

最后因?yàn)楸救酥R有限，無法從 3D 角度深入談光影及 3D 軟件技巧。但希望本文能對想要優(yōu)化 UI 投影表現(xiàn)的朋友有所幫助。謝謝~

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

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

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

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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