這篇photoshop網站設計教程是我們在介紹2009年度TOP30佳photoshop精品教程 里面的系列教程之一，我們對我們BoxedArt.com網站煞費苦心的設計感到非常的自豪，我們從設計、內容、編程為此傾入了幾個月的時間就是為了重新上線給大家帶來最好的服務。好了，我們將展示出我們的設計秘密。好了二話不說，讓我們開始這一步步指導大家如何在photoshop中設計網頁。

這個photoshop web界面教程分為以下幾個部分：

背景，header部分，body部分，footer部分

背景

第一步：創建一個畫布

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

第二步：應用漸變

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

第三步：添加紋理

我們想要BoxedArt背景設計看起來像厚紙板的效果。創建另一個新層，顏色填充為#bcb6a9。下一步應用膠片顆粒藝術效果設置參數如下。接著為了使它看起來粗糙一點，我們給它應用一點高斯模糊效果。

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

HEADER部分

第四步：導航條設計

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

第五步：老郵票導航按鈕

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

下一步，我們要給導航按鈕添加一些顏色來區別各種不同類的導航，我們在郵票上添加一些裝飾花紋效果，在你完成創建好顏色盒子后，我們把這個層的樣式修改為線性加深以便顏色能與老照片混合在一起。然后我們增加另一個新層自上而下顏色為黑白我們給這個圖層添加膠片顆粒藝術效果設置如下，最后我們把圖層設置為正片疊底，把這個不透明度設置為60%。

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

第六步應用導航按鈕到導航條上

現在我們已經創建好了幾個不同顏色的郵票按鈕，是時候來完成最后header部分的準備工作了，把導航按鈕應用到導航條上，我們通過給每個導航按鈕應用由mathilde設計的Sketchy icons圖標來添加一些手寫效果。這些icon圖標是放置在每個顏色盒子，并調整了中心圖標的位置。同樣的步驟把icon應用到每個郵票上去。

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

第七步開始頂部介紹區域

首先創建一個新層(CTRL+SHIFT+N)在工具欄中選擇矩形選框工具。現在在頁面上創建一個矩形使用白色來填充。這塊區域將被用來當做一張白紙。

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

現在你看在白紙下面有陰影，但是紙張并不是粘在哪里的。所以我們在紙張的一邊來添加一些膠帶，如先前的教程一樣，我們在另一邊添加了一個郵戳來保持畫面的平衡。在你的紙張完成后，我們選擇一些手寫字體來添加一些文字。看起來的話想事包裹上的信息。最后加亮這些圖層按下CTRL+T自由變換工具，角度設為-1.5 degrees 使它看起來更加具有真實效果。

第八步 貼上一個便簽

我們使用了一個便簽設計來分開空間來介紹我們網站的優惠注冊信息。這個在整個盒子主題上運用的非常好，設計這樣一個便簽效果需要創建另一個新的圖層，選擇鋼筆工具使用鋼筆工具來繪制一個方形區域如下圖所示

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

第九步

現在我們需要再一次添加陰影效果，給這個便簽紙添加深度，所以創建另一個新層(CTRL+SHIFT+N)。過程如之前給白紙創建陰影差不多，但是是將不透明度設置為40%。你需要變換一下陰影來創建一種傾斜效果，輕微的拖動一下如圖所示。

第十步給便簽紙添加內容

下一步，給便簽紙添加一些文字，在我們的便簽紙中我們要添加一些加入等按鈕，為了創建相似的按鈕首先我們繪制一個盒子使用綠色填充，然后添加一個蒙板選擇一種grudge 筆刷。下一步遮住按鈕的一些部分看起來就像破損一樣，這就是我們創建郵戳的效果。

這個是最后呈現的效果。

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技巧知識