當前位置:首頁>ps實例教程>ps網頁設計>網頁模板>教程內容

如何設計與PSD模板標題導航菜單教程(6)

來源:設計前沿網 作者:Alin翻譯  學習:6066人次

如何設計與PSD模板標題導航菜單教程
許多網站管理員/設計師專家圖標/橫幅圖形設計,但只有10%個是與設計好一個非常好看的網站模板。今天我們要學習如何設計一個模板頭有標志和導航菜單和部分內容區(qū)。一個很容易遵循在Adobe Photoshop CS3/CS5與PSD教程。
持續(xù)時間:30分鐘。
效果圖
Web Top Header
步驟1:創(chuàng)建一個新項目,分辨率為1280×1024像素,畫一條水平線帶使用矩形選框工具(m)。

Web Top Header A How to Design a Template Header with Navigation Menu Tutorial with PSD
Step 2: 現(xiàn)在打開圖層樣式>漸變疊加,設置它的顏色就像下面顯示。

Web Top Header B How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 3: 現(xiàn)在創(chuàng)建SITENAME/標志的形狀,選擇圓角矩形工具(U),半徑為10像素下面顯示.

Web Top Header C How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 4: 對于這個新的形狀,再打開圖層樣式>漸變疊加設置屬性,如下面的截圖上色。.
Web Top Header D How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 5: 要添加一些陰影,按下面的圖設置陰影屬性.

Web Top Header E How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 6: 用于顯示網站名稱,選擇圓角矩形工具(u),半徑為4像素的形狀像如下.

Web Top Header F How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 7: 下一步,我們使用矩形選框工具(M).
添加一個黑暗地帶的導航菜單邊框,如下圖所示
Web Top Header G How to Design a Template Header with Navigation Menu Tutorial with PSD
Step 8: 現(xiàn)在選擇這層并且復制粘貼(CTRL + V)和劃分導航菜單 如下.
Web Top Header H How to Design a Template Header with Navigation Menu Tutorial with PSD
Step 9:現(xiàn)在我們要添加導航菜單文本給出截圖使用文本文字工具(T).

Web Top Header I How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 10: 下一步,我們要添加子菜單條,使用圓角矩形工具(U)創(chuàng)建半徑為10像素的形狀像以下

Web Top Header j How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 11:打開其圖層樣式,單擊并選擇漸變疊加,設置如下設置.
Web Top Header k How to Design a Template Header with Navigation Menu Tutorial with PSD
Step 12:現(xiàn)在選擇自定義形狀工具(U),并作出如下圖的形狀

Web Top Header L How to Design a Template Header with Navigation Menu Tutorial with PSD
Step 13: 再次選擇“文本文字工具(T)和類型如下的文本.

Web Top Header M How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 14: 現(xiàn)在,關于我的右側漂浮,選擇圓角矩形工具(U),半徑為10像素的形狀如下喜歡.

Web Top Header N How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 15: 現(xiàn)在復制圖層樣式,從子菜單層,并粘貼到我的浮動層.
Web Top Header O How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 16: 關于about me文字使用下面顯示的文本文字工具(T).
Web Top Header P How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 17: 現(xiàn)在我們將添加橫幅模板下的導航使用圓角矩形工具(U)。Web Top Header Q How to Design a Template Header with Navigation Menu Tutorial with PSD
Step 18: 現(xiàn)在選擇一個banner圖片.

Web Top Header R How to Design a Template Header with Navigation Menu Tutorial with PSD
Step 19: 打開其圖層樣式,并選擇以下設置陰影.
Web Top Header S How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 20: 選擇創(chuàng)建一個角落的形狀Ploygonal套索工具(L).

Web Top Header T How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 21: 現(xiàn)在復制其他層和粘貼圖層樣式,像如下圖層樣式.

Web Top Header U How to Design a Template Header with Navigation Menu Tutorial with PSD

Step 22: 現(xiàn)在選擇文本文字工具(T)和類型樣品的文字或任何其他文本.

Web Top Header V How to Design a Template Header with Navigation Menu Tutorial with PSD

最后效果圖如下:
Web Top Header Final How to Design a Template Header with Navigation Menu Tutorial with PSD

你可以設計出不同的顏色和您的體例選擇的影響,以更好地提高其質量。

PDF下載本模板的PSD
我希望你喜歡這個教程,和給定的思想和技術,激發(fā)了一些新的想法在你的心中,你的下一個模板項目。

學習 · 提示

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

關注大神微博加入>>

網友求助,請回答!