當(dāng)前位置:首頁>ps實例教程>ps網(wǎng)頁設(shè)計>網(wǎng)頁模板>教程內(nèi)容

Photoshop制作漂亮的暗紅色網(wǎng)頁框架(3)

來源:未知 作者:bbs.16xx8.com 學(xué)習(xí):911人次


作者:Feizhuliuchi 作者:佚名   出處:昵圖社區(qū)

本教程介紹非常簡潔的網(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í) · 提示

  • 一定要打開PS,跟著教程做一遍,做完的圖到這交作業(yè):提交作業(yè)
  • 建議練習(xí)時,大家自己找素材,盡量不要用教程提供的素材。
  • 教程有看不懂的地方,可以到論壇發(fā)帖提問:新手求助
  • 加官方微信,隨時隨地,想學(xué)就能學(xué):ps_bbs,或掃右側(cè)二維碼!
  • 關(guān)注我們學(xué)更多,每天都有新教程:新浪微博 抖音視頻 微信小程序
- 發(fā)評論 | 交作業(yè) -
最新評論
暫無評論,交個作業(yè)支持一下吧~

關(guān)注大神微博加入>>

網(wǎng)友求助,請回答!