本教程主要用Photoshop來設(shè)計一張綠色調(diào)風(fēng)格網(wǎng)頁模板,網(wǎng)頁美工設(shè)計的朋友可以一起來觀賞學(xué)習(xí),模板的制作的重點在于網(wǎng)站的板式搭配和顏色的搭配.下面讓我們一起來學(xué)習(xí)吧.

先看看完整的網(wǎng)頁布局效果：

現(xiàn)在我們開始教程。

01。創(chuàng)建一個1020px X 1060px的文件。

02。下一步，我們將改變背景顏色。用油漆桶工具，填補(bǔ)背景層顏色：＃e3dec1

03。選擇矩形工具，繪制出以下尺寸形狀：1022X173和填充黑色（＃343434）

04。接下來，我選擇選擇一個如下的矢量圖片素材，類似的都行，并將透明度設(shè)置為23％。

05。現(xiàn)在，選擇矩形工具（U）和添加形狀（244 × 119），使用下面的顏色＃a3cb31。

06。下一步使用矩形工具，創(chuàng)建另一個形狀，尺寸：239X130，然后處理成下列圖層樣式：（投影和漸變效果，如下圖）

處理效果如下：

07。下一步將是增加該網(wǎng)站的logo。

看看下面的效果吧：

08。完成logo后，在右邊添加一些標(biāo)語文字。

09。下面開始制作導(dǎo)航目錄，選擇矩形工具來創(chuàng)建一個形狀（1022X46），并添加下面層的樣式效果。

如下圖，將導(dǎo)航條和上方的頭部保持1~2px的間距（將導(dǎo)航條像下移動）。預(yù)覽：

10。下添加一個鼠標(biāo)選中和當(dāng)前頁面的效果。用橢圓工具（背景設(shè)置為白色），并制訂一個小的形狀。如下：

11。應(yīng)用高斯模糊（濾鏡>模糊>高斯模糊）與15px半徑。

12。在這一步驟中將添加一些導(dǎo)航文本。

13。因為我們的導(dǎo)航欄看上去有點空，我們在右側(cè)再添加個搜索框。選擇矩形工具，添加一個尺寸：255 × 26的框，設(shè)置層樣式：(內(nèi)投影)

看看下面的效果：

現(xiàn)在來裝飾導(dǎo)航。

14。選擇矩形工具，繪制出形狀（在導(dǎo)航欄）在下方：1022X32。顏色填充：＃c0de7a

15。現(xiàn)在添加一些其他素材。

16。如下圖中的圖型。

向上移動，如下圖，主要圖層擺放關(guān)系。

17。接下來，我會重復(fù)復(fù)制素材（層>復(fù)制層）。
下面效果：

18。步驟重復(fù)5-7次以上，下面全部覆蓋就可以了，然后把每個層的透明度設(shè)置為16％就差不多了~~

下面開始制作中間的宣傳部分
19。選擇矩形工具，并創(chuàng)建一個具有以下尺寸形狀：1022 x 178。使用這種顏色：＃80ad0a

20。在形狀中創(chuàng)建一個循環(huán)使用橢圓工具

21。選擇矩形工具，選擇如綠色背景高度。

22。按Ctrl + Alt +I（反向選擇），然后按下刪除。刪除多余部分：

23。現(xiàn)在修飾一下這個部分吧，你需要在中間放一個向日葵，在兩邊添加一些矢量裝飾圖和一些文本
效果看看吧：

其他部分都好了~ 在做下面的主要內(nèi)容部分。

24。選擇矩形工具，繪制出形狀。尺寸: 969x563

25。然后應(yīng)用投影樣式：

26。下面添加一些文章，并添加一些裝飾。如下：

27。現(xiàn)在制作右邊的部分，選擇矩形工具，并創(chuàng)建一個矩形，尺寸：275x508，并應(yīng)用圖層樣式：

所有需要做的是添加一些圖片和一些文字。現(xiàn)在主要領(lǐng)域就完成了。

28。下面制作底部，在頁腳需要添加一些版權(quán)信息，您可以添加一些矢量圖片裝飾。
看看下圖：

這樣本教程已經(jīng)結(jié)束了。教程寫的有點簡單，希望大家喜歡。