PS技巧：利用Photoshop制作專業(yè)網(wǎng)頁(yè)設(shè)計(jì)模板

在這篇PS教程里，將跟大家介紹Photoshop設(shè)計(jì)一個(gè)可用于整站專業(yè)網(wǎng)頁(yè)模版。PS教程將用到Photoshop軟件里的一些基本的工具，比如：筆刷和圖層等。下面先預(yù)覽一下PS教程的最終效果。

　　最終效果圖

圖00

　　教程開(kāi)始

　　第一步：新建文件打開(kāi)PS軟件，點(diǎn)擊文件-新建命令或Ctrl+N鍵新建文件，設(shè)置寬度1020px，高度1180px，背景默認(rèn)為白色，點(diǎn)擊確定即可；

圖01

　　第二步：創(chuàng)建導(dǎo)航背景我們將從header開(kāi)始我們的設(shè)計(jì)，所以我們先用矩形選框工具，在畫布上新建一個(gè)矩形選框，如圖所示，填充顏色#393939;

圖02

　　第三步：修飾導(dǎo)航背景Ctrl+J復(fù)制導(dǎo)航背景圖層，激活背景圖層副本，點(diǎn)擊濾鏡-雜色-添加雜色，參數(shù)設(shè)置如圖所示：

圖03

　　然后設(shè)置圖層的混合模式為疊加，不透明度設(shè)為23%;

　　第四步：創(chuàng)建網(wǎng)頁(yè)logo和name對(duì)于教程中的logo，我使用了Georgia字體并設(shè)計(jì)為粗體并傾斜，設(shè)置‘SIX’的顏色為#FFFFFF，‘STUDIOS’的顏色為#F7E5C4，logo旁邊的圖片用的是素材中的boxupload32圖片。樣式如圖所示：

圖04

　　第五步：加入導(dǎo)航鏈接活動(dòng)鏈接的顏色我用的是#DBD1BE，普通鏈接用的顏色為：#ABAAAA。

圖05

　　為了使活動(dòng)鏈接顯示的更突出，在其后便添加一個(gè)矩形框。選擇圓角矩形工具，設(shè)置半徑為5px，前景色為#464646,然后在活動(dòng)鏈接處添加矩形背景，樣式如圖：

圖06

　　給矩形背景圖層添加內(nèi)陰影和描邊效果，具體設(shè)置參數(shù)如圖：

圖07

圖08

　　第六步：給特色區(qū)域添加背景在我們網(wǎng)頁(yè)布局的頂部，需要有一塊特色區(qū)域，這塊區(qū)域通過(guò)播放幻燈片將網(wǎng)站的特色內(nèi)容展示給來(lái)訪者。這塊區(qū)域也可以同時(shí)包括對(duì)網(wǎng)站的介紹等，第一步我們需要做的就是利用矩形選框工具選中這塊區(qū)域，然后在此矩形選區(qū)中填充顏色#D3CAB8。

圖09

然后你需要下載

圖10

　　紋理圖片，并把它放在特色區(qū)域