Photoshop設(shè)計(jì)動(dòng)漫游戲網(wǎng)站模板(8)
新建950 x 1160 大小文件,填充背景顏色#161616,使用矩形工具制作寬900、高190的矩形,并添加如下圖層樣式
完成后的矩形效果
導(dǎo)入LOGO文件
導(dǎo)入一張光暈圖片
將圖片裁剪到適當(dāng)尺寸,放入游戲網(wǎng)站的頭部,調(diào)整圖片的不透明度和顏色,使其與整個(gè)藍(lán)色背景融合在一起
為L(zhǎng)OGO標(biāo)志添加背景邊框,并設(shè)置填充為8%
制作兩條矩形條作為導(dǎo)航按鈕的背景區(qū)域
設(shè)置頂部的矩形條圖層樣式如下
設(shè)置底部的矩形條樣式如下
為了突出立體質(zhì)感,制作一個(gè)白色矩形條,高度為其一半,設(shè)置不透明度為4%
為兩條導(dǎo)航條添加文字,并且我們用兩條1px高度的線條(一黑一白)來(lái)分割他們之前的區(qū)域
制作一個(gè)圓角矩形,使用如下樣式,當(dāng)鼠標(biāo)移動(dòng)到按鈕上時(shí)作為按鈕的背景
如下圖就是鼠標(biāo)移動(dòng)到NEWS按鈕時(shí)的效果了
制作白色矩形
添加樣式
將完成后的矩形復(fù)制一次放到底部,將游戲圖片放入兩者之間
為頂部矩形上部添加白色矩形(高度為矩形的一半),設(shè)置不透明度為 3%,產(chǎn)生質(zhì)感
添加文字與箭頭
依照上面完成的區(qū)塊樣式制作網(wǎng)站的其他區(qū)塊
放入文字與圖片
完成后的游戲網(wǎng)站的整體效果如下圖
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- Photoshop設(shè)計(jì)動(dòng)漫
- Photoshop設(shè)計(jì)模板
學(xué)習(xí) · 提示
相關(guān)教程
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)模板教程
- ps設(shè)計(jì)電影網(wǎng)站實(shí)例
- ps設(shè)計(jì)網(wǎng)頁(yè)視頻游戲界面
- ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
- 如何設(shè)計(jì)與PSD模板標(biāo)題導(dǎo)航菜單教程
- ps設(shè)計(jì)心形網(wǎng)頁(yè)模板教程
- ps設(shè)計(jì)時(shí)尚風(fēng)格數(shù)碼科技電子商務(wù)網(wǎng)站模
推薦教程
- Photoshop設(shè)計(jì)簡(jiǎn)潔的商業(yè)網(wǎng)站應(yīng)用實(shí)例
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop設(shè)計(jì)婚禮網(wǎng)站模板
- Photoshop教程:設(shè)計(jì)一個(gè)破舊的卡通網(wǎng)站布局
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- Photoshop設(shè)計(jì)藍(lán)色風(fēng)格網(wǎng)站首頁(yè)模板
- Photoshop繪制高雅清新的網(wǎng)站首頁(yè)模板
- Photoshop制作筆記本電子商務(wù)網(wǎng)站首頁(yè)模板
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- Photoshop繪制簡(jiǎn)潔的包含云朵主題的網(wǎng)頁(yè)