Pokemon Go最近十分流行，我們今天就來學習一下用PS設計一個寵物小精靈球主題UI圖標，教程講解十分詳細，還提供了PSD文件參考，推薦學習。

作者 Webshocker 是通過3dsmax + Photoshop設計的這個作品，所以在光影的變化上非常微妙和細致。大家通過Photoshop臨摹這個作品，可以加強自己在設計過程中對光影的把控，建議學習。

作品作者：Webshocker

教程作者：@楊洋-XHM

最終效果：

<點圖片看大圖>

PSD文件：http:///photoshop/sucai/2016/q18836.html

新建畫布：

寬：800px 高：600px 分辨率：150像素/英寸 名稱：精靈球

一、建立背景層

填充背景色：

點擊拾色器 輸入色值：#dad9de

<點圖片看大圖>

確定主光源：

點擊拾色器 輸入色值：#ffffff

選擇畫筆工具 柔邊畫筆 大小700xp，在畫面右上角拍一下，給背景確定一個主光源。

<點圖片看大圖>

賦予主光源顏色：

添加圖層樣式：顏色疊加 混合模式：正常 輸入色值：#f5f9ff 圖層模式：柔光

<點圖片看大圖>

這樣基本上背景和主要的光源就確定了。

二、繪制精靈球底框

繪制底框：

點擊拾色器 輸入色值：#281f20 創建圓角矩形：寬：478px； 高：478px； 圓角：120px

<點圖片看大圖>

給底框賦予厚度，制造體積感：

添加圖層樣式：斜面浮雕 樣式：內斜面 方法：平滑 大小：4px 軟化：4px 角度：60° 高度：16° 高光：#8bb5dc 陰影：#000000

<點圖片看大圖>

給底框賦予磨砂質感：

將底框復制一層，命名為：底框-質感 濾鏡雜色：1.5 平均/單色 高斯模糊：0.5

<點圖片看大圖>

底框右側打光

之前我們在做背景的時候，確定了一個主光源，所以我們在把底框的質感做好以后，因為受到光的影響，所以應該在右側用柔邊畫筆打一個光，增加變化。

新建圖層：側邊光 點擊拾色器 輸入色值：#ffffff

選擇畫筆工具 柔邊畫筆 大小500xp左右，在底框右側拍一下 改圖層模式為：柔光

最后右鍵 [側邊光] 圖層，創建一個剪貼蒙版，將光線限制在底框范圍內，這樣就簡單的給底框右側打上了一層淡淡的光。

<點圖片看大圖>

賦予側邊光顏色：因為之前設定的是偏藍的冷光源，所以在這里也會有所影響。

添加圖層樣式：顏色疊加 混合模式：柔光 輸入色值：#dfebfe 圖層模式：柔光

<點圖片看大圖>

這樣精靈球的底框基本上就已經完成了~！接下來，我們就開始繪制球體的部分。