寵物小精靈，設(shè)計(jì)寵物小精靈球主題圖標(biāo)(6)

Pokemon Go最近十分流行，我們今天就來(lái)學(xué)習(xí)一下用PS設(shè)計(jì)一個(gè)寵物小精靈球主題UI圖標(biāo)，教程講解十分詳細(xì)，還提供了PSD文件參考，推薦學(xué)習(xí)。

作者 Webshocker 是通過(guò)3dsmax + Photoshop設(shè)計(jì)的這個(gè)作品，所以在光影的變化上非常微妙和細(xì)致。大家通過(guò)Photoshop臨摹這個(gè)作品，可以加強(qiáng)自己在設(shè)計(jì)過(guò)程中對(duì)光影的把控，建議學(xué)習(xí)。

作品作者：Webshocker

教程作者：@楊洋-XHM

最終效果：

<點(diǎn)圖片看大圖>theoat.com.cn

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

新建畫布：

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

一、建立背景層

填充背景色：

點(diǎn)擊拾色器 輸入色值：#dad9de

<點(diǎn)圖片看大圖>

確定主光源：

點(diǎn)擊拾色器 輸入色值：#ffffff

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

<點(diǎn)圖片看大圖>

賦予主光源顏色：

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

<點(diǎn)圖片看大圖>

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

二、繪制精靈球底框

繪制底框：

點(diǎn)擊拾色器 輸入色值：#281f20 創(chuàng)建圓角矩形：寬：478px； 高：478px； 圓角：120px

<點(diǎn)圖片看大圖>

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

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

<點(diǎn)圖片看大圖>

給底框賦予磨砂質(zhì)感：

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

<點(diǎn)圖片看大圖>

底框右側(cè)打光

之前我們?cè)谧霰尘暗臅r(shí)候，確定了一個(gè)主光源，所以我們?cè)诎训卓虻馁|(zhì)感做好以后，因?yàn)槭艿焦獾挠绊�，所以�?yīng)該在右側(cè)用柔邊畫筆打一個(gè)光，增加變化。

新建圖層：側(cè)邊光 點(diǎn)擊拾色器 輸入色值：#ffffff

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

最后右鍵 [側(cè)邊光] 圖層，創(chuàng)建一個(gè)剪貼蒙版，將光線限制在底框范圍內(nèi)，這樣就簡(jiǎn)單的給底框右側(cè)打上了一層淡淡的光。

<點(diǎn)圖片看大圖>

賦予側(cè)邊光顏色：因?yàn)橹霸O(shè)定的是偏藍(lán)的冷光源，所以在這里也會(huì)有所影響。

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

<點(diǎn)圖片看大圖>

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

三、繪制精靈球按鈕

繪制按鈕圓形底座：

點(diǎn)擊拾色器 輸入色值：#d7d7d7 創(chuàng)建橢圓：寬：96px； 高：96px； 對(duì)齊中心

賦予按鈕圓形底座光感，制造體積感：

添加圖層樣式：斜面浮雕 樣式：內(nèi)斜面 方法：平滑 大�。�1px 軟化：1px 角度：60° 高度：16° 高光：#ffffff 陰影：#5b5353

<點(diǎn)圖片看大圖>

添加圖層樣式：漸變疊加 模式：正常 樣式：線性 縮放：100% 顏色：#e3e3e3 ~ #eaebef

<點(diǎn)圖片看大圖>

添加圖層樣式：內(nèi)陰影 模式：正常 顏色：#ffffff 角度：60° 距離：1px 大�。�2px

<點(diǎn)圖片看大圖>

添加圖層樣式：投影 模式：正常 顏色：#0d0a0d 角度：60° [都不要勾選全局光] 距離：3px 大小：5px

<點(diǎn)圖片看大圖>

繪制中心按鈕：

將 [大圓] 復(fù)制一層，Ctrl+t自由變換，將圓縮小到寬：52px； 高：52px左右，中心對(duì)齊即可。右鍵清除圖層樣式，重新添加圖層樣式，樣式的使用原理和 [大圓] 圖層差不多，所以我就不多解釋，直接上圖。

添加圖層樣式：斜面浮雕 樣式：內(nèi)斜面 方法：平滑 大�。�1px 軟化：2px 角度：60° 高度：54° 高光：#ffffff 陰影：#5b5353

<點(diǎn)圖片看大圖>

添加圖層樣式：漸變疊加 模式：正常 樣式：線性 角度：-120° 縮放：100% 顏色：#e3e3e3 ~ #f5eee

<點(diǎn)圖片看大圖>

添加圖層樣式：投影 模式：正片疊底 顏色：#88838a 角度：60° 距離：3px 擴(kuò)展：1px 大�。�3px

<點(diǎn)圖片看大圖>

添加圖層樣式：投影 模式：正片疊底 顏色：#88838a 角度：60° 距離：10px 擴(kuò)展：2px 大小：15px

<點(diǎn)圖片看大圖>

現(xiàn)在按鈕的效果基本上都呈現(xiàn)出來(lái)了，這里值得一提的是，在最后給按鈕添加投影時(shí)，我添加了兩層，這是為了增加投影的層次以及空間感，算是現(xiàn)在常見的投影手法。這在后面制作投影的時(shí)候還會(huì)用到很多，要是感興趣的同學(xué)可以看看這篇文章：一份簡(jiǎn)單易上手的青春彌散陰影修煉手冊(cè)

四、繪制精靈球主體

造型部分

由于我是通過(guò)photoshop還原作品，所以我主要還是運(yùn)用到了布爾運(yùn)算。如果這塊不會(huì)的同學(xué)就去看看布爾運(yùn)算基礎(chǔ)視頻：視頻地址：http://www.bilibili.com/video/av4320215/

從圖中可以看出，精靈球主體部分其實(shí)就是一個(gè)大圓加上一個(gè)小圓，通過(guò) [布爾運(yùn)算-減去頂層形狀]得到一個(gè)同心圓，然后再用一個(gè)很扁的橢圓和同心圓進(jìn)行第二次 [布爾運(yùn)算-減去頂層形狀] ，得到的一個(gè)上下分開的球體。

<點(diǎn)圖片看大圖>

這個(gè)時(shí)候，實(shí)際上球體的路徑還是一個(gè)整體，現(xiàn)在只需通過(guò) [加錨點(diǎn)工具] ，在中間路徑上，任意打上幾個(gè)錨點(diǎn)，然后把下半部分多余的路徑刪減掉，只剩下獨(dú)立的上半部分球體。最后只需復(fù)制 [球-上半部分],然后一個(gè)垂直翻轉(zhuǎn)，就可以得到下半部分圖形，并且把上下兩部分，分離開來(lái)。

<點(diǎn)圖片看大圖>

制作上下反光

通過(guò)原作的效果圖可以發(fā)現(xiàn)，這整個(gè)畫面中最大的反光，制作方式也和上面幾乎一樣， 通過(guò) [布爾運(yùn)算-減去頂層形狀]得到一個(gè)同心圓，然后調(diào)出 [球-上半部分] 的選區(qū)，給這個(gè) [上圓環(huán)-反光] 建立一個(gè)剪貼蒙版， 最后只需復(fù)制 [ 上圓環(huán)-反光 ],然后一個(gè)垂直翻轉(zhuǎn)，就可以得到下半部分圖形。

<點(diǎn)圖片看大圖>

這樣基上球體的所有圖形需要繪制的部分，就都完成了。

效果圖：

<點(diǎn)圖片看大圖>

接下來(lái)要注意圖層蒙版的變化了~!

五、繪制球體光影

制作球體光影開始之前，先分析一下光線，從這張圖可以看出，在球體的表面基本上分布著六種光

高光：最接近主光源的顏色。固有色（亮灰）：處于亮部和暗部的過(guò)渡面，顏色最接近物體本身的顏色。暗部：處于物體的背光部分。反光：處于暗部，是經(jīng)過(guò)物體與環(huán)境光多次折射所產(chǎn)生的光。體表環(huán)境光：處于物體表面， 也是物體與環(huán)境光多次折射所產(chǎn)生的光。投影：被物體遮擋住光源后，所產(chǎn)生的影子。

六種光相互影響，構(gòu)成這個(gè)立體的球面。這些光都遵循著近大遠(yuǎn)小/近實(shí)遠(yuǎn)虛/近亮遠(yuǎn)暗的基本規(guī)則。

<點(diǎn)圖片看大圖>

原理了解清楚以后，我們接下來(lái)就直接從球體表面來(lái)給它打上光。

在光影融合部分，我運(yùn)用了大量的柔邊畫筆打光+圖層蒙版的技巧，所以不會(huì)的就看看圖層蒙版的基礎(chǔ)教程。

制作 [球-上半部分] 基礎(chǔ)光源：

添加圖層樣式：斜面浮雕 樣式：內(nèi)斜面 方法：平滑 大小：1

<點(diǎn)圖片看大圖>

添加圖層樣式：內(nèi)發(fā)光 不透明度：10 雜色：1% 顏色：#ffffff 阻塞：10 大小：27

<點(diǎn)圖片看大圖>

添加圖層樣式：內(nèi)陰影 顏色：#a50d0a 不透明度：52 角度：180 距離：8 阻塞：4 大�。�10

<點(diǎn)圖片看大圖>

添加圖層樣式：漸變疊加 模式：濾色 透明度：100% 樣式：徑向 角度：-51%縮放：150% 顏色：#780e0d ~ #ee181a

<點(diǎn)圖片看大圖>

羽化 [上圓環(huán)-反光] 邊緣：屬性：蒙版-羽化：4px 圖層不透明度27%

<點(diǎn)圖片看大圖>

添加圖層樣式：漸變疊加 模式：濾色 透明度：100% 樣式：徑向 角度：-51%縮放：86% 顏色：#透明 ~ #ffffff/60%

<點(diǎn)圖片看大圖>

羽化 [下圓環(huán)-反光] 邊緣：屬性：蒙版-羽化：5px 圖層不透明度30%

【和上一步一樣的原理，所以沒(méi)有圖片，自行腦補(bǔ)】

制作 [球-下半部分] 基礎(chǔ)光源：

添加圖層樣式：斜面浮雕 大�。�3px 軟化：1px 角度：6° 高度：0°

<點(diǎn)圖片看大圖>

添加圖層樣式：內(nèi)發(fā)光 不透明度：15 雜色：2% 顏色：#ffffff 阻塞：0 大小：7

<點(diǎn)圖片看大圖>

添加圖層樣式：漸變疊加 模式：正常 透明度：100% 樣式：徑向 角度：60%縮放：138% 顏色：#9b8f94 / 30% ~ #fcfcfc

<點(diǎn)圖片看大圖>

調(diào)整上下反光漸變過(guò)渡：

選擇 [上，下反光-圓環(huán)] 的圖層蒙版，在箭頭指地方，用柔邊畫筆輕輕的畫一下，達(dá)到隱藏的目的。這樣做，既凸顯了結(jié)構(gòu)，又能讓反光變得更加融合。

<點(diǎn)圖片看大圖>

制作 [球-上半部分] 高光：

將 [球-上半部分] 復(fù)制一層，放在 [上圓環(huán)-反光] 的上面，右鍵清除圖層樣式，然后新添加一個(gè)樣式制作高光。

添加圖層樣式：漸變疊加 模式：濾色 透明度：100% 樣式：徑向 角度：120%縮放：126% 顏色：#ffffff ~ #fff7f8 ~ #c00e0c

<點(diǎn)圖片看大圖>

因?yàn)楦吖庖刂垂獾膮^(qū)域延伸，所以我們需要調(diào)出 [上圓環(huán)-反光] 選區(qū)-選取反向，然后在到 [上半-右高光] 圖層添加圖層蒙版然后擦掉多余的部分。

<點(diǎn)圖片看大圖>

如果覺得高光不夠亮，你就用個(gè)白色的柔邊畫筆在高光的位置拍一下，然后建立個(gè)剪貼蒙版把光限制在球體的范圍內(nèi)，如果還覺得不夠亮，就多復(fù)制兩層就可以了。記得適當(dāng)?shù)恼{(diào)整不透明度，這樣更加銜接會(huì)更加的柔和。

<點(diǎn)圖片看大圖>

制作 [球-上半部分] 環(huán)境光：

這個(gè)也是采用同樣的手法， 白色+柔邊畫筆在環(huán)境光的位置拍一下，適當(dāng)調(diào)整好形狀以后，圖層模式改為濾色 不透明度：90% 然后用圖層樣式：疊加一個(gè)顏色#f27846

<點(diǎn)圖片看大圖>

如果還覺得不夠亮，就多復(fù)制兩層，我就復(fù)制了兩層，適當(dāng)?shù)恼{(diào)整不透明度，讓銜接更加柔和。

到目前為止，我詳細(xì)的講解了幾個(gè)打光的常用技巧，包括一些光影的原理和作用，如果有在跟著練的同學(xué)，相信已經(jīng)學(xué)會(huì)了。那么接下來(lái)我們給精靈球的下半部分的打光，我就只告訴你們那些地方需要打光，以及原因，至于具體步驟，就由你們自己動(dòng)手。

強(qiáng)化 [球-下半部分] 光感，增加環(huán)境光的影響：

<點(diǎn)圖片看大圖>

添加完光影后的效果圖：你們可以自己對(duì)比一下：

<點(diǎn)圖片看大圖>

最后再制作一下球體和框底的投影。

六、繪制投影

繪制球體投影：

球體的投影主要分兩部分，一部分是球體內(nèi)鏤空的投影，用來(lái)表現(xiàn)空間，另一部分是球體外的投影，用來(lái)表現(xiàn)體積。

<點(diǎn)圖片看大圖>

球體外的投影：用橢圓工具畫一個(gè)差不多大小的圓，圖層模式改成柔光，然后添加羽化：13.6。

<點(diǎn)圖片看大圖>

繪制底框投影：

整個(gè)投影一共由四個(gè)圓角矩形組成，具體的實(shí)現(xiàn)方式很簡(jiǎn)單，就是矢量圖形填色加羽化減透明，使其相互融合，這里我就不具體的一步步展開將，容你們自己去調(diào)試。

<點(diǎn)圖片看大圖>

為什么一個(gè)投影會(huì)有從藍(lán)~紫~橙~橙灰的變化？

實(shí)際上這個(gè)投影的變化，是由主光源的淺藍(lán)，融合了精靈球的紅，映射到環(huán)境周邊。投影在最右邊時(shí)，由于還未受到精靈球二次反射的紅光影響，所以依然保持了藍(lán)灰，接著投影逐步從右至左，因受到反射光影響：紅+藍(lán)=紫。直到藍(lán)光的影響越來(lái)越少，投影逐漸從紫過(guò)渡到橙再到橙灰，直到最后完全消失。這里充分把環(huán)境光的影響利用到了，所以以后我們?cè)谏婕暗焦庥埃环炼嗨伎�，這樣做出來(lái)的效果，會(huì)更加的合理，舒適。

教程的最后歡迎大家關(guān)注@楊洋-XHM 在練習(xí)過(guò)程有疑惑的地方歡迎私信楊洋老師~