網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框

2022-12-26 10:34:26 來(lái)源/作者: / 己有:8人學(xué)習(xí)過(guò)

本例教程源于一個(gè)國(guó)外客戶的真實(shí)安全,在此給大家分享一些作者在制作時(shí)的一些思路,思路為重點(diǎn),希望能對(duì)大家的設(shè)計(jì)有所幫助。主要思路:畫草圖,用純色塊填充草圖,加材質(zhì)做質(zhì)感,最后整理調(diào)整。

教程需要的素材鏈接:http://pan.baidu.com/s/1hqGMdKC 密碼:zhvm

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
首先我們把登陸框的藍(lán)圖畫出來(lái),下圖是對(duì)方已經(jīng)畫好的,客戶說(shuō)了想要這種形狀的。如果客戶沒(méi)有指定的話那就要自己動(dòng)手畫了。

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
草圖完成后,接下來(lái)我的操作是使用鋼筆工具勾勒出登陸框各個(gè)部分的外形,然后再用純色塊填充。在這里網(wǎng)格工具可以很好的幫助你,風(fēng)格線的間隔可以在首選項(xiàng)(首選項(xiàng)快捷鍵:CTRL+K)中設(shè)置,下圖是過(guò)程圖

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框

背景融合:

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
然后創(chuàng)建剪貼蒙版,導(dǎo)入素材圖,為底框添加紋理效果,在此過(guò)程中可以多多嘗試圖層模式,并適當(dāng)降低不透明度。

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
內(nèi)框采用同樣的方法,這時(shí)的圖層樣式就要添加內(nèi)陰影的效果了,耐心調(diào)整素材與圖層的效果。

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框

添加輸入框以及一些文字提示,輸入框的效果可以在圖層樣式設(shè)置中將陰影模式改為正常,顏色改為白色,然后適當(dāng)調(diào)整位置與大小即可。

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
制作登陸按鈕,跟底框制作道理是一樣的。

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框
整體修飾
大體效果已經(jīng)完成,最后我們?cè)僮鲆恍┦瘴补ぷ鳌1热缯f(shuō)我在登陸框上部加了幾個(gè)小螺絲,頁(yè)面的上下加了邊框效果,當(dāng)然這只是我的做法,你也可以添加其他的效果。

網(wǎng)頁(yè)設(shè)計(jì),設(shè)計(jì)金屬質(zhì)感游戲主題登陸框