您當前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁設計教程 >> ps教程 >> 瀏覽設計教程

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

 

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

  最終效果圖

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖00

  教程開始

  第一步:新建文件打開PS軟件,點擊文件-新建命令或Ctrl+N鍵新建文件,設置寬度1020px,高度1180px,背景默認為白色,點擊確定即可;

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖01

  第二步:創(chuàng)建導航背景我們將從header開始我們的設計,所以我們先用矩形選框工具,在畫布上新建一個矩形選框,如圖所示,填充顏色#393939;

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖02

  第三步:修飾導航背景Ctrl+J復制導航背景圖層,激活背景圖層副本,點擊濾鏡-雜色-添加雜色,參數(shù)設置如圖所示:

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖03

  然后設置圖層的混合模式為疊加,不透明度設為23%;

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

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖04

  第五步:加入導航鏈接活動鏈接的顏色我用的是#DBD1BE,普通鏈接用的顏色為:#ABAAAA。

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖05

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

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖06

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

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖07

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖08

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

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖09

 

然后你需要下載

PS教程:PS制作專業(yè)優(yōu)雅的網(wǎng)頁設計模板
圖10

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

[教程作者:admin]
免責聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ps1284.html
PS技巧簡單制作虛線效果
photoshop設計精美登錄注冊頁面
圖趣網(wǎng)微信
建議反饋
×