球體完全攻略–PhotoShop製作立體球

設計 06-28

首先，雖然這篇文章叫球體完全攻略，但實際上是講解UI設計的基礎方法，球體是這樣做，其它的東西也是用相同或者相似的方法來完成的。

就想初學素描時先練習畫球一樣，練習製作球體也是UI設計入門的好辦法。

本文就是詳細的講解這些球是怎麼怎麼做出來的。

再此之前先來說說一些[原理]上的東西：

光影是立體效果根本

要在平面上展現立體感，就是要構造出符合現實的明暗對比效果，也就是光影效果，有了高光和陰影就有了立體感。

簡單來說就是根據光源方向，把物體分為亮一點的明部和暗一點的暗部，在此基礎上再增加效果。

1.用高光加強明部

2.做出明暗分割線（根據物體形狀來做，能突出表現物體形狀）

3.用暗部使用反光增加立體感

4.加上陰影增加空間感

需要注意的是暗部的反光，沒有美術基礎的初學者往往會忽略反光，反光是光源打在物體所在地面再反射到物體上的光，對體現物體立體感非常重要。

另外陰影中根據物體材質（比如玻璃）還可能會有物體反射或投射到陰影的光。

光的方向也是很重要的，製作立體效果的技巧就是想像光從哪裡來，由於製作球體比較簡單，不需要透視技巧，憑想像就行了。

光的方向

具體製作

啰嗦了這麼多，還是具體製作來的實際，製作球體一般有2種方法：

1.層疊法、2.純樣式法。

「層疊法」就是通過不同的圖層，先是底圓的圖層，再做成陰影的圖層，再做高光的圖層，最後疊起來，用圖層混合模式（疊加、柔光、變暗）和透明度，疊出最後的效果。這是使用PS製作圖形最常用的方法。

動不動就要十幾個圖層製作的球體

這個方法的優點在於思路清晰（一層層疊起來就好了）、效果好（層多好表現細節）、自由度高（修改容易）、方便縮放。

但是也有缺點，就是麻煩，一層層的調整非常累，所以就有了第二種方法：「純樣式法」，僅僅用圖層樣式來製作完整的圖形，用的時候畫出一個圓直接應用樣式就行了，非常方便快捷，而且也能做出驚人的效果：

純樣式法製作的球體

但是純樣式法最大的問題是製作起來需要對各種圖層混合選項（斜面與浮雕、內發光、外發光）非常的了解，並且調整參數很複雜，很抽象，不像用層疊法那麼直觀。通過下面的具體製作你就會明白了：

層疊法具體製作

這是本文封面的球，它就是層疊法製作的，完成最終效果時共用了14個圖層，這還不算製作過程中合并的圖層。

上圖就是這個球體的主要圖層的拆分，底圓（包括質感）、反光、高光、明暗分界、陰影，製作的思路就是分別作出這5部分。

方法示例：

這裡給初學者推薦一個視頻:【10分鐘UI設計】立體物體繪製基礎理論：光源、高光、反光與陰影裡面有很多基本技巧。太基礎的這裡我就不說了，因為本文末尾有PSD源文件，看源文件更容易理解。

值得注意的地方：

色彩與明暗分離

有些人總喜歡把高光圖層帶上顏色，比如一個紅色的球，它高光設置成高亮度的紅色，因為真實環境下的光是這樣的。但是啊，這樣做之後要把球換個顏色時就麻煩了，重新調整各個圖層的顏色。所以我強烈建議：高光、反光、陰影一定要用純白色黑色加上透明度來表現，顏色用單獨的圖層，通過圖層混合模式（疊加、柔光、變暗）來模擬光的混色，這樣不僅方便調色，而且方便圖層再次利用。

使用用易調整的方法

製作一個作品不是一蹴而就的，不斷調整和修改是來以避免的。所以為了方便修改（放大縮小、更改顏色）盡量用一些方便調整的方法，比如智能對象+智能濾鏡的組合能隨時調整濾鏡效果，而普通濾鏡使用後就除了返回歷史記錄就無法修改了。還有使用「挖空」和「剪切蒙版」代替圖層蒙版等等。

純樣式法具體製作

純樣式法也被稱為 One layer （單圖層），用的是PS中強大的圖層樣式功能，要點是斜面與浮雕這個最複雜的圖層效果和等高線（輪廓線）尤其是等高線。

等高線是個很強大、自由的東西，如果能隨心所欲運行等高線，幾乎能製作一切對稱的圖形。PS里的等高線是控制「值」分布的工具，比如控制透明度的分布（發光、陰影中的等高線），而在斜面與浮雕->等高線(不是浮雕里那個光澤等高線)，是控制浮雕深淺高度效果的，下面2張圖能讓你秒懂等高線：

GIF/58K