作為編碼者，美工基礎是偏弱的。我們可以參考一些成熟的網頁PS教程，提高自身的設計能力。套用一句話，“熟讀唐詩三百首，不會作詩也會吟”。
本系列的教程來源於網上的PS教程，都是國外的，全英文的。本人嘗試翻譯這些優秀的教程。因為翻譯能力有限，翻譯的細節上還有待推敲，希望廣大網友不吝賜教。
約定：
1、本文的軟件是Photoshop CS5版本
2、原教程的截圖是英文的，本人在重新制作的基礎上，重新截了中文版的圖
3、原文中有些操作沒有給出參數。本人在反復測試的情況下測定了一些參數，以紅色的文字顯示。有些錯誤的參數，直接以紅色文字顯示正確的參數
例如：（90，22，231，77），表示矩形的左上角的坐標是（90，22），寬231，高77
例如：（90，22），表示矩形的左上角的坐標是（90，22），矩形的其他兩個參數教程里已經指定
4、在教程的最后會附上本人的心得。有些是對教程中的一些步驟的優化等。
1. Firstly download the grid system, unzip the archive file you downloaded, go to the "templates" folder and then go to the Photoshop folder. Choose the 12 Grid file. The psd file will come with a premade grid guide to help you arrange the website. To activate the guides, go to View > Show > Guides.
Will need to make the canvas bigger, go to Image > Canvas Size and put in the new width and height below:
1、首先下載網格系統，解壓你下載的文件，到templates文件夾，到Photoshop子文件夾。選擇12 Grid文件。該PSD文件預制了網格參考線幫助你對齊網頁布局。激活參考線，點擊：視圖 > 顯示 > 參考線
我們需要使畫布變大，點擊：圖像 > 畫布大小，按照下圖設置新的寬度與高度。
由於本翻譯教程不使用網格系統。故此步改為新建文檔，文檔大小：1200px*1480px，如下圖所示：
2. To unlock the background layer click on the layer and press the lock icon to unlock.
2、雙擊背景圖層上的鎖定圖標，去解鎖背景圖層
3. Using the Rectangle Tool draw a rectangle shape like below using the blue lines as a guide. Press ctrl+t to make the shape transformable and drag each top corner to in while holding down the alt key. Double click on the layer to bring up Blending Options and put in the settings below:
3、用矩形工具畫一個矩形（132，200，936，135），和下圖一樣參照藍色的參考線。按Ctrl+T進入變形模式，然后按住Alt鍵按下圖拖動頂部的兩個控制點（應該是Ctrl+T后，右鍵選擇透視，拖動左上角控制點向內側移動70px）。雙擊該圖層打開圖層混合選項，按照下圖設置樣式。命名該圖層為roof
漸變疊加的顏色： #7e1416，#ee2a28
4. Using the circle draw a shape like below while holding down the shift key. Double click into Blending Options and make a stroke of 1px. Duplicate the circle by dragging it to the new layer icon. Make the circles alternate from dark red to white. If the circles don't fit hold down the ctrl key and select all the circle layers and drag them all to the new folder icon. On the folder press ctrl+t and drag a bottom corner across while holding down the shift key.
用橢圓工具按住Shift鍵按下圖去畫一個圓。雙擊打開圖層樣式，添加描邊1px。拖動該圖層到創建新圖層的圖標上去復制該圖層多次。保證這些圓深紅和白交替出現。如果這些圓沒有出現在合適的位置，按住Ctrl鍵去全選這些圓，拖動他們到新建組的圖標上，在組上按Ctrl+T，按住Shift鍵，拖動一個底部的控制點到合適的位置
參考原圖，一共12個圓，計算得知，每個圓的直徑就是78px，按照下面的操作，完成12個半圓的操作
先在左側位置用橢圓工具創建一個圓（132，296，78，78），顏色用深紅： #7e1416
雙擊該圖層添加如下的樣式
Ctrl+J復制該圖層，Ctrl+T自由變形，移動新圖層到原圖層右側的156px處
按Ctrl+Shift+Alt+T復制新圖層並移動到合適的位置（自動移到原圖層右側的156px處）
重復剛才的操作，直到6個深紅色的圓都被創建好
用同樣的方法，創建6個白色的圓
將這些圓合並到一個新組，命名為circles，點擊：圖層 > 圖層蒙版 > 顯示全部
如下圖，用矩形選擇框創建一個矩形選區
按Delete鍵，不顯示矩形選擇框里的內容，按Ctrl+D取消選擇，把roof圖層移到circles組的上方
5. Go to the background layer and double click into Blending Options > Gradient Overlay and put in the colours below:
5、回到背景層雙擊打開圖層樣式窗口添加漸變疊加樣式，樣式按下圖設置
顏色疊加的顏色： #09a0df，#80ddff
6. With the rectangle tool draw a top part on the 'roof' using the same Gradient Overlay colours as the red roof. Using the font Bebe Neue write out the menu, then double click into Blending Options > Drop Shadow and put in the settings below:
6、用矩形工具在roof的上方創建一個矩形（202，142，796，58），添加和roof圖層一樣的漸變疊加的樣式。（直接復制roof圖層樣式，然后在本圖層粘貼，包括了描邊樣式）
在矩形上添加一些菜單文字，字體：Bebe Neue （找不到該字體，用Arial Rounded MT Bold代替，字體顏色：白色）。雙擊文字圖層按照下圖添加投影的圖層樣式：
字體的相關設置如下：
調整各個菜單的位置，結果如下：
7. Using the rectangle tool draw a search box, double clock into Blending Options & put in the settings below. Next Go into Custom Shape tool and select the magnifying glass icon, holding down the shift key (so the shape stays perfect) draw the icon.
7、用矩形工具畫一個搜索框（770，152，210，36），雙擊圖層添加圖層樣式，按照下圖設置樣式。接下來選擇自定義形狀工具，選擇放大鏡圖標，按住Shift鍵（能保留完好的形狀）畫該圖標
在搜索框中添加文本Type in here and Press Enter，設置如下的格式，字體顏色： #6d6d6d
最終如下：
8. Next using the rectangle tool draw the page background, double click into Blending Options > Gradient overlay and put in the colours I have below, then put a dark grey 1px stroke.
8、用矩形工具畫一個頁面的背景（132，335，936，1070），雙擊打開圖層樣式，按下圖設置漸變疊加和添加1px的深灰色的描邊
漸變疊加的顏色： #4b3226，#2b1915
描邊的顏色： #343434
9. Again with the rectangle tool draw a white 'window', double click into Blending Options and put in the settings below.
9、再用矩形工具畫窗戶（168，335，864，274），雙擊打開圖層樣式，按下圖設置樣式
10. Next for the slider I've got some ice cream images, I've shrunk the images down (using the ctrl+t method we used earlier). To make the white background of the images transparent I've put all the ice cream images into a folder and set the Blending Mode to Multiply.
10、接下來在左邊將用到一些冰激淋圖片，縮小這些圖片（用之前的Ctrl+T的方法）。為了使白色背景看起來象透明的，我將這些圖片歸並一組，然后設置組的混合選項為正片疊底
11. For the slider I've used the font Heartbreaker, I've rotated the text by pressing ctrl+t and rotating the edges. I've gotten an Hand Drawn , copied & pasted it into the canvas and have changed the size & rotated it using the ctrl+t method & changed the colour by double clicking into Blending Options > Color Overlay.
11、另一邊我用Heartbreaker字體（用Pristina字體替代，具體的設置如下圖）添加一些文本，按Ctrl+T，旋轉文字。我獲得一些手繪圖案，拷貝到畫布上，用Ctrl+T調整大小，旋轉角度，雙擊打開圖層樣式窗口，設置顏色疊加樣式去更改顏色
文字的格式設置如下圖
由於圖案比較簡單，直接自己手繪了。先新建圖層，然后在新圖層上用畫筆工具手繪，仔細點就可以了
12. Now draw a box with the rounded rectangle tool, double click into Blending Options and put in the settings below & rotate the box. Using the circle tool draw a black circle & with the line tool draw 2 lines for strings. Place the blue sign layers into a folder.
12、用圓角矩形畫一個方塊（寬80px，高60px），雙擊打開圖層樣式窗口按照下圖設置樣式，旋轉該方塊，用橢圓工具畫一個小黑圓，用直線工具畫兩條直線。把這些藍色符號的層歸並到一個組
漸變疊加的顏色： #3789cd，#2f6ba3，#3789cd
方塊旋轉的角度建議是159度，因為之前設置的漸變疊加的角度是111度，通過計算可知159度是漸變的方向和方塊的方向一致
13. Duplicate the blue sign folder by dragging them to the new layer icon. Go into the Custom Shape tool and choose the arrow, draw a white arrow on each blue sign.
13、復制藍色符號的文件夾，拖動到新建圖層的圖標上。用自定義形狀工具，選擇箭頭，在每一個藍色的符號上添加一個箭頭
14. Next draw a 'title' box using the rectangle tool, double click into Blending Options and put in the same red gradient as the 'roof' & put in a 1px dark grey stroke. Next draw a white box with a 1px stroke. Holding down the ctrl key select the 2 shapes you created and duplicate them 4 more times. Place each of them where you want. To make a box larger press ctrl+t and stretch out the box.
14、接下來用矩形工具畫標題方塊（168，630，264，45），雙擊打開圖層樣式窗口，添加和roof圖層一樣的漸變疊加，並添加1px的深灰色（#343434）的描邊，接下來畫一個白色的方塊（168，675，264，195），1px的描邊。
按住Ctrl鍵選擇兩個圖層，復制四次。移動每個方塊到合適的位置。然后用Ctrl+T更改一個方塊的大小
如下圖，五個標題方塊的位置分別是（168，630），（468，630），（768，630），（168，900），（768，900）
左下角的大方塊的寬度為564px，大方塊中白色方塊的高度為416
15. I've put in the headings with the font Bebe Neue, and written out the content in Arial font. I've gotten the icons from the Danish Royalty Free Icon set.
15、在每個方塊書寫標題，用字體Bebe Neue；書寫內容，用字體Arial。我從Danish Royalty Free Icon上獲得了一些免費的圖標
直接復制roof圖層上的文字圖層，移到合適的位置，修改標題文字。Danish Royalty Free Icon的鏈接已經失效，改從其他地方獲得圖標
16. Using the rectangle shape tool draw out some boxes for the contact form using the colour below. Double click into Blending Options > Stroke and put a 1px dark grey stroke. Draw a button with the rounded rectangle tool & put in the same gradient and stroke as the red title box.
16、用矩形工具在contact表單里畫一些方塊，顏色如后所示（#ebebeb）。雙擊打開圖層樣式窗口，添加1px的深色（#343434）描邊。用圓角矩形工具添加一個按鈕，給按鈕添加和標題欄一樣的漸變疊加和描邊樣式
17, Next holding down the shift key draw 2 boxed with the rectangle tool like below, one white & small and the second large. On the larger box double click into Blending Options and put in the settings below:
17、接下來用矩形工具按住Shift鍵畫兩個正方形，如下圖所示，一個白色小點的，和一個白色大點的。在大點的正方形上雙擊打開圖層樣式，按下圖設置樣式
為了醒目，小的白色正方形顏色改成紅色
Write out the example post title & post description.
書寫博客的標題和說明，標題的字體和標題欄里的字體一樣，顏色為紅色，說明文字的字體和其他欄目里的字體一樣
18. Next copy & paste an example image, right click and Create Clipping Mask (this will crop the image to the size of the white square).
18、接下來復制粘貼一個示意圖片，右鍵創建一個剪貼蒙版（這會使你的圖片限制在白色正方形中，本示例為了醒目，已經改成紅色）
19. Duplicate the send button you created earlier and place it as a button under the post, change the 'send' to 'continue reading'.
19、復制你之前創建的第二個按鈕，把按鈕移到說明文字的下方，把send改成continue reading
20. Next I've gotten some icy pole social icons and placed them on top of the layout.
20、接下來，下載一些icy pole social icons，把它移到布局的合適位置
21. Next write out the title of your website, I've used the font Heartbreaker. Double click on the title into Blending Options and put in the settings below:
21、接下來添加網站的標題，字體：Heartbreaker，雙擊文字圖層打開圖層樣式，按下圖設置樣式：
Go into the Custom Shape Tool & choose this snow flake symbol & while holding down the shift key draw some snow flakes.
切換到自定義形狀工具，選擇雪花形狀，按住Shift鍵，添加一些雪花
22. Lastly write out some Copyright details for the footer.
22、最后在頁腳添加一些版權信息
Final Result
最終結果
后記：
夏日里的清涼。由於該教程是參照960布局系統完成的，有些局部的尺寸比較隨意。在翻譯的時候，計算這些尺寸費了一番功夫。
對設計師來說，天生對尺寸有很好的把握，就是鼠標拖拖，尺寸也能拿捏的到位。
對編碼者來說，初期學習階段，還是要仔細計算各部分的尺寸為好。等將來做的多了，感覺到位了，再隨意點也不遲。