Photoshop設(shè)計(jì)教程:設(shè)計(jì)一款漂亮的網(wǎng)頁(yè)模板(4)

 最終效果：

首先，新建一個(gè)800× 800px的畫(huà)布，用漸變工具拉出垂直漸變，顏色系數(shù)在圖內(nèi)給出。

畫(huà)布將成為這樣（水印效果為小Y翻譯時(shí)加上，作者原圖無(wú)）：

新建圖層，用圓角矩形工具在中間拉出一個(gè)矩形，填充任意顏色，在圖層面板里將填充設(shè)為0%。

選擇中間矩形所在圖層，圖層樣式>漸變疊加，#3399cc~#00cccc

這是我們現(xiàn)在得到的效果：

選擇自定義形狀工具，選擇其中的一個(gè)圓形形狀。

新建圖層，畫(huà)幾個(gè)圓形，用變形工具適當(dāng)變形，最好將它們放入一個(gè)群組內(nèi)，得到以下效果。

選擇大小適中的軟性畫(huà)筆用#3399cc的顏色輕涂矩形上方與圓相交區(qū)域。

在最上方新建圖層，用圓角矩形工具，再得到一個(gè)略小的矩形，至于中間，填充黑色。

加圖層樣式，外發(fā)光、漸變疊加（#003366~006699），具體參數(shù)如下：

得到以下效果圖：

選擇另外一個(gè)邊緣稍寬的圓形形狀，在左邊位置，畫(huà)幾個(gè)大小不一的圓形，用變形工具變形，

將上一步所畫(huà)的若干個(gè)變形圓形對(duì)下一層的矩形執(zhí)行剪貼蒙版（具體操作為選中圖層按ctrl+alt+G，作者所用方法為選中縮略圖邊界，按住alt點(diǎn)擊左鍵，得到效果一致），如下：

在另外一側(cè)，選擇橢圓工具畫(huà)三個(gè)橢圓，顏色#003333，并將圖層面板內(nèi)填充設(shè)為70%,

選擇星形筆刷，新建圖層，在橢圓周?chē)?huà)幾個(gè)大小不一的星星，填充設(shè)為20%，

制作網(wǎng)站左上方logo，由添加漸變的星形筆刷和域名構(gòu)成，以下為漸變系數(shù)、字體系數(shù)與得到效果:

同樣在右側(cè)添加迷你導(dǎo)航，

添加導(dǎo)航,

在導(dǎo)航右側(cè)畫(huà)一個(gè)漸變圓角矩形，添加圖層樣式漸變疊加、描邊，系數(shù)如下：

在矩形內(nèi)添加必要說(shuō)明，

運(yùn)用圓角矩形工具在導(dǎo)航下方拉一個(gè)圓角矩形，寬高如圖：

拖入素材，對(duì)素材層執(zhí)行剪切蒙版，如下圖：

再次用圓角矩形工具，圖片的下面再拉出一個(gè)圓角矩形，并運(yùn)用錨點(diǎn)工具將右側(cè)的兩個(gè)圓角改為直角，圖層樣式>漸變疊加。

再下一層再拉出一個(gè)圓角矩形，同樣添加漸變疊加。

得到如下效果：

接下來(lái)用軟的筆刷工具為上下兩層加上亮角，顏色為# 0099CC

加上文字和圖片，并且在左上角注明標(biāo)題（添加外發(fā)光樣式，系數(shù)給出），右上角注明日期和另外一個(gè)logo出現(xiàn)過(guò)的五角星（筆刷工具）。

再在下面添加一個(gè)類(lèi)似層，你將得到如下效果，

繼續(xù)在畫(huà)布右側(cè)，畫(huà)出兩個(gè)前面我們做過(guò)的漸變（垂直）交叉層，漸變系數(shù)給出。

得到以下效果：

添加上文字和圖片，

將以上三個(gè)圖層放如一個(gè)組中，復(fù)制組，放置在下方。

用矩形工具在下方做出若干個(gè)矩形圖形，交替的添加漸變樣式（垂直），漸變系數(shù)分別給出。

添加上文字和標(biāo)題，所用字體（標(biāo)題的外發(fā)光樣式）同上。

矩形工具，拉一個(gè)大的圓角矩形，包括頁(yè)面以下的兩個(gè)板塊，添加漸變樣式(垂直)。

添加蒙版，略微用黑色筆刷在蒙版上將兩邊擦暗一點(diǎn)，得到如下效果。

再次用橢圓形狀工具+變形工具，在頁(yè)面底部同樣拉出不規(guī)則的若干橢圓形狀，添加上顏色#0066cc。

大功告成，我們就得到了如此精致絢麗的網(wǎng)頁(yè)，該教程主要是訓(xùn)練了學(xué)習(xí)者對(duì)于網(wǎng)頁(yè)層次感的把握以及細(xì)節(jié)的處理，跟著做一遍能大有收獲的。