ps黑色風格網頁模板

2022-12-26 10:51:09 來源/作者: / 己有:12人學習過

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

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

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

添加圖層樣式:

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

添加圖片匹配內容框中的描述,完成。

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

 

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

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

第十九步:添加聯系方式的小部件選擇矩形選框工具,設置半徑為3px,畫出合適尺寸的矩形框,運用和第二步一樣的步驟在矩形框中添加相同的樣式,這樣可以設計出同導航欄一樣的樣式。

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

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

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

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

到這一步,主體區域的所有內容就完成了,下邊是底部區域的制作。

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

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

第二十一步:添加底部的內容下面,在底部添加一下鏈接。用矩形選框工具創建一個矩形選區,并填充顏色為#323232,然后將鏈接文字的顏色設置為#FFFFFF,添加文字。

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

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

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

最后要做的事情就是在頁腳導航的上方添加社會化媒體的分享按鈕,然后在頁腳的右側添加網站標志及版權的聲明。(社會化分享的圖標在素材中)

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網

好了,所有步驟完成。

Photoshop設計黑色大氣的網頁模板,PS教程,16xx8.com教程網