PS設(shè)計立體感十足的球狀軟件圖標(biāo)
- 2020-01-22 08:32:58
- 來源/作者:互聯(lián)網(wǎng)/佚名
- 己被圍觀次
因?yàn)樽髡?Webshocker 是通過3dsmax + photoshop設(shè)計的這個作品,所以在光影的變化上是的非常微妙和細(xì)致。而我通過photoshop臨摹這個作品,主要也是為了訓(xùn)練自己,在設(shè)計過程中對光影的把控
最終效果

新建畫布:寬:800px 高:600px 分辨率:150像素/英寸。
一、建立背景層
1、填充背景色:點(diǎn)擊拾色器 輸入色值:#dad9de。

2、確定主光源:點(diǎn)擊拾色器 輸入色值:#ffffff,選擇畫筆工具 柔邊畫筆 大小700xp,在畫面右上角拍一下,給背景確定一個主光源。

3、賦予主光源顏色:添加圖層樣式:顏色疊加 混合模式:正常 輸入色值:#f5f9ff 圖層模式:柔光。這樣基本上背景和主要的光源就確定了。

二、繪制精靈球底框
1、繪制底框:點(diǎn)擊拾色器 輸入色值:#281f20 創(chuàng)建圓角矩形:寬478px; 高478px; 圓角:120px。

2、底框賦予厚度,制造體積感:添加圖層樣式:斜面浮雕 樣式:內(nèi)斜面 方法:平滑 大小:4px 軟化:4px 角度:60° 高度:16° 高光:#8bb5dc 陰影:#000000。

3、給底框賦予磨砂質(zhì)感:將底框復(fù)制一層,命名為:底框-質(zhì)感 濾鏡雜色:1.5 平均/單色 高斯模糊:0.5。

4、底框右側(cè)打光:之前我們在做背景的時候,確定了一個主光源,所以我們在把底框的質(zhì)感做好以后,因?yàn)槭艿焦獾挠绊懀詰?yīng)該在右側(cè)用柔邊畫筆打一個光,增加變化。
新建圖層:側(cè)邊光 點(diǎn)擊拾色器 輸入色值:#ffffff;選擇畫筆工具 柔邊畫筆 大小500xp左右,在底框右側(cè)拍一下 改圖層模式為:柔光;最后右鍵 [側(cè)邊光] 圖層,創(chuàng)建剪貼蒙版,將光線限制在底框范圍內(nèi),這樣就簡單的給底框右側(cè)打上了一層光。

5、賦予側(cè)邊光顏色:因?yàn)橹霸O(shè)定的是偏藍(lán)的冷光源,所以在這里也會有所影響。添加圖層樣式:顏色疊加 混合模式:柔光 輸入色值:#dfebfe 圖層模式:柔光。這樣精靈球的底框基本上就已經(jīng)完成了~!接下來,我們就開始繪制球體的部分。

三、繪制精靈球按鈕
1、繪制按鈕圓形底座:點(diǎn)擊拾色器 輸入色值:#d7d7d7 創(chuàng)建橢圓:寬:96px; 高:96px; 對齊中心;賦予按鈕圓形底座光感,制造體積感:
添加圖層樣式:斜面浮雕 樣式:內(nèi)斜面 方法:平滑 大小:1px 軟化:1px 角度:60° 高度:16° 高光:#ffffff 陰影:#5b5353。

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

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

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

5、繪制中心按鈕:將 [大圓] 復(fù)制一層,Ctrl+t自由變換,將圓縮小到寬:52px; 高:52px左右,中心對齊即可。右鍵清除圖層樣式,重新添加圖層樣式,樣式的使用原理和 [大圓] 圖層差不多,所以我就不多解釋,直接上圖。
添加圖層樣式:斜面浮雕 樣式:內(nèi)斜面 方法:平滑 大小:1px 軟化:2px 角度:60° 高度:54° 高光:#ffffff 陰影:#5b5353。

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

7、添加圖層樣式:投影 模式:正片疊底 顏色:#88838a 角度:60° 距離:3px 擴(kuò)展:1px大小:3px 【提示:在一個圖層上添加多個投影的功能,只有Photoshop CC及以上版本才有。CS6及以下的版本均沒有這個功能。】。

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

四、繪制精靈球主體
1、造型部分:由于我是通過photoshop還原作品,所以我主要還是運(yùn)用到了布爾運(yùn)算。如果這塊不會的同學(xué)就去看看布爾運(yùn)算基礎(chǔ)視頻:【PS基礎(chǔ)!NO.7 布爾運(yùn)算】
從圖中可以看出,精靈球主體部分其實(shí)就是一個大圓加上一個小圓,通過 [布爾運(yùn)算-減去頂層形狀]得到一個同心圓,然后再用一個很扁的橢圓和同心圓進(jìn)行第二次 [布爾運(yùn)算-減去頂層形狀] ,得到的一個上下分開的球體。

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

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


五、繪制球體光影
制作球體光影開始之前,先分析一下光線,從這張圖可以看出,在球體的表面基本上分布著六種光
高光:最接近主光源的顏色。
固有色(亮灰):處于亮部和暗部的過渡面,顏色最接近物體本身的顏色。
暗部:處于物體的背光部分。
反光:處于暗部,是經(jīng)過物體與環(huán)境光多次折射所產(chǎn)生的光。
體表環(huán)境光:處于物體表面, 也是物體與環(huán)境光多次折射所產(chǎn)生的光。
投影:被物體遮擋住光源后,所產(chǎn)生的影子。
六種光相互影響,構(gòu)成這個立體的球面。這些光都遵循著近大遠(yuǎn)小/近實(shí)遠(yuǎn)虛/近亮遠(yuǎn)暗的基本規(guī)則。

1、制作 [球-上半部分] 基礎(chǔ)光源:添加圖層樣式:斜面浮雕 樣式:內(nèi)斜面 方法:平滑 大小:1px 軟化:0px 角度:-120° 高度:0° 高光:#7a120f 陰影:#000000。

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

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

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

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

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

7、羽化 [下圓環(huán)-反光] 邊緣:屬性:蒙版-羽化:5px 圖層不透明度30%【和上一步一樣的原理,所以沒有圖片,自行腦補(bǔ)】
制作 [球-下半部分] 基礎(chǔ)光源:添加圖層樣式:斜面浮雕 大小:3px 軟化:1px 角度:6° 高度:0°。

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

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

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

11、制作 [球-上半部分] 高光:將 [球-上半部分] 復(fù)制一層,放在 [上圓環(huán)-反光] 的上面,右鍵清除圖層樣式,然后新添加一個樣式制作高光。添加圖層樣式:漸變疊加 模式:濾色 透明度:100% 樣式:徑向 角度:120% 縮放:126% 顏色:#ffffff ~ #fff7f8 ~ #c00e0c。

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

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

14、制作 [球-上半部分] 環(huán)境光:這個也是采用同樣的手法, 白色+柔邊畫筆在環(huán)境光的位置拍一下,適當(dāng)調(diào)整好形狀以后,圖層模式改為濾色 不透明度:90% 然后用圖層樣式:疊加一個顏色#f27846。

15、如果還覺得不夠亮,就多復(fù)制兩層,我就復(fù)制了兩層,適當(dāng)?shù)恼{(diào)整不透明度,讓銜接更加柔和。到目前為止,我詳細(xì)的講解了幾個打光的常用技巧,包括一些光影的原理和作用,如果有在跟著練的同學(xué),相信已經(jīng)學(xué)會了。那么接下來我們給精靈球的下半部分的打光,我就只告訴你們那些地方需要打光,以及原因,至于具體步驟,就由你們自己動手。強(qiáng)化 [球-下半部分] 光感,增加環(huán)境光的影響。

16、添加完光影后的效果圖:你們可以自己對比一下。

六、繪制投影
1、繪制球體投影:球體投影主要有兩部分,一是球體內(nèi)鏤空的投影,用來表現(xiàn)空間,二是球體外的投影,用來表現(xiàn)體積。

2、球體外的投影:用橢圓工具畫一個差不多大小的圓,圖層模式改成柔光,然后添加羽化:13.6。

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

最終效果:

*PSjia.COM 傾力出品,轉(zhuǎn)載請注明來自PS家園網(wǎng)(www.sz-xdd.com.cn)
標(biāo)簽(TAG) 球狀 軟件圖標(biāo)








