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

來源:思緣論壇 作者:臣子木 學(xué)習(xí):6725人次

第十七步:添加中間列的內(nèi)容在中間列,創(chuàng)建同左列相同的標(biāo)題文字,但必須更改文字旁邊的標(biāo)識符號(可以從素材中查找合適的圖片)

選擇圓角矩形工具,設(shè)置半徑為3px前景色為#FFFFFF,制作一個(gè)圓角的內(nèi)容邊框,并添加一些文字及描述。

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

添加圖層樣式:

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

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

添加圖片匹配內(nèi)容框中的描述,完成。

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

 

第十八步:在右列中添加內(nèi)容右列的樣式同其它兩列基本一樣,所以我們添加相同的標(biāo)題文字,并更改合適的標(biāo)題文字的圖片。

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

第十九步:添加聯(lián)系方式的小部件選擇矩形選框工具,設(shè)置半徑為3px,畫出合適尺寸的矩形框,運(yùn)用和第二步一樣的步驟在矩形框中添加相同的樣式,這樣可以設(shè)計(jì)出同導(dǎo)航欄一樣的樣式。

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

在小部件中添加內(nèi)容,設(shè)置標(biāo)題文字字體為Georgia,圖片從素材中選擇,為在圖片上添加了一個(gè)顏色疊加層(#F7E5C4),使其與網(wǎng)頁的整體布局融合的更好。

然后用圓角矩形工具添加一個(gè)圓角選框作為email地址的輸入框,填充顏色為#FFFFFF。

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

到這一步,主體區(qū)域的所有內(nèi)容就完成了,下邊是底部區(qū)域的制作。

第二十步:添加底部區(qū)域的背景底部背景的制作方法和第二步第三步相同,你需要將此區(qū)域的高度設(shè)置的比導(dǎo)航區(qū)域略高,這樣可以放下更多的內(nèi)容。

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

第二十一步:添加底部的內(nèi)容下面,在底部添加一下鏈接。用矩形選框工具創(chuàng)建一個(gè)矩形選區(qū),并填充顏色為#323232,然后將鏈接文字的顏色設(shè)置為#FFFFFF,添加文字。

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

接下來將圖層的混合模式設(shè)置為柔光,降低不透明度到63%,重復(fù)以上步驟添加需要的鏈接。

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

最后要做的事情就是在頁腳導(dǎo)航的上方添加社會化媒體的分享按鈕,然后在頁腳的右側(cè)添加網(wǎng)站標(biāo)志及版權(quán)的聲明。(社會化分享的圖標(biāo)在素材中)

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

好了,所有步驟完成。

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

 

學(xué)習(xí) · 提示

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

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

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