GUI設計中如何做出有格調的投影?

分類欄目:經驗 - Photoshop教程

發布于 暫無評論

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

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

一、談「影」先談「光」

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

1. 光的基礎邏輯

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

來源自愛設計http://www.ktyijx.tw/

(光的基礎邏輯)

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

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

  • 固有色指物體本身的顏色(當然我們所看到的所謂「物體顏色」是由它反射的光決定的←好像是初中科學的內容,跪);

  • 環境色是一個物體受到周圍物體反射的顏色影響所引起的物體固有色的變化。

3. 光源的游戲

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

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

來源自愛設計http://www.ktyijx.tw/

來源自愛設計http://www.ktyijx.tw/

來源自愛設計http://www.ktyijx.tw/

來源自愛設計http://www.ktyijx.tw/

(蘋果官網產品展示效果)

4. 物體材質

來源自愛設計http://www.ktyijx.tw/

(隨手拍)

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

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

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

來源自愛設計http://www.ktyijx.tw/

來源自愛設計http://www.ktyijx.tw/

(Shadowmatic 游戲界面)

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

二、模擬真實的投影

來源自愛設計http://www.ktyijx.tw/

by Ollin:https://dribbble.com

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

來源自愛設計http://www.ktyijx.tw/

by Soda:https://dribbble.com

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

來源自愛設計http://www.ktyijx.tw/

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

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

三、抽象的陰影效果

來源自愛設計http://www.ktyijx.tw/

by Yoga Perdana:https://dribbble.com

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

來源自愛設計http://www.ktyijx.tw/

by zldesign:https://dribbble.com

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

來源自愛設計http://www.ktyijx.tw/

by 不要臉の俺様(●^3^●):http://hindydesign.com

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

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

來源自愛設計http://www.ktyijx.tw/

(1. 運用好等高線)

來源自愛設計http://www.ktyijx.tw/

(2. 運用固有色)

來源自愛設計http://www.ktyijx.tw/

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

來源自愛設計http://www.ktyijx.tw/

(4. 運用形狀羽化(可靈活再編輯形狀))

來源自愛設計http://www.ktyijx.tw/

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

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

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

來源自愛設計http://www.ktyijx.tw/