本例為Photoshop網(wǎng)頁設(shè)計(jì)實(shí)例教程，在教程中我們將學(xué)習(xí)如何運(yùn)用PS設(shè)計(jì)和制作活潑手繪風(fēng)格的網(wǎng)頁，本photoshop web界面教程將分背景、header部分、body部分、footer部分四個(gè)步驟講解，希望能給朋友們帶來幫助~~

最終效果：

背景

第一步：創(chuàng)建一個(gè)畫布

首先，打開photoshop創(chuàng)建一個(gè)新的項(xiàng)目。你可以點(diǎn)擊文件>新建或按下CTRL+N快捷鍵來創(chuàng)建。我們選擇一個(gè)普通的畫布大小1000×900，當(dāng)然這些設(shè)置可以在后期增加。

第二步：應(yīng)用漸變

既然我們的畫布已經(jīng)創(chuàng)建了，是時(shí)候開始背景的設(shè)計(jì)了。創(chuàng)建一個(gè)新層（快捷鍵CTRL+SHIFT+N）。接著給這個(gè)圖層從左往右添加漸變前景色設(shè)置為#edd8af背景色為 #ede4c9.這個(gè)顏色用來表示盒子的顏色。

第三步：添加紋理

我們想要BoxedArt背景設(shè)計(jì)看起來像厚紙板的效果。創(chuàng)建另一個(gè)新層，顏色填充為#bcb6a9。下一步應(yīng)用膠片顆粒藝術(shù)效果設(shè)置參數(shù)如下。接著為了使它看起來粗糙一點(diǎn)，我們給它應(yīng)用一點(diǎn)高斯模糊效果。

以下就是我們應(yīng)用這些效果后背景圖層看起來的效果。

HEADER部分

第四步：導(dǎo)航條設(shè)計(jì)

頂部的導(dǎo)航區(qū)域部分我們放置了一條條狀的帶子。我們可以看到這種帶狀風(fēng)格在很多網(wǎng)站都有應(yīng)用，不過我們這里用到的有一點(diǎn)不同。由于BoxedArt 想要將這個(gè)設(shè)計(jì)看起來像用來發(fā)送郵件的盒子。為了創(chuàng)建這個(gè)導(dǎo)航條我們需要從bigstockphotos.com上下載一個(gè)帶狀的圖片，使用自由變換工具（在編輯菜單下選擇自由變換或者快捷鍵CTRL+T）沿著頂部的區(qū)域伸展開來 。接下來創(chuàng)建透明效果我們要把圖層樣式設(shè)置為線性加深。

下面就是效果：

第五步：老郵票導(dǎo)航按鈕

停留在盒子主題，我們要讓這個(gè)導(dǎo)航按鈕看起來有點(diǎn)破舊磨損郵票。為了達(dá)到這種效果列，我們需要一張老郵票（還是在 bigstockphotos.com上下載）。下載后第一步是描出郵票的路徑，從背景中提出來，郵票上依然有圖像。為了覆蓋郵票上的圖像，我們用一張黃色的紙張粘貼在上面也就是添加一個(gè)紋理效果。

下一步，我們要給導(dǎo)航按鈕添加一些顏色來區(qū)別各種不同類的導(dǎo)航，我們?cè)卩]票上添加一些裝飾花紋效果，在你完成創(chuàng)建好顏色盒子后，我們把這個(gè)層的樣式修改為線性加深以便顏色能與老照片混合在一起。然后我們?cè)黾恿硪粋€(gè)新層自上而下顏色為黑白我們給這個(gè)圖層添加膠片顆粒藝術(shù)效果設(shè)置如下，最后我們把圖層設(shè)置為正片疊底，把這個(gè)不透明度設(shè)置為60%。

注意：您可以在上述屏幕快照看到創(chuàng)建的郵票圖層。

第六步應(yīng)用導(dǎo)航按鈕到導(dǎo)航條上

現(xiàn)在我們已經(jīng)創(chuàng)建好了幾個(gè)不同顏色的郵票按鈕，是時(shí)候來完成最后header部分的準(zhǔn)備工作了，把導(dǎo)航按鈕應(yīng)用到導(dǎo)航條上，我們通過給每個(gè)導(dǎo)航按鈕應(yīng)用由mathilde設(shè)計(jì)的Sketchy icons圖標(biāo)來添加一些手寫效果。這些icon圖標(biāo)是放置在每個(gè)顏色盒子，并調(diào)整了中心圖標(biāo)的位置。同樣的步驟把icon應(yīng)用到每個(gè)郵票上去。

下一步，對(duì)每個(gè)郵票使用自由變換工具（CTRL+T），將他們調(diào)整不同的朝向給他們一種拍打的效果。這一步后，我們切換到文字工具，每個(gè)分類使用一種手寫字體。這里我用到的是 “Loved by the King”.最后我們的導(dǎo)航條就完成了。

第七步開始頂部介紹區(qū)域

首先創(chuàng)建一個(gè)新層（CTRL+SHIFT+N）在工具欄中選擇矩形選框工具。現(xiàn)在在頁面上創(chuàng)建一個(gè)矩形使用白色來填充。這塊區(qū)域?qū)⒈挥脕懋?dāng)做一張白紙。

好了我們已經(jīng)完成白色紙張部分了，在白紙圖層下面創(chuàng)建另一個(gè)新層然后填充黑色，這個(gè)將用來創(chuàng)建陰影。完成之后我們轉(zhuǎn)到濾鏡>模糊>高斯模糊半徑設(shè)置為6.5.之后把這個(gè)層的不透明度設(shè)置為20%，向右移動(dòng)5pixels。然后添加主要的文字，這樣的話短語”Simplify and Save”會(huì)被用到，位于頂部紙張部分。

現(xiàn)在你看在白紙下面有陰影，但是紙張并不是粘在哪里的。所以我們?cè)诩垙埖囊贿厑硖砑右恍┠z帶，如先前的教程一樣，我們?cè)诹硪贿吿砑恿艘粋€(gè)郵戳來保持畫面的平衡。在你的紙張完成后，我們選擇一些手寫字體來添加一些文字。看起來的話想事包裹上的信息。最后加亮這些圖層按下CTRL+T自由變換工具，角度設(shè)為 -1.5 degrees 使它看起來更加具有真實(shí)效果。

第八步 貼上一個(gè)便簽

我們使用了一個(gè)便簽設(shè)計(jì)來分開空間來介紹我們網(wǎng)站的優(yōu)惠注冊(cè)信息。這個(gè)在整個(gè)盒子主題上運(yùn)用的非常好，設(shè)計(jì)這樣一個(gè)便簽效果需要?jiǎng)?chuàng)建另一個(gè)新的圖層，選擇鋼筆工具使用鋼筆工具來繪制一個(gè)方形區(qū)域如下圖所示

在你完成之后轉(zhuǎn)到路徑面板，按住CTRL鍵點(diǎn)擊路徑圖層，接著你會(huì)看到方形區(qū)域已經(jīng)載入選區(qū)了，之后使用前景色#fffb78背景色#fffcd1從左上角到右下角繪制漸變。你將會(huì)看到這樣一個(gè)熟悉的黃色便簽紙形狀。

第九步

現(xiàn)在我們需要再一次添加陰影效果，給這個(gè)便簽紙?zhí)砑由疃龋詣?chuàng)建另一個(gè)新層(CTRL+SHIFT+N)。過程如之前給白紙創(chuàng)建陰影差不多，但是是將不透明度設(shè)置為40%。你需要變換一下陰影來創(chuàng)建一種傾斜效果，輕微的拖動(dòng)一下如圖所示。

第十步給便簽紙?zhí)砑觾?nèi)容

下一步，給便簽紙?zhí)砑右恍┪淖郑谖覀兊谋愫灱堉形覀円砑右恍┘尤氲劝粹o，為了創(chuàng)建相似的按鈕首先我們繪制一個(gè)盒子使用綠色填充，然后添加一個(gè)蒙板選擇一種grudge 筆刷。下一步遮住按鈕的一些部分看起來就像破損一樣，這就是我們創(chuàng)建郵戳的效果。

這個(gè)是最后呈現(xiàn)的效果。

(責(zé)任編輯：PS家園網(wǎng)) ???????