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