從這篇wordpress博客模板網(wǎng)站的設(shè)計中，我們可以看到對于網(wǎng)站的細節(jié)設(shè)計十分出色，加上精美的圖片處理，并將紙張效果應用到網(wǎng)站的頭部設(shè)計中，也是亮點之一。

大家好,我叫alvaro guzman,第一部分由我給大家介紹如何用photoshop創(chuàng)建一個網(wǎng)頁模板,和帶有波動的圖片.首先我給大家看下效果圖.

1.新建一個大小1260*1000的空白文件.按crtl+r顯示標尺,并給添加輔助線如圖.

|||

2.打開圖片,并調(diào)整它的位置和大小.新建一個圖層,點取調(diào)色板分別設(shè)置前景色為紫色,背景色為藍色.然后選擇"濾鏡>渲染>云彩".并命名為cloud.把它拖到city圖層下面.并給city圖層添加蒙版.再給cloud也添加蒙版.如下圖:

|||

3.新建一個圖層,在其上畫一個圓角矩形,并給這個圓角矩形添加一個漸變的樣式.如圖:

4.導入準備好的圖片,并給個這圖層更改圖層模式--柔光,并把不透明度改為50% .按住crtl然后點擊矩形那個圖層 ,把矩形變?yōu)檫x區(qū).返回到圖片層上,選區(qū)---反選,按鍵盤上的delete冊掉多余的部分.最近你可以給圖片加點外發(fā)光,或內(nèi)發(fā)光,看你的需要而設(shè):

|||

5.接下來,來做個logo.用文字工具上"generation"(rockwell 字體)最后給其添加圖層樣式,效果如圖:

6.新建一個層圖并命名:right,再畫一個圓角矩形,并為其添加一個線性漸變,最后為其加個描邊.

|||

7.重復上面的步驟,并命名content,這樣我們就差不多布好局了.

8.現(xiàn)在我們來給網(wǎng)頁添加些圖像.打磁帶文件,放在所有的圖層上面,然后添加一些文字.用鋼筆工具把磁帶中的透明部分摳出來,剪切并粘貼,利用變形工具對它進行變形,最后調(diào)節(jié)其的不透明度50%,60%,接差合并圖層,把磁帶圖層放在網(wǎng)頁的右側(cè)邊上.如圖:

|||

9.接下來對磁帶做陰影.這是一個做陰影的快速方法:按crtl+j復制對象,按crtl+u調(diào)出色相,設(shè)置亮度為-100,接著,濾鏡--模糊--高斯模糊,最后把圖層放在原對像后.如圖:

10.打開一張紙質(zhì)的圖片,把圖片拖到頭部圖層的下面.然后用自由變形來調(diào)節(jié)它的大小,來做網(wǎng)頁的導航.如圖:

|||

11.在紙質(zhì)的圖層上新建一個圖層,利用橢圓選區(qū)畫個橢圓出來,然后填充黑色,取消選區(qū),選擇高斯模糊,最后給它個不透明度75%.

12.復制紙質(zhì)圖層,然后crtl+t把居下的一個圖層變小,對居上的圖層進行陰影,最后添加文字,你可以用手寫的字體,效果如下圖:

|||

13.我們來給網(wǎng)頁添加個rss的圖標,在右邊加一些文字,可以用"rockwell condensed"字體.

14.接下來繼續(xù)添加內(nèi)容,在這里標題,用字體"rockwell",鏈接用字體"georgia"

|||

15.繼續(xù)添加,標題用字本"georgia",內(nèi)容用字體"arial",在旁邊添加一個圖標來表示評論的數(shù)量.而給圖片增加2px的白色邊框.最后添加一個版權(quán)信息.

16.復制頭部的紙質(zhì)那個圖層來做頁腳.

|||

17.添加頁腳的信息,在這里我做了一個最新更新,另一個做"導航".

18.如果有需要的話,可以再增加別的信息在頁腳上,比如:在這里我加了一個小標題.

19.這里一個簡單而又有漂亮的wordpress模版就做完了.你可以試試.