BODY 部分

第十一步卷曲膠帶紙標題

我們轉到body的內容部分。在這個設計中，我們要創建2欄和一些圖標。我們使用的是已經有的圖標因為我們喜歡這種手寫效果包括Handy Icons and Sketchy icons.。在body開始的區域我們要一個標題欄用來羅列我們網站的內容。我們把這個header部分做成卷曲效果。至于說到透明膠帶我們使用的來自 bigstockphoto 的圖片。為了增加膠帶的深度，我使用矩形選框工具來選擇膠帶的一些區域。在選中選區后我們復制這個圖層按下ALT+SHIFT向左邊移動，然后在向右移動一下使它看起來顯得長一些。為了避免縫隙的產生我們使用圖章工具里拼合這些縫隙。可以查看下面的效果。

第十二步預覽下的小圖標

BoxedArt網站的內容區域包含很多網頁模板的預覽。創建這種效果我們需要選中矩形選框工具創建一個小的矩形，然后使用顏色#123057填充。 這些按鈕我們只要復制第一個圖層，移動它到第一個圖層下面，設置這個圖層的透明度這里我們設置的為40%。重復同樣的步驟處理余下的按鈕。

第十三步使用針腳線來分開這些區域

為了分開這些主要的分類，為了創建這些虛線我們可以文字工具角度為90，把這些圖層的樣式設置為疊加，為了使這些顯眼點我們只需復制這個圖層2-3次至于顏色多深取決于你自己。

第十四步填充額外的內容

添加剩下的內容就非常簡單了，我們只需使用直線工具來分開每個部分，在添加些圖標和文字，這里我們用到的是一種干凈的字體Helvetica Condensed,。下圖就是body部分的整體效果了。

第十五步—底部廣告部分

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

這就是我們完成后創建的效果

現在讓我們來添加標題和廣告到每個盒子中，效果如下圖：

第十六步 公告部分

公告部分我們采取的是和header部分相似蒙板的方法，當然還有訂閱新聞通訊等區域也是這樣的方法，就像紙張粘上去的一樣。首先我們給 header部分添加一種厚紙張效果，這個和body部分的方法基本一樣。至于內容部分，選中矩形選框工具在右下角繪制小盒子顏色填充為#f9e5a6。完成按下CTRL-D取消選區，在選擇加深工具，筆刷大小設置為35pixels加深棕色盒子的邊角區域就像下圖所示

最后我們把圖層的不透明度設置為60%再雙擊圖層在圖層樣式中添加一些陰影效果，參數設置如下圖，然后在添加一些內容。

完成后的效果很不錯哦

FOOTER部分

第十七步網頁底部

到了我們創建底部的部分了，首先我們使用矩形選框工具，在頁面上選擇下圖這樣一個區域，使用顏色#462d0f填充，選擇直線工具繪制一條直線顏色設置為#a05d18。

到了底部的分類部分了，我們要又一次繪制一個大的選框，顏色填充為#472a0b ，圖層的不透明度度設置為78%，接著創建另一個圖層顏色填充為#fffcd1。下一步添加膠片顆粒效果最后把圖層的不透明度設置為30%圖層樣式為正片疊底。

完成后你應該看到的樣子

最后我們只需重復我們在footer部分的操作或者復制圖層把它移到底部，這樣你就可以添加內容了。看下下面的預覽圖，是否有些啟示列，希望你喜歡。

恭喜！你已經圓滿完成這個教程我們在這個BoxedArt 網站設計中也學到一些有用的photoshop技巧知識。

原英文教程網址：http://blog.boxedart.com/network-updates/boxedart/how-it-was-made-boxedart-website-design-tutorial/

(責任編輯：PS家園網)