作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟件是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數
例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定
4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。
Step 1
After you open the “960_grid_24_col.psd” file in Photoshop, go to Image > Canvas Size and use the settings from the following image to increase the dimensions of our document.
步驟1
在PS中打開960_grid_24_col.psd后，點擊：圖像 > 畫布大小，按照下圖調整文檔的大小。
由於沒有下載960_grid_24_col.psd，故本步驟就變成新建文檔，大小為1200*1400
Click on the “Create new fill or adjustment layer” button from the bottom of the Layers panel (the half-white-half-black circle), select Solid Color and use the color #d2e9f2.
點擊在布局面板底部的“創建新的填充或調整圖層”按鈕（半黑半百的圓），選擇純色，顏色： #d2e9f2。
Step 2
Create a new group (Layer > New > Group) and name it “top bar”. Then select the Rectangle Tool (U) and create a rectangle at the top of your layout with the height 10px and the color #829ea8. Name this layer “top bar”.
Select the Line Tool (U), set the weight to 1px and create a horizontal line at the bottom of the rectangle which you created earlier using the color #6b838c. Name this layer “1px line”. Hit Ctrl/Cmd + J to duplicate this layer. Change the color of the new line to #a2c2cd, select the Move Tool (V) and hit the up arrow once to move this layer one pixel up.
步驟2
創建一個新組（圖層 > 新建 > 組），命名為top bar。然后用矩形工具在布局的頂部創建一個矩形，高度10px，顏色： #829ea8.命名此圖層為top bar。
用直線工具，設置粗細為1px，在剛才的矩形的底部創建一條水平直線，顏色： #6b838c。命名為1px line。點擊Ctrl/Cmd + J復制此圖層。更改新的直線顏色為： #a2c2cd，選中移動工具並按上箭頭一次，上移本圖層一個像素
Step 3
Use the Rectangular Marquee Tool (M) to create a selection underneath the top rectangle. Then create a new layer underneath the “top bar” group, select the Gradient Tool (G) and drag a black-to-transparent gradient from the top of the selection to the bottom. Hit Ctrl/Cmd + D to deselect. Name this layer “gradient” and set its blend mode to Overlay 50%.
步驟3
用矩形選擇工具在矩形的下部創建一個矩形選區（0，10，1200，200）（在創建一個選區后，點擊：選擇 > 變換選區，手動調整選區）。在top bar組的下部創建一個新的圖層，選擇漸變工具，在選區從頂到底創建一個黑-透明漸變。按Ctrl/Cmd + D取消選區。命名此圖層為gradient，設置混合選項為疊加，不透明度為50%。
Step 4
Create a new group underneath the “top bar” group and name it “logo”. Select the Type Tool (T) and write the name of your layout using a bold font (such as “Myriad Pro Black Semiextended Italic”) and the color #c1de5d. Double-click on this text layer to open the Layer Style window and use the settings from the following image.
Activate the guides and put your text layer as you see in the image below.
步驟4
在top bar組的下方創建logo組。用文字工具書寫你的布局的名字，用粗體的字體（就像Myriad Pro Black Semiextended Italic），顏色： #c1de5d。雙擊該圖層打開圖層樣式窗口按照下圖設置樣式
激活參考線，按照下圖布置你的文字圖層。（由於沒有參考線，故本步驟忽略）
文字字體設置如下圖：
文字圖層樣式如下：
Step 5
Download the Lams vector pack and open the .AI file in Adobe Illustrator. Then use the Selection Tool (V) to select the green lamp. Hit Ctrl/Cmd + C to copy it, go back to Photoshop and hit Ctrl/Cmd + V to paste it as a smart object. Name this layer “lamp” and use Free Transform (Ctrl/Cmd + T) to change its size and move it above the logo. Hit Ctrl/Cmd + G to put this layer inside a group and name it “lamp”.
步驟5
下載Lams vector pack，在Adobe Illustrator中打開.AI文件。選擇綠燈，按Ctrl/Cmd + C復制，回到PS中按Ctrl/Cmd + V粘貼為智能對象。命名圖層為lamp，用自由變形（Ctrl/ + T）更改它的大小並移動到logo的上方。按Ctrl/Cmd + G將這個圖層歸到新組，命名新組為lamp
Step 6
Select the Pen Tool (P) and make sure that the “Shape layers” button from the option bar above the image is active. Set the color to a bright yellow (#fbfcb6) and create a shape like the one you see in the image below. Name this layer “light”.
步驟6
選擇鋼筆工具，確保在選項欄上的“形狀圖層”按鈕是激活的。設置顏色為亮黃色（#fbfcb6），創建一個像下圖一樣的形狀。命名該圖層為light。
不習慣用鋼筆工具的就按照下列步驟完成
新建一個矩形（158，90，176，110），顏色：#fbfcb6。命名圖層為light
按Ctrl/Cmd + T自由變換，右鍵選擇透視，拖動左上角的控制點向右62px
Right-click on this layer and select Convert to Smart Object. Then go to Filter > Blur > Gaussian Blur and set the radius to 4px.
在圖層上右鍵選擇轉換為智能對象。然后點擊：濾鏡 > 模糊 > 高斯模糊，設置半徑為4px
Add a mask to this layer by clicking on the “Add layer mask” button from the bottom of the Layers panel. Then select the Gradient Tool (G) and drag a black-to-transparent gradient from the bottom area of the light to the middle area. Set the blend mode of this layer to Overlay 50%.
在圖層面板的底部點擊“添加圖層蒙版”按鈕給該圖層添加蒙版。然后選擇漸變工具，在light的底部到中部拖動一個黑-透明的漸變。設置混合選項為疊加，不透明度為50%
Step 7
Create a new group and name it “navigation bar”. Then select the Rounded Rectangle Tool (U), set the Radius to 4px and create a rounded rectangle with the dimensions 650px by 46px and the color #adcf4f. Name this layer “navbar” and put it in the right side of your layout.
Double-click on this layer to open the Layer Style window and use the settings from the image below.
步驟7
創建新組navigation bar。選擇圓角矩形工具，設置半徑為4px，創建一個圓角矩形（755，144），尺寸：650px*46px，顏色： #adcf4f。命名此圖層為navbar，移動該圖層到布局的右側。
雙擊該圖層打開圖層樣式窗口，按照下圖設置樣式
投影的顏色： #95b93b
Step 8
Hit Ctrl/Cmd + J to duplicate the “navbar” group. Then go to Edit > Free Transform (Ctrl/Cmd + T), click on the top edge of the transformation box and drag it to the middle of the navigation bar. Right-click on this layer and select Clear Layer Style. Then name this layer “shine”, set its fill to 0%, double-click on it and use the settings from the following image for Gradient Overlay.
步驟8
按Ctrl/Cmd + J復制navbar組（應該是圖層）。然后點擊：編輯 > 自由變換（Ctrl/Cmd + T），點擊變形方塊的頂邊拖動到navgation bar的中部。右鍵該圖層選擇清除圖層樣式。命名此圖層為shine，設置填充為0%，雙擊該圖層按照下圖設置漸變疊加的圖層樣式。
Step 9
Create a new group and name it “menu items”. Select the Type Tool (T) and write the name for your navigation menu items using the color #f1f5e1. Then add a shadow to these text layers using the settings from the following image.
步驟9
創建新組menu items。用文字工具添加導航菜單的文字，顏色： #f1f5e1。對這些文字圖層按照下圖添加圖層樣式
Step 10
Download these social media icons. Then open some of these icons in Photoshop and move them into your document using the Move Tool (V). Change the size of these layers if necessary and put them above the navigation bar. Group these layers together (Ctrl/Cmd + G) and name the group “social icons”.
步驟10
下載social media icons。在PS中打開一些圖標然后用移動工具移動到你的文檔。更改這些圖標到合適的大小，移動這些圖標到導航欄的上方。把這些組歸成一組（Ctrl/Cmd + G），命名組為social icons
Step 11
Now we will create the background for the content. Create a new group and name it “content bg”. Then select the Rectangle Tool (U) and create a white rectangle with the dimensions 970px by 1080px. Name this layer “content bg” as well.
Select the Line Tool (U) and create a 1px vertical line over the left edge of the white rectangle using the color #becdd2. Name this layer “1px line”, duplicate it (Ctrl/Cmd + J) and move the new layer in the right side of the white rectangle.
Add another horizontal line at the top of the white rectangle using the color #d5ae33.
步驟11
現在要創建內容塊的背景。創建新組content bg。選擇矩形工具創建一個白色的矩形（115，250），尺寸為970px*1080px。命名此圖層為content bg。
選擇直線工具，在白色矩形的左邊畫一條1px的豎直直線（115，250，1，1080），顏色： #becdd2，命名此圖層為1px line。復制此圖層（Ctrl/Cmd + J），移動新圖層到白色矩形的右邊（1084，250，1，1080）。
在白色的矩形的頂部添加一條水平直線（115，250，970，1），顏色： #d5ae33
Step 12
Create a new group underneath the “content bg” layer and name it “categories”. Then select the Rounded Rectangle Tool (U) and create a rounded rectangle as you see in the image below using the color #fecf2e. The bottom area of this rounded rectangle should go underneath the big white rectangle. Name this layer “bar”.
步驟12
在content bg圖層的下方創建新組categories。然后選擇圓角矩形工具如下圖創建圓角矩形（115，210，970，46）並設置樣式，顏色： #fecf2e。圓角矩形的底部和大白矩形相接。名名此圖層為bar
Step 13
Create a new group and name it “category items”. Then select the Type Tool (T) and write the name of some blog categories using the color #735f16.
步驟13
創建新組category items。用文字工具添加一些博客類別文字，顏色： #735f16
Step 14
Create a new group and name it “search bar”. Select the Rectangle Tool (U) and create a rectangle in the right hand side of the yellow bar using the color #f4f0e2. Name this layer “search bar”, double-click on it and add a 1px stroke using the color #c6ba92.
Select the Type Tool (T) and write the words “Type and hit enter to search” inside the rectangle you created using the color #95916e.
步驟14
創建新組search bar。選擇矩形工具在黃色矩形的右手邊創建一個矩形（840，218，224，25），顏色： #f4f0e2。命名此圖層為search bar，雙擊該圖層添加1px的描邊，顏色： #c6ba92。
用文字工具在矩形的內部添加文字Type and hit enter to search，顏色： #95916e
Step 15
Create a new group above the “content bg” group and name it “image slider”. Activate the guides, select the Rectangle Tool (U) and create a rectangle with the dimensions 710 x 300px using any color you want. Name this layer “image holder”.
Open an image that you like in Photoshop and move it into your first document using the Move Tool (V). Make sure that the layer of the image is above the “image holder” layer, right-click on it and select Create Clipping Mask. Now your image layer is visible only inside the rectangle you created. Name this layer “image”. You can use Free Transform (Ctrl/Cmd + T) to change the size of this layer or rotate it.
步驟15
在content bg組的上方創建新組image slider。激活參考線，選擇矩形工具創建一個矩形（125，260），尺寸：710px*300px，顏色隨意。命名此圖層為image holder
在PS中打開一張圖片，用移動工具移到合適的位置。確保圖片圖層在image holder圖層的上方，右鍵該圖層選擇創建剪貼蒙版。現在你的圖片圖層只有在矩形的內部才能顯示。命名此圖層為image。你可以用自由變換（Ctrl/Cmd + T）更改大小或旋轉。
注：可以把矩形的背景顏色改為#d2e9f2，這樣即使圖片有空余的部分，也會在空余部分顯示背景顏色
Step 16
Select the Rectangle Tool (U) and create a rectangle with the dimensions 230px by 300px and the color #dae7ec. Name this layer “text bg”, double-click on it and use the settings from the following image.
步驟16
用矩形工具創建一個矩形（605，260），尺寸：230px*300px，顏色： #dae7ec。命名此圖層為text bg。雙擊圖層按照下圖設置樣式
Step 17
Use the Line Tool (U) to create three lines over the top, right and left edges of your “text bg” rectangle using the color #a1b3bb. Then add another vertical line next to the left edge using the color #d7e6ed.
步驟17
用直線工具在text bg矩形的頂邊（605，260，230，1）、左邊（605，260，1，300）、右邊（834，260，1，300）畫三條直線，顏色： #a1b3bb。添加另一條垂直直線在左邊直線的右邊（606，260，1，300），顏色：#d7e6ed
Step 18
Select the Type Tool (T) and add some text inside the blue rectangle using the color #484f52.
步驟18
用文字工具添加一些文字在剛才的矩形中，顏色： #484f52
Step 19
Select the Rounded Rectangle Tool (U) and create a rounded rectangle underneath the “image holder” layer using the color #abcdda. Name this layer “bottom bar”, double-click on it and use the settings from the following image. For the Drop Shadow I used the color #819aa4.
步驟19
用圓角矩形工具在image holder圖層的下方創建一個圓角矩形（125，554，710，46），顏色： #abcdda。命名此圖層為bottom bar，雙擊該圖層按照下圖設置圖層樣式。投影的顏色： #819aa4
Step 20
Create a new group and name it “bullet points”. Then select the Ellipse Tool (U) and create some circles using the color #7d98a2 and the dimensions 10 x 10px. Put these circles in the left hand area of the bottom rounded rectangle. Then create another circle inside the first one using the color #d6e8ef.
步驟20
創建新組bullet points。選擇橢圓工具，創建一些圓，顏色： #7d98a2，尺寸：10px*10px。把這些圓排在剛才的圓角矩形的左手邊。在第一個圓中創建一個小圓（6px*6px），顏色： #d6e8ef
Step 21
Create a new group and name it navigation. Then use the Line Tool (U) to create some separators as you see in the image below. I used the colors #a1b3bb and #d7e6ed.
Select the Type Tool (T) and create an arrow symbol (») using the color #e9f2f6. Add a shadow to this layer using the settings from the image below. Duplicate this arrow (Ctrl/Cmd + J), go to Edit > Transform > Flip Horizontal and move it to the left.
Select the Type Tool (T) and write the words “Read More” between the two arrows. Use the same color and shadow proprieties that you used for the first arrow.
步驟21
新建組naigation。用直線工具按照下圖添加一些分隔符。顏色分別為： #a1b3bb和#d7e6ed
第一個分割符的兩條直線為
（605，560，1，30），顏色： #d7e6ed
（606，560，1，30），顏色： #a1b3bb
合並這兩條直線到separator組
復制separator組兩次，分別移動到（635，560），（805，560）
用文字工具創建箭頭符號（»），顏色： #e9f2f6.給本圖層按照下圖添加圖層樣式。復制該箭頭（Ctrl/Cmd + J），點擊：編輯 > 變換 > 水平翻轉，移動到左側的合適位置。
用文字工具在兩個箭頭之間書寫文字Read More。加上和箭頭相同的顏色和投影。
Step 22
Select the Line Tool (U) and create two horizontal lines at the top of the blue bar using the colors #b8d9e5 and #a1b3bb. Put these layers above all the other layers from the “image slider” group.
步驟22
用直線工具創建兩條水平直線在藍色的矩形的上方，顏色分別為#b8d9e5和#a1b3bb。把這兩個圖層移到image slider組其他圖層的上方。
兩條直線分別為
（125，559，710，1），顏色： #a1b3bb
（125，560，710，1），顏色： #b8d9e5
Step 23
Now we will create some blog posts. Create a new group and name it “blog”. Activate the guides to help you arrange the layers better.
Then add an image with the dimensions 200x200px. Double-click on this layer to open the Layer Style window and use the settings from the following image. I used the color #e6f0f4 for Inner Glow and #b6c1c6 for Stroke.
Now select the Type Tool (T) and add a text next to the image using the color #484f52.
步驟23
現在要添加一些博客的列表。創建新組blog。激活參考線幫助你對齊這些圖層
然后添加一個圖片（125，612），尺寸：200px*200px。雙擊該圖層打開圖層樣式窗口，按照下圖設置樣式。內發光的顏色： #e6f0f4，描邊顏色： #b6c1c6
用文字工具在圖片的右側添加一些文字，顏色： #484f52
Step 24
Create a new group and name it “button”. Then select the Rounded Rectangle Tool (U) and create a small rectangle using the color #add2e0. Double-click on this layer and use the settings from the following image. For the Stroke I used the color #97b3bd. Select the Type Tool (T) and write the words “Continue Reading »” inside the blue button using the color #68858f.
Select the layers that are inside the “blog” group and hit Ctrl/Cmd + G to put them inside another group. Name the new group “post 1″.
步驟24
創建新組button。用圓角矩形工具創建一個小的圓角矩形（340，744，139，25），顏色： #add2e0。雙擊圖層按照下圖設置樣式。描邊的顏色為#97b3bd。用文字工具在藍色按鈕中間書寫Continue Reading »，顏色： #68858f
選擇blog組中的所有圖層，按Ctrl/Cmd + G把他們歸為一組，組名為post 1
Step 25
Duplicate the “post 1″ group two times and arrange your blog posts using the Move Tool (V). Take a look at the image below for reference.
步驟25
復制post 1組兩次，用移動工具對齊你的博客列表。就像下圖所示
后面兩個位置分別為（125，842）和（125，1072）
Step 26
Create a new group and name it “sidebar”. Select the Rectangle Tool (U) and create a rectangle like the one you see in the image below using the color #ebf4f7. Name this layer “sidebar bg”, double-click on it and use the settings from the following image for Gradient Overlay.
步驟26
創建新組sidebar。用矩形工具按照下圖創建一個矩形（845，251，240，1079），顏色： #ebf4f7。命名為sidebar bg，雙擊圖層按照下圖設置漸變疊加
Step 27
Create a new group and name it “banners”. Then select the Rectangle Tool (U) and create a rectangle with the dimensions 210 x 100px and the color #e9eeef. Double-click on this layer and use the settings from the following image. For Inner Glow I used the color #fdfdfd and for the Stroke I used #d2d2d2. Select the Type Tool (T) and write the words “Ad space” in the middle of your rectangle. You can create as many banners like this one as you want.
步驟27
創建新組banners。用矩形工具創建一個矩形（860，260），尺寸：210px*100px，顏色： #e9eeef。雙擊該圖層按照下圖設置圖層樣式。內發光的顏色： #fdfdfd，描邊的顏色： #d2d2d2。用文字工具在矩形的中部添加文字Ad space。你可以按照你想設置banners
另一個矩形的位置為（860，370）
Step 28
Select the Type Tool (T) and add some content inside your sidebar using the color #626c70.
步驟28
用文字工具添加一些文字在sidebar中，顏色： #626c70
Step 29
I also created an area for Flickr images. To create the squares I used the Rectangle Tool (U) and I added a double-stroke effect like I did with the banners (with the size of the Inner Glow set to 5px).
步驟29
我也要創建Flick圖片區域。用矩形工具創建正方形，然后添加雙描邊效果就像前面的廣告一樣（內發光的尺寸為5px）
第一個矩形（860，890，62，62），顏色： #e4ecee。復制步驟27中的圖層樣式，將內發光的尺寸改為5px
復制這些矩形8次，並依次排好，矩形的彼此間隔10px
Step 30
Select the Line Tool (U) and create two vertical lines over the left edge of the sidebar. Use the color #becdd2 for the first line and #f0f6f8 for the second one.
步驟30
用直線工具創建兩條豎直直線在sidebar的左邊。第一條直線（845，251，1，1079）顏色： #becdd2，第二條直線（846，251，1，1079）顏色： #f0f6f8
Step 31
Create a new group, name it “footer” and put it underneath the “content bg” group. Then select the Rounded Rectangle Tool (U) and create a rounded rectangle at the bottom of your layout with the height 50px and the color #c0dde6. Double-click on this layer to open the Layer Style window and use the settings from the following image. For the Stroke I used the color #aec7ce. Name this layer “footer”.
步驟31
在content bg組的下方創建新組footer。用圓角矩形工具在布局的底部創建一個圓角矩形（115，1224，970，56），高度50px，顏色： #c0dde6。雙擊打開圖層樣式窗口，按照下圖設置圖層樣式。描邊的顏色為#aec7ce。命名此圖層為footer
Step 32
Select the Type Tool (T) and add a copyright statement in your footer using the color #8fa1a6.
步驟32
用文字工具在頁腳添加版權信息，顏色： #8fa1a6
最終結果如下：
后記：
本教程和“PS網頁設計教程IV——如何在Photoshop中創建一個專業博客網站布局”、“PS網頁設計教程VI——在Photoshop中創建一個食物博客布局”兩篇的教程風格一致，似乎是同一人的作品，仔細觀察還可以發現甚至在教程中某些句子都一模一樣。不過，在細節上，這幾篇教程卻各有千秋，還是作了一些調整。這也印證一句話，同樣的效果，完成的思路可以各不相同。