photoshop教程

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

時(shí)間:2011-03-20 14:17來(lái)源:未知 作者:bbs.16xx8.com 點(diǎn)擊:
最終效果: 首先,新建一個(gè)800 800px的畫布,用漸變工具拉出垂直漸變,顏色系數(shù)在圖內(nèi)給出。 畫布將成為這樣(水印效果為小Y翻譯時(shí)加上,作者原圖無(wú)): 新建圖層,用 圓角矩形工具 在中間拉出一個(gè)矩形,填充任意顏色,在圖層面板里將 填充 設(shè)為0%。 選擇中間矩形所在圖

 最終效果:

 

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

畫布將成為這樣(水印效果為小Y翻譯時(shí)加上,作者原圖無(wú)):

 

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

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

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

 

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

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

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

 

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

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

得到以下效果圖:

 

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

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

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

選擇星形筆刷,新建圖層,在橢圓周圍畫幾個(gè)大小不一的星星,填充設(shè)為20%,

 

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

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

添加導(dǎo)航,

 

在導(dǎo)航右側(cè)畫一個(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è)類似層,你將得到如下效果,

繼續(xù)在畫布右側(cè),畫出兩個(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é)的處理,跟著做一遍能大有收獲的。

 

 

 

 

 

 

 

 

 

 

 

 

(責(zé)任編輯:bbs.16xx8.com)
頂一下
(0)
0%
踩一下
(0)
0%
------分隔線----------------------------
發(fā)表評(píng)論
請(qǐng)自覺(jué)遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī),嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。
評(píng)價(jià):
表情:
用戶名: 驗(yàn)證碼:點(diǎn)擊我更換圖片
欄目列表
百度聯(lián)盟
推薦內(nèi)容
熱點(diǎn)內(nèi)容