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

ps設(shè)計金屬質(zhì)感網(wǎng)頁界面(5)

來源:站酷 作者:石頭想飛  學(xué)習(xí):7567人次

 

本教程主要使用Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計,網(wǎng)頁的設(shè)計主要在于網(wǎng)頁布局,喜歡的朋友讓我們一起來學(xué)習(xí)吧

1. 首先給大家看下整體效果。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

2. 啟動本教程你將需要創(chuàng)建一個新文件。使用任何你想要的值,但是我建議你創(chuàng)建一個文件的最小寬度為1100*1163像素。背景填充# 252118。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

3. 原教材玩神秘沒有寫怎么做,我用我的方法做了一下,你可以復(fù)制一個剛剛做的圖層,選擇畫筆工具,大小設(shè)成1100px,硬度0%。柔光,把這個圖層透明度調(diào)到60%就ok了.

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

4. 在中間用圓角矩形畫個995*295的圓角矩形。填充#52442b.

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

5. 復(fù)制一個上面圖形,把顏色改成#e9e9e9。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

 

 

 

 

 

6. 在頁腳創(chuàng)建一個新的形狀。在這里,用來添加一些文本,填充#15120d. 寬度54.

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

7. 對第一個矩形做濾鏡--雜色--添加雜色,數(shù)量為3—10.

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

 

8. 這一步元教材說的很模糊,我是對這個矩形做的效果,新建了一個白色矩形,做的不透明度13%,用橡皮擦去掉不要的部分。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計


 

 

 

 

 

9. 在頁腳上邊的位置在創(chuàng)建一個新的矩形。在這里,用來添加一些文本,填充#15120d. 寬度252.

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

 

10. 現(xiàn)在我將創(chuàng)建筆記本螺旋。這相當(dāng)容易。你所要做的是創(chuàng)造兩個很色矩形和一個長方形矩形對你做漸變疊加。組合在一起復(fù)制多個就可以了。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

11. 輸入文本,你可以給上面的大字加下效果,下面的小字加下投影效果就好了。如圖

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

 

 

 

 

 

 

12. 用圓角工具繪制兩個按鈕,添加文本。126*34.做以下效果。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

13. 用圓角矩形工具畫一個209*223的矩形,做內(nèi)陰影和描邊效果。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

14. 用鋼筆工具繪制下面圖形,添加文本。

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

 

 

 

 

 

 

15. 在頂部的布局我將創(chuàng)建一個簡單的矩形。415*281.

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

16.做以圖層樣式

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

 

 

 

 

 

 

17. 然后,我將創(chuàng)建一個較小的形狀381*258,圖層樣式如下圖:

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

18. 我的最后一個步驟是創(chuàng)建導(dǎo)航組合布局.

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

19.最后完成的效果

Photoshop繪制金屬質(zhì)感的網(wǎng)頁界面設(shè)計

 

 

學(xué)習(xí) · 提示

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

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

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