圖01

　　背景

　　第一步：建立一個畫布

　　首先，開啟photoshop建立一個新的專案。你可以點選檔案>新建或按下CTRL+N快捷鍵來建立。我們選擇一個普通的畫布大小 1000×900，當然這些設定可以在後期增加。

圖01

　　第二步：應用漸變

　　既然我們的畫布已經建立了，是時候開始背景的設計了。建立一個新層（快捷鍵CTRL+SHIFT+N）。接著給這個圖層從左往右新增漸變前景色 設定為#edd8af背景色為

圖02

　　#ede4c9.這個顏色用來表示盒子的顏色。

　　第三步：新增紋理

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

圖03

圖04

圖05

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

圖06

圖07

　　HEADER部分

　　第四步：導航條設計

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

圖08

　　第五步：老郵票導航按鈕

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

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

圖09

圖10

圖11

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

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

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

圖12

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

圖13

　　第七步：開始頂部介紹區域

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

圖14

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

圖15

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

圖16

　　第八步：貼上一個便籤

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

圖17

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

圖18

　　第九步：新增陰影效果

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

圖19

　　第十步：給便籤紙新增內容

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

圖20

圖21

　　這個是最後呈現的效果。

圖22

　　BODY 部分

　　第十一步：捲曲膠帶紙標題

　　我們轉到body的內容部分。在這個設計中，我們要建立2欄和一些圖示。我們使用的是已經有的圖示因為我們喜歡這種手寫效果包括Handy Icons and Sketchy icons.。在body開始的區域我們要一個標題欄用來羅列我們網站的內容。我們把這個header部分做成捲曲效果。至於說到透明膠帶我們使用的來自 bigstockphoto

　　的圖片。為了增加膠帶的深度，我使用矩形選框工具來選擇膠帶的一些區域。在選中選區後我們複製這個圖層按下ALT+SHIFT向左邊移動，然後 在向右移動一下使它看起來顯得長一些。為了避免縫隙的產生我們使用圖章工具裡拼合這些縫隙。可以檢視下面的效果。

圖23

　　第十二步：預覽下的小圖示

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

圖24

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

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

圖25

　　第十四步：填充額外的內容

　　新增剩下的內容就非常簡單了，我們只需使用直線工具來分開每個部分，在新增些圖示和文字，這裡我們用到的是一種乾淨的字型Helvetica Condensed,。下圖就是body部分的整體效果了。

圖26

　　第十五步：—底部廣告部分

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

圖27

　　這就是我們完成後建立的效果

圖28

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

圖29

　　第十六步：公告部分

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

圖30

圖31

　　最後我們把圖層的不透明度設定為60%再雙擊圖層在圖層樣式中新增一些陰影效果，引數設定如下圖，然後在新增一些內容。

圖32

　　完成後的效果很不錯哦

圖33

　　FOOTER部分

　　第十七步：網頁底部

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

圖34

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

圖35

　　完成後你應該看到的樣子

圖36

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