如何設(shè)計(jì)與PSD模板標(biāo)題導(dǎo)航菜單教程(6)
如何設(shè)計(jì)與PSD模板標(biāo)題導(dǎo)航菜單教程
許多網(wǎng)站管理員/設(shè)計(jì)師專(zhuān)家圖標(biāo)/橫幅圖形設(shè)計(jì),但只有10%個(gè)是與設(shè)計(jì)好一個(gè)非常好看的網(wǎng)站模板。今天我們要學(xué)習(xí)如何設(shè)計(jì)一個(gè)模板頭有標(biāo)志和導(dǎo)航菜單和部分內(nèi)容區(qū)。一個(gè)很容易遵循在Adobe Photoshop CS3/CS5與PSD教程。
持續(xù)時(shí)間:30分鐘。
效果圖
步驟1:創(chuàng)建一個(gè)新項(xiàng)目,分辨率為1280×1024像素,畫(huà)一條水平線帶使用矩形選框工具(m)。
Step 2: 現(xiàn)在打開(kāi)圖層樣式>漸變疊加,設(shè)置它的顏色就像下面顯示。
Step 3: 現(xiàn)在創(chuàng)建SITENAME/標(biāo)志的形狀,選擇圓角矩形工具(U),半徑為10像素下面顯示.
Step 4: 對(duì)于這個(gè)新的形狀,再打開(kāi)圖層樣式>漸變疊加設(shè)置屬性,如下面的截圖上色。.
Step 5: 要添加一些陰影,按下面的圖設(shè)置陰影屬性.
Step 6: 用于顯示網(wǎng)站名稱(chēng),選擇圓角矩形工具(u),半徑為4像素的形狀像如下.
Step 7: 下一步,我們使用矩形選框工具(M).
添加一個(gè)黑暗地帶的導(dǎo)航菜單邊框,如下圖所示
Step 8: 現(xiàn)在選擇這層并且復(fù)制粘貼(CTRL + V)和劃分導(dǎo)航菜單 如下.
Step 9:現(xiàn)在我們要添加導(dǎo)航菜單文本給出截圖使用文本文字工具(T).
Step 10: 下一步,我們要添加子菜單條,使用圓角矩形工具(U)創(chuàng)建半徑為10像素的形狀像以下
Step 11:打開(kāi)其圖層樣式,單擊并選擇漸變疊加,設(shè)置如下設(shè)置.
Step 12:現(xiàn)在選擇自定義形狀工具(U),并作出如下圖的形狀
Step 13: 再次選擇“文本文字工具(T)和類(lèi)型如下的文本.
Step 14: 現(xiàn)在,關(guān)于我的右側(cè)漂浮,選擇圓角矩形工具(U),半徑為10像素的形狀如下喜歡.
Step 15: 現(xiàn)在復(fù)制圖層樣式,從子菜單層,并粘貼到我的浮動(dòng)層.
Step 16: 關(guān)于about me文字使用下面顯示的文本文字工具(T).
Step 17: 現(xiàn)在我們將添加橫幅模板下的導(dǎo)航使用圓角矩形工具(U)。
Step 18: 現(xiàn)在選擇一個(gè)banner圖片.
Step 19: 打開(kāi)其圖層樣式,并選擇以下設(shè)置陰影.
Step 20: 選擇創(chuàng)建一個(gè)角落的形狀Ploygonal套索工具(L).
Step 21: 現(xiàn)在復(fù)制其他層和粘貼圖層樣式,像如下圖層樣式.
Step 22: 現(xiàn)在選擇文本文字工具(T)和類(lèi)型樣品的文字或任何其他文本.
最后效果圖如下:
你可以設(shè)計(jì)出不同的顏色和您的體例選擇的影響,以更好地提高其質(zhì)量。
PDF下載本模板的PSD
我希望你喜歡這個(gè)教程,和給定的思想和技術(shù),激發(fā)了一些新的想法在你的心中,你的下一個(gè)模板項(xiàng)目。
- 相關(guān)教程
- TA的教程
- 收藏
- 返回
- 翻譯教程
- 教程
- 設(shè)計(jì)
- Photoshop
- 菜單設(shè)計(jì)
學(xué)習(xí) · 提示
相關(guān)教程
- 網(wǎng)頁(yè)模板,設(shè)計(jì)酒吧主題網(wǎng)頁(yè)模板實(shí)例
- ps設(shè)計(jì)藍(lán)色主題風(fēng)格的網(wǎng)站首頁(yè)模板教程
- 從零手把手教你設(shè)計(jì)網(wǎng)頁(yè)
- ps cs6設(shè)計(jì)時(shí)尚促銷(xiāo)專(zhuān)題頁(yè)教程
- 網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)技巧
- ps切片工具怎么用
- ps設(shè)計(jì)網(wǎng)頁(yè)視頻游戲界面
- ps黑色風(fēng)格網(wǎng)頁(yè)模板
- ps一個(gè)木紋風(fēng)格網(wǎng)頁(yè)模板
- ps設(shè)計(jì)懷舊復(fù)古的網(wǎng)頁(yè)
推薦教程
- ps設(shè)計(jì)制作居家風(fēng)格美食Blog網(wǎng)頁(yè)特效
- Photoshop CS5制作放射狀光線網(wǎng)頁(yè)廣告板
- Photoshop繪制好看的老式wordpress主題
- Photoshop繪制木質(zhì)紋理的網(wǎng)站首頁(yè)模板
- Photoshop制作禮品店網(wǎng)站模板
- Photoshop網(wǎng)頁(yè)設(shè)計(jì):雜志風(fēng)格網(wǎng)站界面
- photoshop網(wǎng)頁(yè)應(yīng)用實(shí)例:制作蘋(píng)果導(dǎo)航欄
- PS教程:繪制清新的色彩生動(dòng)的網(wǎng)頁(yè)布局
- PhotoShop設(shè)計(jì)制作懷舊風(fēng)格網(wǎng)頁(yè)的詳細(xì)教程
- PS教程:制作非常不錯(cuò)的wordpress博客網(wǎng)站模板