ps黑色風格網(wǎng)頁模板

來源:思緣論壇 作者:臣子木 學習:6725人次

在這篇網(wǎng)頁設(shè)計教程里,你將學習制作可以用于整站的一個既優(yōu)雅又專業(yè)的網(wǎng)頁,我們將用到Photoshop軟件里的一些基本的工具,比如:筆刷和圖層等。而且在教程下方包括了此網(wǎng)頁的HTML/CSS/JAVASCRIPT模板和素材,你可以下載用作學習或使用都可以。

下面先預覽一下本教程的最終效果:

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

教程開始:

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

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

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

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

Photoshop設(shè)計黑色大氣的網(wǎng)頁模板,PS教程,16xx8.com教程網(wǎng)

學習 · 提示

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

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

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