ps設(shè)計(jì)網(wǎng)頁(yè)視頻游戲界面(7)

本教程主要使用Photoshop設(shè)計(jì)頹廢質(zhì)感的網(wǎng)頁(yè)視頻游戲界面，整體的制作過(guò)程非常的詳細(xì)，喜歡的朋友讓我們一起來(lái)學(xué)習(xí)吧。

先看看最終效果圖

步驟1:背景

創(chuàng)建新的文件,尺寸是1152 px x 864 px。 我們的第一步是創(chuàng)建背景為我們的接口。 這個(gè)過(guò)程只是只是嘗試紋理。 基本上,我只是把一些紋理我發(fā)現(xiàn)和試驗(yàn)它的混合模式。 我的第一次嘗試是一個(gè) 紙紋理 。

步驟2

添加一個(gè) 紙紋理 再一次,這一次改變其混合模式與繁殖。

步驟3

色相/飽和度調(diào)整圖層添加到它變黑。

步驟4

添加一個(gè) 古董書(shū)紋理 與混合模式和不透明度48%乘以。

步驟5

添加 老紙紋理 。 這一次使用混合模式和不透明度58%覆蓋。

步驟6

添加調(diào)整層黑色和白色。

步驟7

創(chuàng)建新層。 打D設(shè)置前景色和背景色為黑色和白色。 單擊過(guò)濾器> >云渲染。

步驟8

設(shè)置其混合模式為正片疊底,并減少其不透明度為8%。

步驟9

創(chuàng)建新層。 填補(bǔ)它與白色到黑色的徑向梯度。

第十步

設(shè)置其混合模式為屏幕,不透明度67%。

步驟11

添加調(diào)整層色相/飽和度。 選擇彩色化給它一個(gè)顏色。

 

步驟12

最后,添加一個(gè)漂亮的 撓金屬材質(zhì) 。 設(shè)置其混合模式為正片疊底,并減少其不透明度為20%。

步驟13:工業(yè)線

打開(kāi)繪圖軟體。 畫(huà)一個(gè)黃色的長(zhǎng)方形。

步驟14

頂部的矩形、畫(huà)一個(gè)小黑色矩形。 選擇分岔與直接選擇工具和移動(dòng)它們。

步驟15

選擇形狀和alt阻力來(lái)復(fù)制它。

步驟16

點(diǎn)擊Command / Ctrl + D重復(fù)重復(fù)過(guò)程。

步驟17

選擇所有的形狀。 點(diǎn)擊Command / Ctrl + c將它粘貼在Photoshop、命令/ Ctrl + v .選擇智能對(duì)象在粘貼對(duì)話框。

步驟18

雙擊層給打開(kāi)圖層樣式對(duì)話框。 添加圖案疊加、負(fù)載顏色紙和選擇一個(gè)骯臟的模式。

步驟19

添加矩形在頂部和底部的條紋。

一步20

后添加圖層樣式。

 

步驟21:基本窗口界面

我們將首先創(chuàng)建窗口的基地。 創(chuàng)建一個(gè)矩形形狀與顏色:# # 313029,透明度:100%,填充:50%。 后添加圖層樣式。

步驟22

層風(fēng)格我們剛剛添加太扁平。 我們將使用一個(gè)簡(jiǎn)單的技術(shù)來(lái)修復(fù)它。 在圖層樣式對(duì)話框激活圖層蒙版隱藏效果。

步驟23

添加圖層蒙板。 命令/ ctrl路徑創(chuàng)建選擇。 反向選擇按命令/ Ctrl + Shift + i .添加一個(gè)柔軟的黑暗梯度上,漆黑色的工業(yè)線隱藏的影子。

一步24

你可以看到差異之前和之后的修改在下圖的影子。

步驟25

畫(huà)出另一個(gè)矩形。 這個(gè)時(shí)間小于之前的。

一步26

添加 銹紋理 在其上。 使用圖層蒙版隱藏不需要的區(qū)域。 設(shè)置其混合模式為正片疊底,并減少其不透明度為10%。

一步27

 

創(chuàng)建新的矩形覆蓋所有的形狀。 添加小矩形內(nèi)部的形狀,將其設(shè)置為減。

一步28

重復(fù)之前的形狀。 調(diào)整內(nèi)部路徑。

一步29

后添加圖層樣式。

一步30

有太多的陰影部分的窗口上。 在圖層樣式對(duì)話框激活圖層蒙版隱藏效果。

步驟31

命令/ ctrl路徑。 反向選擇(命令/ Ctrl + Shift + I)和陰影畫(huà)在窗口的上部與灰色。

步驟32

下面,你可以看到之前和之后的差異部分隱藏的影子。

步驟33

畫(huà)一個(gè)矩形覆蓋所有的窗口界面。 設(shè)置其填充到0%,后添加圖層樣式。

 

步驟34

我們的最后一步就添加微妙突出到窗口界面。

步驟35:洞

畫(huà)一個(gè)黑眼圈,放在角落里。 添加陰影。

步驟36

用軟刷油漆一些白色的頂部的孔。

一步37

這是導(dǎo)致100%的觀點(diǎn)。

一步38

把所有的層創(chuàng)建孔到上一層組。 復(fù)制組和把它放在每個(gè)角落。

一步39:窗口標(biāo)題

在插畫(huà)家,創(chuàng)建窗口標(biāo)題形狀的一半。

一步40

右鍵單擊并選擇變換>形狀反映。 選擇軸:垂直并單擊復(fù)制。

步驟41

移動(dòng)復(fù)制形狀。

步驟42

選擇分是重疊的。 右擊并選擇加入。

一步43

粘貼到Photoshop的路徑作為一個(gè)形狀圖層。

一步44

油漆突出和影子的形狀。 你可以看到下面的進(jìn)展我。 我使用非常軟刷(硬度:0%,不透明度:5 - 10%)和大約10層。

一步45

添加游戲標(biāo)題和后添加圖層樣式。 這里使用的字體是 凱爾特加拉蒙字體第二 。

一步46:裝飾

畫(huà)一個(gè)圓角矩形左邊的接口。 使用顏色:# 605847。 添加微妙的漸變疊加從灰色變成白色。

一步47

重復(fù)之前的形狀,并調(diào)整其大小。 見(jiàn)下面的照片供參考。

 

一步48

畫(huà)出另一個(gè)矩形。 這一次使用明亮的顏色。 添加漸變疊加。 復(fù)制,并將其在較低的部分更大的矩形。

一步49

畫(huà)1 px線為其突出和陰影。 我們要把這形成一個(gè)三維形狀。 最后,你會(huì)發(fā)現(xiàn)這個(gè)小1 px細(xì)節(jié)是需要得到一個(gè)現(xiàn)實(shí)的結(jié)果。

一步50

下面畫(huà)形狀添加3 d透視到形狀。 后添加漸變疊加。

一步51

畫(huà)陰影下形成的。

一步52

下面畫(huà)形狀和完整的影子。 添加漸變疊加到形狀。

一步53

這是導(dǎo)致100%的觀點(diǎn)。

一步54

選擇所有圖層并把它放在一個(gè)組層。 復(fù)制組,水平翻轉(zhuǎn),并把它放在另一邊。

一步55:裝飾

畫(huà)形狀,如下所示。 油漆突出和影子在上面。 不要忘記添加軟陰影的形狀對(duì)界面窗口。

 

一步56

下面你將看到結(jié)果在100%的觀點(diǎn)。 重復(fù)兩次的形狀。

57步

創(chuàng)建新層根據(jù)形狀和漆黑色像素使用小軟刷。

一步58

復(fù)制所有的形狀。 水平翻轉(zhuǎn)和移動(dòng)到另一邊的接口。

一步59:添加生銹紋理

添加 銹紋理 覆蓋整個(gè)界面。 命令/ ctrl界面邊界和窗口標(biāo)題創(chuàng)建一個(gè)選擇基于他們的形狀。 添加圖層蒙版。 漆黑色標(biāo)題形狀與低透明度刷,因?yàn)槲覀儾幌肟吹教嗉y理上銹。 下面,你可以看到我創(chuàng)建的面具。

一步60

降低不透明度為15%。

步驟61:車(chē)輛預(yù)覽

創(chuàng)建一個(gè)框架在窗口界面。 這是由兩個(gè)路徑和內(nèi)在路徑設(shè)置為減。 后添加圖層樣式。

步驟62

粘貼 PNG圖像的車(chē)輛 在框架。

步驟63

后面的幀添加一個(gè)新圖層,填充灰色白色梯度。

 

步驟64

繪制一些陰影下的車(chē)輛。

步驟65:車(chē)輛數(shù)據(jù)

添加另一個(gè)框架在車(chē)下面預(yù)覽。 使用類(lèi)似技術(shù)在前面的步驟。

步驟66

添加一些信息到框架。

步驟67:研究和升級(jí)數(shù)據(jù)

畫(huà)出另一個(gè)框架,這一次更大的。

步驟68

畫(huà)一個(gè)簡(jiǎn)單的矩形在框架。 后添加圖層樣式。

 

步驟69

添加一些文本到矩形。

步驟70

復(fù)制矩形為另一個(gè)數(shù)據(jù)。 刪除圖層樣式外發(fā)光,并減少其不透明度為30%來(lái)自非活動(dòng)水平。

步驟71

復(fù)制所有的形狀來(lái)創(chuàng)建另一個(gè)數(shù)據(jù)集。

步驟72:繪圖按鈕

回到插畫(huà)家,創(chuàng)建這個(gè)形狀。

步驟73

粘貼到Photoshop的形狀作為形狀圖層。 后添加圖層樣式。

步驟74

油漆突出和影子手動(dòng)使用軟刷,硬度和不透明度0% 5 - 10%。

步驟75

重復(fù)的形狀和水平翻轉(zhuǎn)。

步驟76

畫(huà)一個(gè)淺藍(lán)色矩形和把它背后的形狀。 后添加圖層樣式。

 

步驟77

畫(huà)一些強(qiáng)調(diào)內(nèi)部的形狀。 添加按鈕的標(biāo)題。 漆光發(fā)光頂部的按鈕。

步驟78

復(fù)制按鈕,改變其標(biāo)題。

最終的圖像