Photoshop制作漂亮的暗紅色網(wǎng)頁(yè)框架
本教程介紹非常簡(jiǎn)潔的網(wǎng)頁(yè)制作方法。作者重點(diǎn)介紹頂部及導(dǎo)航欄的制作。打造過(guò)程:首先是渲染背景和底紋,然后再制作頂部裝飾和文字?梢愿鶕(jù)實(shí)際需要加入自己喜歡的圖案或素材。
最終效果
1、創(chuàng)建一個(gè) 1000x750像素大小的文件,雙擊背景圖層將其變?yōu)榭删庉嫷膱D層,并打開(kāi)圖層樣式>顏色疊加,用#47382e疊加。
2、打開(kāi)標(biāo)尺(視圖 > 標(biāo)尺),按下圖添加一些參考線。
3、用矩形工具創(chuàng)建一個(gè)矩形,將該圖層命名為header.
4、將前景色設(shè)為黑色,選擇橢圓工具創(chuàng)建一個(gè)陰影區(qū)域,大小要高于白色的矩形。將橢圓形圖層命名為shadow,并將其置于header圖層下面。然后打開(kāi)濾鏡>轉(zhuǎn)換智能濾鏡,之后濾鏡>模糊>高斯模糊,半徑為10像素,并把不透明度設(shè)為60%,得到下圖效果:
5、選中header圖層,雙擊打開(kāi)圖層樣式,選擇漸變疊加,按照下圖參數(shù)設(shè)置。
6、使用直線工具畫(huà)一條亮紅色直線,然后再用黑色畫(huà)另外一條直線(1像素),之后將紅線和黑線圖層編組,組命名為 vDivider。打開(kāi)圖層>圖層蒙版> 現(xiàn)實(shí)全部。使用徑向漸變工具,從黑色到白色,自上而下拉去,在組上添加漸變效果。
7、使用文字工具創(chuàng)建導(dǎo)航欄(字體白色)。然后將所有標(biāo)簽編組,命名為White Links。復(fù)制這個(gè)組,將其置于white links組下面,將字體顏色設(shè)為黑色,然后將其向上和向左移動(dòng)1像素大小的位置。這樣是為了制作3D效果。
8、按照第六步的方法制作分欄線。
9、選擇所有分欄線圖層將其編組,并命名為hDividers,然后打開(kāi)圖層>圖層蒙版>顯示全部。使用線性漸變(黑-白)在蒙版做漸變效果。
10、保存下面的紋理圖片,然后用ps打開(kāi),選擇編輯>定義圖案,將其命名為 webPattern。復(fù)制header圖層,命名為pattern。然后雙擊打開(kāi)圖層樣式,取消漸變疊加,打開(kāi)圖案疊加,選擇之前我們創(chuàng)建的webpattern圖案疊加,然在pattern圖層上添加圖層蒙版,在圖層蒙版創(chuàng)建徑向漸變效果。
11、現(xiàn)在來(lái)添加LOGO和勺子。敲入Chinavisual.com,其中Chinavisual使用粗一些的字體。然后添加圖層樣式。
12、下載勺子圖片,然后添加圖層樣式。
最終效果:
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模版,個(gè)人網(wǎng)站建設(shè)入門(mén)知識(shí)
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- 網(wǎng)頁(yè)設(shè)計(jì)的分割布局秘密
- ps cs6設(shè)計(jì)個(gè)人作品網(wǎng)頁(yè)模板教程
- ps網(wǎng)頁(yè)布局設(shè)計(jì)實(shí)例教程
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
推薦教程
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板
- Photoshop繪制好看的老式wordpress主題
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- Photoshop制作禮品店網(wǎng)站模板
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄