作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟件是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數
例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定
4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。
In this web design tutorial, we will create a beautiful and colorful portfolio layout using Photoshop. I’ll show you many techniques for creating different things like bended paper corners, dashed lines, image carousels, 3D bars, and more! I’ll walk you through each step in exact detail so you won’t be left guessing how to do a certain technique. We will use the 960 Grid System to create this layout (which I’ll cover at the start).
在本教程中，我們要在PS中創建美麗多彩的作品集。我會告訴你許多技術用於創建不同的東西，如彎曲的紙角，虛線，圖像跑馬燈，3D的橫幅，和更多！我將指導您完成每個步驟，精確的細節，你沒必要去猜測用了什么特別的技術。我們將使用960網格系統創建這個布局（一開始就使用）。
Step 1: Understanding the grid
Download the 960 Grid and unzip the archive. Inside the Photoshop template folder, you will find three .PSD files. Each one has a grid with certain number of columns (12, 16, and 24). For this layout, we will use the 16-column grid. So, open the file 960_grid_16_col.psd file in Photoshop. As you can see, you have 16 red (almost pinkish) vertical stripes inside your document. We will create the layout within these red vertical stripes.
In the Layers Panel you have two groups: “16 Col Grid” (which contains all the red vertical stripes) and “Layer 1″ (we don’t need this layer, so you can delete it).
To show or hide the grid, click on the eye icon of the “16 Col Grid” group in the Layers Panel to toggle its visibility. All the elements of the layout should be created beneath this group, so it has to be on top all the time. The .PSD file contains guidelines as well, which will be very helpful. To show or hide the guidelines go to View > Show > Guides (or press Ctrl/Cmd + ;).
This is pretty much everything you need to know about the grid.
Before we begin, make sure that your Info Panel is opened (Window > Info). During the tutorial, I will ask you to create shapes with a certain size and you will be able to see the exact width and height of your shapes in the Info panel while you are creating them.
步驟1：了解網格
下載960網格並解壓縮的存檔。在Photoshop模板文件夾內，你會發現三個PSD文件。每一個都有一定數目的列（12，16，和24）的網格。這種布局中，我們將使用16列的網格。所以，在Photoshop中打開該文件，960_grid_16_col.psd文件。你可以看到，你有16個紅色（幾乎是粉紅色的）在你的文檔中的垂直條紋。我們將在這些紅色的垂直條紋上創建網頁布局。
在圖層面板中有兩個組：“16 Col Grid”（其中包含所有的紅色豎條紋）和“圖層1”（我們並不需要這一層，這樣你可以刪除它）。
要顯示或隱藏網格，單擊眼睛圖標的“16 Col Grid”組在圖層面板中切換它的可見性。網頁布局的左右元素都在這個組的下方創建的，所以它總是在最上面。 PSD文件包含的參考線，這將是非常有益的。要顯示或隱藏的指引去查看“>”顯示“>”參考線“（或按Ctrl / Cmd的+ ;)。
這是幾乎所有你需要知道的關於網格。
在我們開始之前，請確保您打開信息面板（“窗口”>“信息”）。在本教程中，我會要求您創建具有一定規模的形狀，當您創建形狀時，你在“信息”面板中，將能看到確切的寬度和高度。
基本的知識點，了解布局系統的基本情況。本翻譯教程不使用布局系統。
Step 2: Modifying the size of the canvas
To give us more room height-wise, we need to increase the size of our canvas. Go to Image > Canvas Size and change the height to 1920px.
步驟2：修改畫布的尺寸
為了讓我們有更多的空間在高度方向上，我們需要增加我們的畫布的大小。點擊：圖像 > 畫布大小，高度為1920px。
由於不使用960布局系統，本步改成新建文檔，尺寸：1020px*1920px
Step 3: Creating the layout’s background
Select the Rectangle Tool (U) and create a white rectangle with the size 940px by 1920px. Make sure that Photoshop’s Guides are activated (Ctrl/Cmd + ;) so that you can create the rectangle easily. Name this layer “bg“, double-click on it to open the Layer Style window and use the settings from the following image to apply an Outer Glow and Stroke layer style.
步驟3：創建布局的背景
用矩形工具創建一個白色的矩形（40，0），尺寸：940px*1920px。確信PS的參考線是激活的（Ctrl/Cmd + ;），這樣你創建這樣的矩形是很簡單的。命名圖層為bg，雙擊打開圖層樣式窗口，按照下圖的設置給它添加外發光和描邊的圖層樣式
描邊的顏色： #1f1907
Step 4: Creating the header
Create a new group and name it “header“. Then select the Rectangle Tool (U) and create a rectangle using the color #aedee1. Name this layer “header bg“, double-click on it, and use the settings from the following image for a Gradient Overlay layer style.
步驟4：創建頭部區域
新建組header。然后選擇矩形工具創建一個矩形（40，0，940，96），顏色： #aedee1。命名為header bg，雙擊該圖層，按照下圖設置添加漸變疊加圖層樣式
Step 5: Site name letterpress type treatment
Select the Type Tool (T) and write the name of your layout using the color #93b9bb. I have used the font Museo 700 for the word “creative” and Museo 300 for “folio”.
Now we will create a letterpress type treatment using Photoshop’s layer styles. Double-click on your text layer to open the Layer Style window and use the settings from the following image for Inner Shadow, Inner Glow, and Bevel and Emboss layer styles. By the way, if you want a more detailed tutorial on this technique, check out Jacob’s Inset Typography tutorial on Six Revisions (which uses a different technique).
步驟5：網站名稱的凹型處理
選擇文字工具（T）的寫你的網站名字，顏色：#93b9bb。對文字creative使用字體：Museo 700，對文字folio使用字體：Museo 300。
現在，我們將創建一個凹型處理，使用Photoshop的圖層樣式。雙擊您的文字層，打開圖層樣式窗口按照下圖的設置內陰影、內發光、斜面和浮雕圖層樣式。順便說一下，如果你想知道一個更詳細的這種技術教程，檢視Six Revisions上的Jacob’s Inset Typography tutorial（使用不同的技術）。
Step 6: Creating a small cloud in the header
Create a new group and name it “cloud“.
Then select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a few white circles with different sizes.
Then arrange all these circles using the Move Tool (V) to form a cloud. Set the opacity of the “cloud” group to 80%.
步驟6：創建一個頭部區域中的一小片雲
創建一個新組，將其命名為cloud。
然后選擇橢圓工具（U），按住Shift鍵，以保持比例，並創建了幾個不同大小的白色圓圈。（具體地說，本翻譯教程用的是5個圓）
然后使用移動工具（V）安排這些圓形成雲。將cloud組的不透明度設置為80%。
Step 7: Creating a “hire me” banner
Now we are going to create a small piece of paper and write a call-to-action text over it that will attract possible clients. A strong call to action is very important for a portfolio website because it encourages visitors who might be looking to hire a designer to get in touch with the website’s owner.
Create a new group and name it “hire me“. Then select the Rectangle Tool (U) and create a small rectangle in the right side of the header using the color #f7efda.
Name this layer “paper“, double-click on it to open the Layer Style window, and use the settings from the following image.
步驟7：創建一個“hrie me”的公告欄
現在，我們要創建一個小的一張紙，在上面寫一個號召性文字去吸引潛在客戶。強調的號召性文字對作品集網站是非常重要的，因為它鼓勵有雇佣設計師意願的去點擊它去聯系網站的所有者。
創建一個新組hire me。然后選擇矩形工具（U），在頭部區域的右側創建一個小的矩形（795，15，145，81），顏色： #f7efda。
命名此圖層為paper，雙擊打開圖層樣式窗口，並按照下圖設置樣式。
Step 8: Bending a corner of the paper
Now I will show you how to create a bended corner effect in Photoshop. First, click on the vector mask of the “paper” layer to make it active.
Then select the Pen Tool (P), make sure that the “Shape layers” button is activated and select the Subtract from shape area button from the Options bar.
Now use the Pen Tool (P) to create a triangle over the upper right corner of the yellow rectangle as you see in the following image.
步驟8：折曲紙的一角
現在，我會告訴你如何在Photoshop中創建一個折曲的拐角效果。首先，對paper層激活矢量蒙版。
然后選擇鋼筆工具（P），確保模式是“形狀圖層”，並在選項欄中選擇“從形狀區域減去”按鈕。
現在使用鋼筆工具（P）創建一個三角形在黃色矩形的右上角，你在下面的圖片中看到。
這一步是非常有意思的步驟，在之前的教程中從未出現過，因此在這里補充詳細的過程，由於不善於使用鋼筆工具，在說明過程中用矩形工具替代
首先激活paper的矢量蒙版，點擊圖層面板上的paper層的矢量蒙版（paper層上的兩個矩形中的右邊的那個）。
然后選擇矩形工具，點中是“形狀圖層”和“從形狀區域減去”按鈕
在paper層上的矩形的右上角畫一個小的正方形（按住Shift鍵）
再用直接選擇工具選擇小矩形的右下角的控制點
按鍵盤上的delete鍵刪除左下角的控制點，使得形成一個三角形
鼠標點擊其余圖層，完成此步驟
Step 9: Apply a Gradient Overlay on the bended paper
Create a new layer and use the Pen Tool (P) to create a triangle like the one you see in the following image using the color #f1e9d3.
Name this layer “corner“, double-click on it and use the settings from the following image for Gradient Overlay.
步驟9：應用一個漸變疊加到折曲的紙張上
創建一個新圖層，使用鋼筆工具（P）創建一個三角形，顏色： #f1e9d3，就像下面的圖片中看到的一個三角形。
命名此層為“corner”，雙擊圖層並按照下圖設置漸變疊加。
對於不善於使用鋼筆工具的，可以用矩形工具加直接選擇工具選擇一個控制點后刪除的方法來實現三角形
Step 10: Adding shadow to the paper corner
Create a new layer beneath the “corner” layer.
Select the Pen Tool (P) and create a black triangle like the one from the following image.
Right-click on the new layer and select Convert to Smart Object.
Then go to Filter > Blur > Gaussian Blur and use a 2px radius.
Add a mask to this layer (Layer > Layer Mask > Reveal All), select a small black brush tip (B) and paint with it over the shadow from the right side of the paper corner to erase it.
Name this layer “shadow” and set its opacity to 15%.
步驟10：對紙的折角添加陰影
在corner層的下方，創建一個新的圖層。
選擇鋼筆工具（P），創建一個黑色三角形，就像下圖一樣。這一步還是用復制conner層比較好
右鍵單擊新圖層，選擇“轉換為智能對象”。可能由於PS版本的原因，在CS5版本中，為了完成后面的步驟，這一步應該是柵格化圖層。
然后點擊：濾鏡 > 模糊 > 高斯模糊，並使用一個2px半徑。
這一層（圖層 > 圖層蒙版 > 顯示全部）添加蒙版，選擇一個黑色的小筆尖（B）和塗抹它的右側的紙護角的影子，將其擦除。
命名此層為shadow，並設置其不透明度為15%
Step 11: Adding noise to the paper
Now we are going to add a little bit of noise to the paper to make it look more realistic. Ctrl/Cmd-click on the vector mask of the “paper” layer to make a selection of the paper. Create a new layer above all the other ones from this group and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).
Convert this layer into a smart object, then go to Filter > Noise > Add Noise and use the settings from the following image.
Name this layer “noise” and set its blending mode to Multiply and layer opacity to 15%.
In the following steps, we will add noise to other elements of the layout as well and I will refer to this step, so you might want to keep in mind this method.
步驟11：將雜色添加到紙張
現在我們要添加一點點的雜色在紙張上，以使它看起來更逼真。按Ctrl / Cmd+Click在在paper層的矢量蒙版上，作出紙張的選區。在該組所有其他層的上方中創建一個新層，選擇油漆桶工具（G）用白色（＃FFFFFF）填充選區。
這層轉換為智能對象，然后點擊：濾鏡 > 雜色 > 添加雜色，按照下圖設置。
命名此層為“noise”，並設置其混合模式為正片疊底，圖層不透明度改為15％。
在下面的步驟中，我們將添加其他元素的雜色，我也會重復這一步，所以你可能要牢記這種方法。
Step 12: Adding a text over the paper
Now it’s time to add your call-to-action text. Select the Horizontal Type Tool (T) and write a text over the paper using the color #514c3f and the font Museo.
步驟12：在紙上添加文字
現在是時候添加您的號召性文本。選擇橫排文字工具（T），並寫在紙張上的文字使用的顏色： #514c3f和Museo字體。
Step 13: Adding a paper airplane
Download a paper airplane image from the Internet and open it in Photoshop. Then use the Move Tool (V) to move the airplane into your document. The image I used is from GraphicRiver and it costs $3 (or $1 if you have a prepaid deposit).
Convert this layer into a smart object. Then go to Edit > Free Transform (Ctrl/Cmd + T), hold down the Shift key to maintain the proportions, change the size of the paper airplane, and rotate it. My airplane is pointing to the call-to-action banner to make it even more noticeable.
Go to Filter > Noise > Add Noise and use the settings from the following image.
Then name this layer “paper airplane“, double-click on it to open the Layer Style window and use the settings from the image below for a Drop Shadow layer style.
步驟13：添加一個紙飛機
從互聯網上下載一個紙飛機圖像，在Photoshop中打開它。然后使用移動工具（V）移動飛機到您的文檔中。我使用的圖像是從GraphicRiver的，它的成本為3美元（或1美元，如果你有一個預付訂金）。
把這層轉換為智能對象。然后點擊：編輯 > 自由變換（Ctrl / Cmd+ T），按住Shift鍵保持的比例，改變紙飛機的大小，並旋轉它。我的飛機指向的號召性文字的公告欄，使其更加明顯。
點擊：濾鏡 > 雜色 > 添加雜色，從下面的圖片中使用的設置。
然后將此圖層命名為paper airline，雙擊它打開圖層樣式窗口，按照下圖設置的投影的圖層樣式。
Step 14: Creating a dashed line behind the airplane
I used Adobe Illustrator (yeah, I cheated just a tad bit, but you can use Photoshop for this too – it just won’t be as easy) to create a dashed line behind the plane. If you don’t have Illustrator, you can download and use my dashed line PNG image called dashed_line.png (tips for Windows users: right-click on one of the links and select Save As). Open it in Photoshop and position it on your canvas using the Move Tool (V).
Optional: for Adobe Illustrator users
If you do have Adobe Illustrator and know how to use it, you can follow the next steps. Open a new document (Ctrl/Cmd + N) and use the Rectangle Tool (M) to create a big gray rectangle. Then select the Pen Tool (P) and create a path like the one from the following image. Use a 1pt white (#ffffff) stroke and no fill. Then open the Stroke Panel (Window > Stroke) and use the settings from the following image.
Select your dashed line using the Selection Tool (V), copy it (Ctrl/Cmd + C), go back to Photoshop, and paste it as a smart object (Ctrl/Cmd + V).
Name this layer “line” and put it beneath the “paper airplane” layer. Use Free Transform (Ctrl/Cmd + T) to rotate this line the way you want.
步驟14：創建紙飛機后面的虛線
我用了Adobe Illustrator中（是的，我只是一個稍微有點被騙，但可以使用Photoshop解決這件事 - 它是不會那么容易）創建一個飛機后面的虛線。如果你沒有Illustrator中，你可以下載和使用我的虛線dashed_line.png（提示Windows用戶：右鍵單擊的鏈接，選擇“另存為”）的PNG圖像。在Photoshop中打開它，和它放置在你的畫布，使用移動工具（V）。
可選：Adobe Illustrator的用戶
如果你有Adobe Illustrator和知道如何使用它，你可以按照下面的步驟。打開一個新文件（按Ctrl / Cmd+ N），使用矩形工具（M）創建一個大的灰色矩形。然后選擇鋼筆工具（P），像一個從下面的圖片中創建一個路徑。使用1點白色（＃FFFFFF）描邊和無填充。然后打開“筆觸”面板（點擊：窗口>描邊），從下面的圖片中使用的設置。
使用選擇工具（V）選擇您的虛線，將它復制（按Ctrl / Cmd+ C），返回到Photoshop中，作為一個智能對象（按Ctrl / Cmd+ V），並將其粘貼。
命名此層為line，並把它放在的paper airplane層的下方。使用自由變換（Ctrl / Cmd+ T），把這條虛線的移動到你想要的位置。
Step 15: Creating the navigation bar
Create a new group beneath the “header” group and name it “navigation bar“.
Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 40px and the color #c0e332. Name this layer “navigation bar bg“, double-click on it and use the settings from the following image.
步驟15：創建導航欄
在組header的下方創建一個新組navigation bar。
然后選擇矩形工具（U）創建一個矩形（40，96），尺寸：940px*40px，顏色： #c0e332。命名此層為navigation bar bg，雙擊它按照下圖進行設置。
Step 16: Make 1px lines for detail
Select the Line Tool (U), set the weight to 1px and create a horizontal line at the top of the navigation bar using the color #7e961d. Name this layer “1px dark line“.
Hit Ctrl/Cmd + J to duplicate this layer and move the new line at the bottom of the navigation bar.
步驟16：添加細節部分的1px線條
選擇直線工具（U）的權重設置為1px，並在導航欄的頂部創建一個水平線（40，96，940，1），顏色： #7e961d。命名此層為“1px dark line”。
按Ctrl/ Cmd+ J復制這個圖層，並移動新的水平線到導航欄的底部（40，135，940，1）。
Step 17: Give the 1px lines some depth
Create a new line with the weight of 1px using the Line Tool (U) and the color #d8fd42.
Name this layer “1px light line” and put it beneath the first dark line.
Duplicate this layer (Ctrl/Cmd + J) and put the new one above the second dark line.
步驟17：讓1px的線看起來有深度感
使用直線工具（U），粗細為1px，創建一個新的水平線，顏色： #d8fd42。
命名此層為“1px light line”，並把它移到第一條暗線的下方（40，97，940，1）。
復制這個圖層（Ctrl / Cmd+ J），並把它移到第二條暗線的上方（40，134，940，1）。
Step 18: Type out the navigation menu items
Select the Type Tool (T) and write the name for your navigation menu items. Use the font Museo 700 and the color #336600.
步驟18：輸入導航菜單項
選擇文字工具（T）和輸入導航菜單項的名稱。使用字體museo700，顏色： #336600。
Step 19: Creating the featured content area
Create a new group above the “navigation bar” group and name it “featured“.
Then select the Rectangle Tool (U) and create a rectangle with the dimensions 940px by 450px using the color #e6b633.
Name this layer “featured area bg“.
步驟19：創建特色內容區域
在navigation bar組上方創建一個新組featured。
然后選擇矩形工具（U）創建一個矩形（40，136），尺寸：940px*450px，顏色： #e6b633。
命名此層為featured area bg
Step 20: Add 1px lines for detail
Web design is all about the details. Use the Line Tool (U) to create two horizontal lines with the weight 1px at the bottom of the yellow rectangle.
For the dark line, use the color #755c18 and name the layer “1px dark line“.
For the light line, use the color #ffdf87 and name its layer “1px light line“.
步驟20：添加細節部分的1px線條
網頁設計是取決於的細節。使用直線工具（U）在黃色矩形的底部創建粗細1px的兩條水平線。
對於暗線（40，585，960，1），使用顏色： #755c18，圖層命名為1px dark line。
對於亮線（40，584，960，1），使用顏色： #ffdf87，圖層命名為1px light line。
Step 21: Adding noise to the featured content background
Now we will add some noise to the background of the featured content area just like we did with the paper. Ctrl/Cmd-click on the vector mask of the “featured area bg” layer to select the yellow rectangle. Then create a new layer and fill the selection with white (#ffffff) using the Paint Bucket Tool (G).
Convert this layer into a smart object.
Then go to Filter > Noise > Add Noise and use the settings from the following image.
Set the blend mode of this layer to Multiply, lower the layer opacity to 25%, and name it “noise“.
步驟21：添加特色內容背景的雜色
現在我們將在特色內容區域添加一些雜色，就像我們之前紙張的背景一樣。按Ctrl / Cmd+click點擊featured area bg的矢量蒙版，出線黃色矩形的選區。然后創建一個新層，使用油漆桶工具（G）用白色（#FFFFFF）填充選區。
將這層轉換為智能對象。
然后點擊：濾鏡 > 雜色 > 添加雜色，從下面的圖片中使用的設置。
設置這層的混合模式為正片疊底，圖層的不透明度降低到25％，並命名為noise。
Step 22: Creating a blue bar for the headlines
Create a new group and name it “blue bar“.
Then select the Rectangle Tool (U) and create a rectangle like the one you see in the following image using the color #1e92e4.
Name this layer “blue bar” as well, double-click on it to open the Layer Style window and use the settings from the following image to add a Gradient Overlay and Stroke layer style to it.
Then select the Move Tool (V) and move your rectangle 10px beyond the left edge of the layout and at a distance of 20px from the navigation bar.
步驟22：創建標題行的一個藍條
創建一個新組blue bar。
然后選擇矩形工具（U）創建一個矩形（30，156，190，42），顏色： #1e92e4，像下圖一樣。
命名此層為blue bar，雙擊打開圖層樣式窗口，並按照下圖添加一個漸變疊加和描邊圖層樣式。
然后選擇移動工具（V）和移動的矩形到超出的左邊緣10px，距上方導航欄的距離為20px。
描邊的顏色： #3a77be
Step 23: Create the 3D effect
Create a new layer, select the Pen Tool (P) and create a small triangle beneath the lower left corner of the rectangle to make the blue bar look like it’s 3D.
Name this layer “triangle“, double-click on it and use the settings from the following image for Gradient Overlay.
步驟23：創建3D效果
創建一個新的圖層，選擇鋼筆工具（P），並創建一個小的三角形在矩形的藍條左下角的下方，顏色： #166ead，看起來像它的3D陰影。
此步也可以是用矩形工具新建一個矩形（30，198，10，10），然后直接選擇工具選擇矩形的左下角的控制點，按delete刪除左下角的控制點，得到三角形
命名此層為triangle，雙擊圖層並按照下圖設置漸變疊加。
Step 24: Add the text on the blue bar
Select the Type Tool (T) and write “Featured »” on the blue bar using the font Museo 700 and the color #ffffff.
步驟24：在藍條上添加文字
選擇文字工具（T），並寫上Featured »在藍條上，使用的字體：Museo 700，顏色： #FFFFFF。
Step 25: Adding images to the featured content area
Create a new group and name it “images“.
Then open three images that you like in Photoshop and crop each one to the dimensions 290px by 260px. I just used some random images and screengrabs from Six Revisions and from my site PSDBURN.
Move each image in your canvas using the Move Tool (V), arranging them like you see below.
Add an Inner Glow and a Stroke to each image using the settings from the following image to create a double stroke effect.
步驟25：在特色內容區域中添加圖像
創建一個新組iamges
然后在Photoshop打開你喜歡的圖像，每一個都是260px*290px的尺寸。我只是用了一些隨機圖像和從Six Revisions上的screengrabs，和從我的網站PSDBURN。
在你的畫布上使用移動工具（V），排列他們，就像你看到下面的圖像。經測算，這3圖片的位置分別是（80，207）、（380，207），（680，207）
每個圖像按照下圖添加內發光和描邊的設置，創建一個雙描邊效果。
描邊的顏色： #5d5643
Step 26: Creating a “read more” button
Create a new group and name it “buttons“.
Then select the Rounded Rectangle Tool (U), set the radius to 6px and create a rounded rectangle using the color #f8c539.
Double-click on this layer to open the Layer Style window and use the settings from the following image.
Then select the Type Tool (T) and write “Read more »” on your button using the font Museo 500 and the color #3d382a.
步驟26：創建一個read more按鈕
創建一個新組buttons。
然后選擇圓角矩形工具（U），設置半徑為6px的，顏色： #f8c539，創建一個圓角矩形（322，524，179，41）。
雙擊層打開圖層樣式窗口，按照下圖進行設置。
然后選擇文字工具（T），並在按鈕上寫上Read more »，使用的字體Museo 500和顏色： #3d382a。
Step 27: Creating a “view portfolio” button
Duplicate the rounded rectangle layer which you have created at the previous step (Ctrl/Cmd + J) and move the new rounded rectangle to the right. Then change its color to #dfd7c0, and the stroke color to #ccc5b2.
Use the Type Tool (T), the font Museo 300 and the color #3d382a to write “View Portfolio” on your button.
步驟27：創建一個view portfolio按鈕
復制的上一步創建圓角矩形層（按Ctrl / Cmd+ J），移到上一步圓角矩形的右邊（522，524）。然后改變它的顏色為： #dfd7c0，描邊的顏色設置為： #ccc5b2。
使用文字工具（T），字體：Museo 300，顏色： #3d382a，在按鈕上寫View Portfolio
Step 28: Creating a lamp
Now we will create a lamp that will light the middle image from the featured content area. Create a new group and name it “lamp“. Then select the Rounded Rectangle Tool (U), set the radius to 7px and create a small rounded rectangle using the color #8f631e.
Double-click on this layer to open the Layer Style window and use the settings from the following image to apply Inner Shadow, Inner Glow, Gradient Overlay, and Stroke layer styles.
Name this layer “wood“.
Add a little bit of noise to the wood part of the lamp just like you did with the paper at the Step 11. Use an amount of 5% uniform and monochromatic noise.
Set the blend mode of this noise layer to Multiply 35%.
步驟28：創建一盞燈
現在，我們將在特色內容區域的中間將放置一個點亮的燈。創建一個新組lamp。然后選擇圓角矩形工具（U），設置半徑為7px的，並創建一個小的圓角矩形（475，162，66，12），顏色： #8f631e。
雙擊打開圖層樣式窗口，使用下圖設置內陰影、內發光、漸變疊加、描邊的圖層樣式。
命名此層為wood。
對燈的木質部分添加一點點的雜點就像你在第11步對紙一樣。使用5％的平均分布和單色。
設置noise層的混合模式的為正片疊底，不透明度為35％。
描邊的顏色： #634513
Step 29: Creating the lamp shade of our lamp
We’ll create a lamp that sort of illuminates our featured work, which is not only symbolic of what the featured area means, but also to bring more attention to this section of the web layout. Select the Rounded Rectangle Tool (U) and create a rounded rectangle like the one from the following image using the color #9ce340.
Make sure that the vector mask of this layer is selected, click on the Exclude overlapping shape areas button from the Options bar and drag a new rectangle over the bottom half of the first one to erase that area. Take a look at the following image for reference.
Then double-click on this layer and use the settings from the image below to add Inner Glow, Bevel and Emboss, Gradient Overlay and Stroke layer styles.
步驟29：為我們的燈創建燈罩
我們將按順序創建一盞燈，照亮我們的特色工作，這不僅是在的特色區域的符號，也希望帶來更多的關注這部分的網絡布局。選擇圓角矩形工具（U）創建一個圓角矩形（439，168，141，39），半徑設置為15px，像下面的圖片，顏色： #9ce340。
單擊選擇這層的矢量蒙版，在選項欄上選擇“從形狀區域減去”按鈕，並拖動一個新的矩形的在前一個矩形的下半部分，達到刪除的目的。就像下面的圖片一樣。和之前做的紙片折角的做法是一樣的。
然后雙擊這一層，從下面的圖像中添加內發光，斜面和浮雕，漸變疊加和描邊的圖層樣式。
描邊的顏色： #84b93d
Step 30: Giving our lamp a nice gradient overlay
Duplicate the layer which you have created at the previous step (Ctrl/Cmd + J) and set its fill to 0%. Right-click on this layer and select Clear Layer Style.
Then double-click on it and use the settings from the following image for Gradient Overlay.
步驟30：給我們的燈一個漂亮的漸變疊加
復制在上一步創建的圖層（按Ctrl / Cmd+ J），設置其填充為%。在該圖層上單擊鼠標右鍵，選擇清除圖層樣式。
然后雙擊它，按照下圖設置漸變疊加。
漸變編輯器的顏色： #535b5e、#fefefe、#535b5e、#fefefe、#535b5e。
Step 31: Add another gradient overlay on the lamp shade
Duplicate the layer from the previous step (Ctrl/Cmd + J) and use the settings from the following image for Gradient Overlay.
步驟31：給燈罩添加另一個漸變疊加
復制上一步的圖層（按Ctrl / Cmd+ J），並按照下圖設置漸變疊加。
Step 32: Add noise to the lamp shade
Add some noise to the lamp to give it a bit of texture using the same technique which you have used for the paper at the Step 11. Set the blend mode of this noise layer to Multiply and set the layer opacity to 15%.
步驟32：給添加雜色
給燈添加一些雜色，給它一點的質地，就像在第11步中對紙張使用的技術的技術一樣。這種雜色層設置混合模式為正片疊底，並設置圖層不透明度為15％。
Step 33: Giving the lamp shade some depth
Duplicate the layer which you have created at the Step 29 (“Shape 1″) and put it above the “noise” layer.
Clear the layer style and change the color of this shape to #eef8e2.
Go to Edit > Free Transform (Ctrl/Cmd + T) and decrease the width of the shape as you see in the image below.
Add a mask to this layer (Layer > Layer Mask > Reveal All), select the Gradient Tool (G) and drag a black to transparent gradient from the bottom to the middle of this shape.
Name this layer “highlight” and set its blend mode to Overlay and layer opacity to 20%.
步驟33：給燈罩一些深度
復制在步驟29中創建的圖層，並把它移到圖層noise的上面。
清除圖層樣式，並改變這種形狀的顏色：#eef8e2。
點擊：編輯 > 自由變換（Ctrl / Cmd的+ T），並減少寬度的形狀，當就像你看到的下圖。
給這一層（點擊：圖層 > 圖層蒙版 > 顯示全部）添加蒙版，選擇漸變工具（G），並選擇一個黑色到透明的漸變，從這形狀的底部到中間拖動漸變。
命名此層為highlight，並設置其混合模式為疊加，圖層不透明度為20％。
Step 34: Creating a light bulb
What would a lamp be without a light bulb? Create a new layer beneath the “Shape 1″ layer, select the Ellipse Tool (U) and create a circle (hold down the Shift key to create a perfect circle) using the color #f6f3a2.
Name this layer “light bulb“, double-click on it and use the settings from the following image for Inner Glow, Gradient Overlay, and Stroke layer styles.
步驟34：創建一個燈泡
沒有燈泡的燈怎么能算燈呢？ 在shade層下方創建一個新層，選擇橢圓工具（U）創建一個圓（按住Shift鍵，以創建一個完美的圓圈），顏色： #f6f3a2。
命名此層為light bulb，雙擊它按照下圖設置內發光、漸變疊加、描邊的圖層樣式。
描邊的顏色： #8cc93d
Step 35: Creating the light sourcing from the lamp
Create a new layer above the “light bulb” layer.
Then select the Pen Tool (P) and create a white shape like the one you see in the following image.
Convert this layer into a smart object.
Then go to Filter > Blur > Gaussian Blur and set the radius to 7px.
Name this layer “light” and set its opacity to 25%.
步驟35：創建從燈發出的光
在light bulb層上方創建一個新層。
然后選擇鋼筆工具（P），並創建一個白色的形狀像一個你看到下面的圖片。
不習慣使用鋼筆工具的，可以按照下面的步驟完成：
新建一個矩形（377，193，266，304），顏色： #f6f3a2
按Ctrl+T自由變換，右鍵選擇透視，拖動左上角的控制點到合適的位置，如下圖所示：
把這層轉換為智能對象。
然后去點擊：濾鏡 > 模糊 > 高斯模糊，設置半徑為7px。
命名此層為light，並設置其不透明度為25％。
Step 36: Creating the right arrow of the image carousel
Create a new group and name it “right arrow”. Select the Ellipse Tool (U) and create a circle in the middle of the right edge of the featured content area. Use the color #e6b633. Name this layer “circle“.
步驟36：創建走馬燈式的圖像的右箭頭
創建一個新組right arrow。選擇橢圓工具（U）創建一個圓圈，在特色內容區域的右部中間的位置。使用顏色： #e6b633。命名此層為circle。
Step 37: Add noise to the right arrow
Add some noise over the yellow circle using the same technique which you have use at the Step 11 for the paper.
步驟37：給右箭頭添加雜色
給黃色的圓添加一些雜色，和步驟11中給紙添加雜色的技術一樣。圖層混合模式是正片疊底，不透明度為25%
Step 38: Adding a stroke to the circle
Duplicate the “circle” layer (Ctrl/Cmd + J) and put the new one beneath it.
Double-click on this layer and use the settings from the following image to add an Outer Glow and a Stroke layer style.
Then add a mask to this layer (Layer > Layer Mask > Reveal All).
Select the Gradient Tool (G) and drag a horizontal black to transparent gradient from the left side of the circle to the right side. Take a look at the following image for reference.
Name this layer “stroke“.
步驟38：給圓添加描邊
復制circle圖層（Ctrl / Cmd+ J），並把新的圖層放到circle圖層的下方。
雙擊圖層，按照下圖設置外發光和描邊圖層樣式。
然后添加蒙版層（點擊：圖層 > 圖層蒙版 > 顯示全部）。
選擇漸變工具（G），並拖動水平的黑色到透明的漸變，從圓的左側拖動到右側（實際應該是圓的中左側拖到右側）。來看看下面的圖片，以供參考。
命名此層為stroke。
Step 39: Create the actual arrows
Select the Custom Shape Tool (U) and create two arrows on your circle using the color #fbf2db. The custom shape used below is called Arrow 2 (it comes as a default shape in Photoshop as part of the Arrows custom shape group). I chose this shape because it most resembles the arrows in the “Featured” blue bar text, giving us some repeating design elements in the layout.
步驟39：創建真實的箭頭
選擇自定義形狀工具（U）在你的園中創建2個箭頭，顏色： #fbf2db。該自定義形狀被稱為Arrow 2它（作為一個默認的形狀在Photoshop中的箭頭自定義形狀組的一部分）。我選擇了這個形狀，因為它最相似在“特色”藍色欄的文字中的箭頭，這給我們在布局中只用一些重復的設計元素。
Step 40: Creating the left arrow of the image carousel
Duplicate the “right arrow” group (right-click on it and select Duplicate Group).
Go to Edit > Transform > Flip Horizontal and use the Move Tool (V) to move it in the left side of the layout.
Name this group “left arrow“.
步驟40：創建走馬燈式的圖像的左箭頭
復制right arrow組（右鍵單擊它並選擇“復制組）。
點擊：編輯 > 變換 > 水平翻轉，和使用移動工具（V）移到左側的布局。
這組命名為left arrow
Step 41: Adding the name of the images
Create a new group and name it “image names“.
Select the Rounded Rectangle Tool (U), set the Radius to 5px and create a white (#ffffff) rounded rectangle at the bottom of each image from the featured content area.
Add a Stroke layer style to each of these rectangles using the settings from the following image.
Then select the Type Tool (T) and write the name of your images inside these rectangles using the font Verdana and the color #38352c.
步驟41：添加圖像的名稱
創建一個新組image names。
選擇圓角矩形工具（U），設置半徑為5px，創建特色內容區域的每個圖像的底部的白色圓角矩形，分別是（110，475，200，32）和（410，475，200，32）和（710，475，200，32）。
按照下圖為每個圓角矩形設置描邊圖層樣式。
然后選擇文字工具（T）和書寫每個圖像的名字，使用的字體：Verdana，顏色： #38352c。
描邊的顏色： #999382
Step 42: Creating the “services” area
Create a new group and name it “services“.
Select the Rectangle Tool (U) and create a rectangle with the height 340px using the color #e6e2d5.
Name this layer “services bg” and set its opacity to 25%.
步驟42：創建服務區域
創建一個新組services
選擇矩形工具（U）創建一個矩形（40，586，940，340），高度340px，顏色： #e6e2d5。
命名此層為“services bg”，並設置其不透明度為25％。
Step 43: Add the “Services” blue bar
Duplicate the “blue bar” group from the featured area and move it inside the “services” group.
Then use the Type Tool (T) to change the text “Featured” into “Services“.
步驟43：添加服務區域的藍條
復制特色區域中blue bar組，從特色區域組里移到services組。
然后使用文字工具（T）把Featured改為Services。
Step 44: Adding a list of services
Create a new group and name it “navigation“.
Select the Rectangle Tool (U) and create a rectangle beneath the blue one using the color #edeadf.
Double-click on this layer to open the Layer Style window and use the settings from the following image for Gradient Overlay.
Duplicate this rectangle three times and arrange all of them using the Move Tool (V).
步驟44：添加一個服務列表
創建一個新組navigation
選擇矩形工具（U）在藍條的下方創建一個矩形（40，648，180，42），顏色： #edeadf。
雙擊打開圖層樣式窗口，按照下圖設置漸變疊加。
復制這個矩形三次，使用移動工具（V）移動到合適的位置。
Step 45: Create separators
Select the Line Tool (U) and create lines with the weight 1px to separate the rectangles which you have created at the previous step. Use the color #d9d6c9. Then group all these layers (Ctrl/Cmd + G) and name the group “separators“.
步驟45：創建分隔線
選擇直線工具（U）創建的粗細1px的線，分隔你在上一步中創建的矩形。顏色： #d9d6c9。然后選中所有這些層歸並到一組（按Ctrl / Cmd+ G），並將其命名為separators。
這五條直線分別是（40，689，180，1）和（40，731，180，1）和（40，773，180，1）和（40，815，180，1）和（219，648，1，168）
Step 46: Write out services you offer
Select the Type Tool (T) and write a list of services using the font Museo 300 and the color #3f3d36.
步驟46：提供服務的列表
選擇文字工具（T）寫服務列表，字體Museo 300，顏色： #3f3d36。
Step 47: Adding an image for each service
Now we will add a representative image for each service listed. Create a new group and name it “images“. Then add an image cropped to the dimensions 160px by 210px. Copy the layer style from one of the images from the featured content area and paste it to this image to get the same double stroke effect.
Use the Rounded Rectangle Tool (U) to create a white rounded rectangle at the bottom of this image.
Then add a 1px #999381 stroke to this layer.
Select the Type Tool (T) and write the name of the first service from your list inside this rectangle using the font Verdana and the color #38352c.
步驟47：給每個服務添加圖像
現在我們將給每個服務添加代表圖像。創建一個新組images。然后添加一個圖像（240，606），裁剪的尺寸160px*210px。復制特色內容區域的圖像的圖層樣式，並將其粘貼到該圖像獲得相同的雙描邊效果。
使用圓角矩形工具（U）在圖片的底部創建一個白色圓角矩形。
對這一層添加1px的描邊，顏色：#999381
用文字工具在矩形中書寫服務列表中的第一個服務的名字，字體：Verdana，顏色： #38352c
Step 48: Add more images
Add three more images and repeat the previous step for each one.
Then move the second and the fourth images 20px down (select the images, chose the Move Tool (V), hold down the Shift key and hit the down arrow key twice). This looks a little bit more interesting than having every image aligned the same way.
步驟48：添加更多圖片
添加另外三個圖像，並為每一個重復前面的步驟。
然后將第二個和第四個向下移動20像素（選擇圖片的圖像，選擇移動工具（V），按住Shift鍵的同時按下向下箭頭鍵兩次）。這比每一個圖像都對准，看起來有點更有趣。
Step 49: Adding two call-to-action buttons
Duplicate the two buttons from the featured content area and move them beneath the images from the services area using the Move Tool (V). Then change the text of the yellow button into “Hire me today!” and write a few words before it. Take a look at the following image for reference.
Now the visitors/potential clients who like the works presented in the portfolio site have two options here: to hire the designer or to view more of his work. Through these call-to-action buttons, we want to encourage the potential clients to take action and get in touch with us for a new project. Since “Hire me today!” is our most desired call-to-action, we use a more prominent color for it, as well as position it to the left, which for left-to-right English language readers, would be the first thing they would see.
步驟49：添加兩個功能按鈕
復制特色內容區域的兩個按鈕，並使用移動工具（V）將其移動到服務區域的圖像下。然后更改黃色按鈕的文本為Hire me today!，並在前面寫了句話。來看看下面的圖片，以供參考。
喜歡呈現在作品集網站中的作品的潛在客戶有兩種選擇：，聘請設計師或查看他的工作。通過這些功能按鈕，我們要鼓勵潛在客戶主動與我們聯系，並得到一個新的項目。由於Hire me today！是我們最想要的行動，我們使它使用更加突出的顏色，以及左邊的位置，從左到右的英文讀者，將是他們看到的第一個的按鈕。
Step 50: Adding two separators
Create two lines with the weight of 1px at the bottom of the services area. Use the color #c0bcb1 for the first line and #ffffff for the second one.
步驟50：添加2條分隔符
在服務區域的底部創建2條粗細為1px的水平直線。第一條直線（40，925，940，1）顏色： #c0bcb1，第二條直線（40，924，940，1）顏色： #ffffff
Step 51: Creating a background for the blog area
Create a new group beneath the “services” group and name it “blog“. This will feature excerpts from blog posts, which many portfolios nowadays have.
Select the Rectangle Tool (U) and create a rectangle with the height 345px using the color #f8f5ec.
Name this layer “blog bg” and set its opacity to 25%.
步驟51：創建的博客區域的背景
在services組下方，創建一個新組blog。這將有博客文章的摘要，我們現在已經有很多的博客文章。
選擇矩形工具（U）創建一個矩形（40，926，940，345），顏色： #f8f5ec。
命名此層為blog bg，並設置其不透明度為25％。
Step 52: Adding a blue bar to the blog area
Duplicate the “blue bar” group from the services area and move it down.
Use the Type Tool (T) to change the text “Services” into “Blog“.
步驟52：給博客區域添加藍條
復制服務區域的blue bar組，並往下移動到合適位置
用文字工具將文本Services改為Blog
Step 53: Writing the blog’s categories
Duplicate the “navigation” group from the services area and move it into the “blog” group.
Then use the Move Tool (V) to move the rectangles beneath the blue bar of the blog area. We’ll use this list for the blog’s categories.
Select the Type Tool (T) and change the text of the list. If necessary, add more rectangles by duplicating one of these layers as many times as you need.
步驟53：書寫博客的類別
復制服務區域的navigation組，並把它移動到blog組。
然后使用移動工具（V）移動到博客區域的藍條矩形下方。我們將使用這個書寫博客的分類列表。
選擇文字工具（T）和更改文本的列表。如果有必要，很多時候，你需要通過復制這些層以便添加更多的矩形。
別忘了把分隔符也一起復制過來，並作適當的修改
Step 54: Adding two blog posts
Create a new group and name it “posts”. Add two images to your blog area with the dimensions 340px by 140px.
Copy the layer style from one of the images from the services area and paste it to these two images to get the same double stroke effect.
Then select the Type Tool (T) and write some text beneath your images. Use the font Verdana with the color #222222 for headlines and #444444 for the block of text.
步驟54：增加兩個博客文章
創建一個新組posts。添加到您的博客區的兩幅圖像，尺寸：340px*140px。
從服務領域的圖像復制的圖層樣式，並將其粘貼到這兩個圖像，使其達到相同的雙描邊效果。
然后選擇文字工具（T），在您的圖片下面寫一些文字。標題的顏色：#222222，文本塊的顏色：#444444，字體：Verdana。
Step 55: Call-to-action to read your blog
Use the Type Tool (T) to write the question “Want more articles and tutorials?” beneath the blog posts. Then add a button next to this question with the text “Read the blog“.
Note: you can duplicate this button from the “services” group.
步驟55：添加功能按鈕read your blog
使用文字工具（T）在你博客文章的下方寫Want more articles and tutorials?。然后添加一個按鈕，添加回答這個問題的文本Read the blog。
注意：您可以從services組中復制此按鈕。
Step 56: More separators
Duplicate the two separator layers from the bottom of the services area and use the Move Tool (V) to move them at the bottom of the blog area.
步驟56：更多的分隔符
復制服務區域底部的分隔符圖層並用移動工具移動它們到博客區域的底部
Step 57: Creating the “About me” area
Create a new group, name it “about” and move it beneath the “blog” group.
Select the Rectangle Tool (U) and create a rectangle with the height 200px and the color #e6e2d5. Name this layer “about bg” and set its opacity to 25%.
Duplicate a blue bar group which you have created at the previous steps, move it in the upper left corner of this area and change the text into “About me”.
Write a couple of sentences beneath the blue bar using the Type Tool (T). Then you can add some social icons beneath this text. The ones which I have used are from Function and you can download them for free.
Finally, add two lines with the weight 1px at the bottom of this area.
步驟57：創建的關於我區域
創建一個新組about，並將其移動blog組的下方。
選擇矩形工具（U）創建一個矩形（40，1271，940，200），顏色： #e6e2d5。命名此層為“about bg”，並設置其不透明度為25％。
復制你在前面的步驟中創建的藍條，並移動到這個區域的左上角並更改文本About me。
使用文字工具（T）在藍條下面的寫一段句子。然后你可以添加一些社會媒體圖標。我都用的是Function上的，你可以免費下載。
最后，在此區域的底部添加兩條1px的直線（可以復制之前博客區域底部的分割符）。
Step 58: Creating the contact area
Create a new group beneath the “about” group and name it “contact“.
Use the Rectangle Tool (U) to create a rectangle with the height 450px and the color #f8f5ec. Name this layer “contact bg” and set its opacity to 25%.
Duplicate a blue bar group which you have previously created.
Move this new blue bar in the upper left corner of the contact area and use the Type Tool (T) to change the text into “Contact“.
步驟58：創建的聯系我們區域
在about組下面創建一個新組contact。
使用矩形工具（U）創建一個矩形（40，1271，940，449），顏色：#f8f5ec。命名此層為contact bg，並設置其不透明度為25％。
復制你在前面的步驟中創建的藍條復制你在前面的步驟中創建的藍條。
將這個新的藍條放聯系區域的左上角，並使用文字工具（T）更改文本為Contact。
Step 59: Create the contact form send button
Use the Rectangle Tool (U) to create a contact form. Set the color of each rectangle to #ebe9e5. Then use the Type Tool (T) and the color #8c8a86 to write the name of each field of the contact form inside it.
Add a send button beneath the contact form.
You can duplicate one of the buttons which you have previously created and change the text to “Send“.
步驟59：創建的聯系表單和發送按鈕
使用矩形工具（U）創建一個聯系表單。每個矩形的顏色設置：#ebe9e5。然后使用文字工具（T），顏色：#8c8a86，寫聯系表單里的每個字段的名稱。
在聯系表單的下方添加發送按鈕。
您可以復制您以前創建的按鈕並更改文本為Send按鈕，並移動到合適的位置。
Name表單：（100，1553，280，36）
E-mail表單：（100，1599，280，36）
Subject表單：（100，1645，280，36）
Message表單：（100，1691，400，130）
Step 60: Creating the footer
We’re coming to the final step of this tutorial, so keep at it! Create a new group and name it “footer“. Then use the Rectangle Tool (U) to create a rectangle with the height of30px and the color #e6e2d5.
Name this layer “footer bg” and set its opacity to 25%.
Add two lines with the weight 1px at the top of the footer.
Then select the Type Tool (T) and write a copyright statement.
Use the font Verdana and the color #595753.
步驟60：創建頁腳
我們本教程的最后一步，堅持下去！創建一個新組footer。然后使用矩形工具（U）創建一個矩形（40，1888，940，32），顏色： #e6e2d5。
命名此層為“footer bg”和設置其不透明度為25％。
在頁腳的頂部添加兩條1px的水平線（可以復制博客區域底部的兩條分隔符）。
然后選擇文字工具（T），寫一個版權聲明。
使用字體：Verdana字體，顏色： #595753。
最終的結果：
后記：
這也是一篇非常詳盡的教程，一共有60步。本片教程的亮點有，通過“從形狀區域減去”達到某些特殊的效果，例如紙的折角效果，燈罩的效果等。二是大量的運用了漸變疊加的效果，來達到美觀的效果。教程中的燈的制作也是一個亮點，就是這幾步單獨拿出來也是一篇不錯的教程。