本例為網(wǎng)頁設(shè)計(jì)實(shí)例教程，在教程中我們將學(xué)習(xí)如何運(yùn)用PS設(shè)計(jì)和制作活潑手繪風(fēng)格的網(wǎng)頁，本界面教程將分背景、部分、body部分、部分四個(gè)步驟講解，希望能給朋友們帶來幫助~~步驟/方法1.BODY部分2.第十一步卷曲膠帶紙標(biāo)題我們轉(zhuǎn)到body的內(nèi)容部分。在這個(gè)設(shè)計(jì)中，我們要?jiǎng)?chuàng)建2欄和一些圖標(biāo)。我們使用的是已經(jīng)有的圖標(biāo)因?yàn)槲覀兿矚g這種手寫效果包括。在body開始的區(qū)域我們要一個(gè)標(biāo)題欄用來羅列我們網(wǎng)站的內(nèi)容。我們把這個(gè)部分做成卷曲效果。至于說到透明膠帶我們使用的來自的圖片。為了增加膠帶的深度，我使用矩形選框工具來選擇膠帶的一些區(qū)域。在選中選區(qū)后我們復(fù)制這個(gè)圖層按下向左邊移動(dòng)，然后在向右移動(dòng)一下使它看起來顯得長一些。為了避免縫隙的產(chǎn)生我們使用圖章工具里拼合這些縫隙?？梢圆榭聪旅娴男Ч?。

3.第十二步預(yù)覽下的小圖標(biāo)網(wǎng)站的內(nèi)容區(qū)域包含很多網(wǎng)頁模板的預(yù)覽。創(chuàng)建這種效果我們需要選中矩形選框工具創(chuàng)建一個(gè)小的矩形，然后使用顏色#填充。這些按鈕我們只要復(fù)制第一個(gè)圖層，移動(dòng)它到第一個(gè)圖層下面，設(shè)置這個(gè)圖層的透明度這里我們?cè)O(shè)置的為40%。重復(fù)同樣的步驟處理余下的按鈕。

4.第十三步使用針腳線來分開這些區(qū)域?yàn)榱朔珠_這些主要的分類，為了創(chuàng)建這些虛線我們可以文字工具角度為90，把這些圖層的樣式設(shè)置為疊加，為了使這些顯眼點(diǎn)我們只需復(fù)制這個(gè)圖層2-3次至于顏色多深取決于你自己。

5.第十四步填充額外的內(nèi)容添加剩下的內(nèi)容就非常簡單了，我們只需使用直線工具來分開每個(gè)部分，在添加些圖標(biāo)和文字，這里我們用到的是一種干凈的字體,。下圖就是body部分的整體效果了。

6.第十五步—底部廣告部分我們已經(jīng)到了底部放置廣告部分了，這里的帶狀條將會(huì)再一次應(yīng)用起來，使用先前有的圖片作為起點(diǎn)，下一步，我們要使用圓角矩形工具，前景色設(shè)置為白色半徑為5px。接著我們需要在設(shè)置一些小的圓角矩形，顏色設(shè)置為#邊框用深灰。你可以在下圖的圖層樣式中設(shè)置邊框（就是一種描邊效果）。