導讀：這是一篇很詳細的網頁設計教程，用photoshop一步步設計與製作出一個精美的網站首頁樣稿，本文最值得推薦的是作者寫出了自己的設計思路，相比其他一些網頁設計教程來說不僅告訴你怎麼做，更高速你怎麼去想，也就是作者的設計流程。

難得國外有這樣好的教程，我就用我僅有的英文水平翻譯一下啦。建議將本部落格的中欄和右欄隱藏後觀看本文。

引言

你是否曾經想過設計一個漂亮的網頁，但是卻不知道怎樣入手？說實話，幾年前我也是這樣。當我瀏覽網頁的時候我看到這麼多好看的網頁，我就希望自己有技術創作這樣的設計作品。

今天我可以這麼做了，而且我將教你怎麼做這樣的設計！從根本上，對於這種設計你需要一點photoshop的操作技能和觀察細節的能力。通過以下的教程，我將會指出其中極細微的細節之處，而這些細節講使你的網頁設計漂亮起來。開啟photoshop,我們開始啦！

正文

先看效果圖

第一步：下載960網格模板

我一直以來做的設計幾乎全部是基於960網格模板的. 因此在我們開始創作之前，先下載這個模板. 你能在960.gs上找到這些模板. 下載之後解壓zip裡面關於PSD的模板. 你會發現有兩種規格: 一個是12欄式的而另一個是16欄式的. 他們的區別就像名字所說的，一個是按12欄分佈一個按16欄. 更詳細的介紹一下吧, 如果你的設計裡面分3個區塊你就選擇12欄式的,那是因為12能被3整除; 同理假如你的設計分四個區塊, 你可以選12欄式或者16欄式，那時因為12和16都可以被4整除. 你會發現這個技巧將用於下面教程.

第二步：構造你想象的結構

在我們開啟PSD網格模板創作前, 我們首先需要先構造一下想象中的結構. 從上面的這張圖，你可以看出來：因為在一個排版中又有排版，所以這是一個有點複雜的結構.

第三步

構造了結構之後我們繼續. 開啟16欄式的PSD模板檔案. 開啟 “影象 >畫布大小” . 把畫布的寬度設定為 1200px 高度設定為 1700px .把背景色設定為 #ffffff 既白色.

第四步

用長方形工具在頂部畫一個寬100%高大概80px的長方形. 用顏色： #dddddd 填充它.

第五步

在長方形那層上面建立一個新層. 按住CRTL鍵滑鼠點選長方形層. 長方形就被選中了，然後把目標移至剛建的新層上. 選擇半徑 600px 的軟筆刷（如圖）, 把其顏色設定為白色, 然後就像圖片所示那樣在選框上邊緣點幾下. 通過這個技巧你畫出了一個微妙的照亮效果. 你現在可以把這兩層聯合起來了.

第六步

建一個新層，再用長方形工具如圖所示在上端畫一個深灰色的小長方形.

第七步

在距離上端長方形500px處開始畫一個寬 100% 高 575px 的長方形. 設定其由 #d2d2d0到 #ffffff 的漸變色, 角度為-90,縮放為100%

第八步

現在我們如第五步那樣新增照亮效果. 這個技巧我們將很頻繁地使用;因此下次用到的時候我只提示是第五步的效果 .

在當前層之上簡歷一個新層. Ctrl+滑鼠點選這個大的長方形. 選擇 600px的軟筆刷, 設定顏色為白色，如圖所示對選區的邊緣點選多下.

第九步

建立一個新層畫一個400px高的長方形. 這是用作我們網頁頁頭的. 給它設定一個線性漸變，由顏色 #2787b7 to #258fcd.

以下展示顏色的微妙變化：

第十步

在頁首長方形塊底端畫一條1px的灰藍色的線, 混合屬性中新增陰影效果. 陰影引數: 正底疊加, 透明度: 65%, 方向: -90, 距離: 1px ， 寬度: 6px. 之後再建一個新層，在灰藍色線下面畫一條1px的白線.通過這種方式，我們就可以建立一個輪廓鮮明的邊緣. 可以說在你的設計中，你可以把這個技巧用於其他色塊.

第十一步

建立一個新層,在畫布頂端用“長方形”工具化一個50px高的長方形,就如圖所示，這個長方形是用作導航的.

為其新增陰影效果.引數如圖所示.

第十二步

開始話導航啦.使用“圓角工具” ，設定半徑為5px,畫一個圓角長方形，用顏色 #f6a836 填充它, 之後給他新增以下效果:

1. 內陰影- 顏色: #ffffff, 混合模式:正底疊加, 透明度: 60%, 角度: 120*, 距離: 7px, 大小: 6px.
2. 內發光 - 混合模式: 正常, 顏色: #ffffff, 大小: 4px. 其他引數預設設定.
3. 描邊 - 大小: 1px, 位置: 內部, 顏色: #ce7e01.

Ctrl+滑鼠點選層產生如圖選區. 選擇： 選擇-> 修改 > 收縮 然後在彈出框中輸入1px，確定.

在上面再建一層, 把混合模式設定成疊加 ,然後好像第五步那樣加照亮效果,不過這次用的是小筆刷 . 然後就是增加導航文字了.我用 Arial 字型作為導航的連線字型, 所有效果設定為 “無”.

第十三步

現在我們開始建立搜尋框, 圓角長方形，半徑5px,在如第四步所示的網格的右邊、頂端灰色背景網格紋中間建立一個用於搜尋的色塊. 為它增加以下樣式:

內陰影：顏色: #000000,混合模式: 正片疊加, 透明度: 9%, 角度: 90*,距離: 0px, 大小: 6px

描邊： 大小: 1px, 位置:內部, 顏色: #dfdfdf.

給它新增“search”的文字和一個亮底暗色的“GO”按鈕.如下圖所示：

到目前為止已經建立了很多層了，為了條例清楚，我們建立一個叫“search”的層資料夾. 把所有於搜尋相關的層一併拖到這個層資料夾裡面去. 遲點，我們都會這樣處理，可以讓我們的創作更合理.

第十四步

新建一個新層，然後就像畫”搜尋框”一樣在這層上面畫一個”Sign Up”按鈕（字長剛好為背景長的一半）. 把這個組合放在搜尋框下方條紋豎直方向中間.

再一次如第五步那樣建立亮光效果.

使用更小的軟筆刷.這次的筆觸大小為45px.

第十五步

加了logo和網站描述之後，我們的網頁就如上所示.

第十六步

現在我們回到層結構那裡提早做一些工作.建立一個空的層資料夾並命名為”top_bar” .移動所有的圖層到這個資料夾裡面（包括logo,條紋,搜尋框,註冊按鈕，導航和背景）.

建立另外一個空層資料夾並命名為”header”.這裡用於放置頭部圖層 .如上圖所示

第十七步

頭部看起來有的平淡，因此我們可以再任意位置加相同的亮光效果. 選中藍色的頭部區域.在它上面建立一個新層並設定其混合樣式為 疊加.

選一個大點的600px軟筆刷,顏色為#ffffff白色。然後再導航下方點選幾次。假如想更有層次感，你還可以把顏色調為黑色，然後在頭部區底部重複同樣操作。

第十八步

在這一步我介紹一下我是怎麼實現頭部圖片的反光效果的。選擇兩張圖片，我用了我自己另外做的兩個網頁模板圖片，縮放其中一個然後把他放在比較大的那個的下方。複製這兩層，用自由變換工具按住shift鍵等比例縮放一下，用長方形工具在上層的圖片下端外部畫一個選區，到選擇->修改->羽化，填入30px或者大點羽化一下選框。（這裡原教程說得不大清楚，我實現的方法是這樣的：羽化之後選擇反選，然後選取畫筆工具，選白色，再在圖片的左邊角和右下角點選數下，然後用長方形選框和delete鍵修整邊緣）

為了讓兩個圖片更加突出，可以新建一層，設定該層模式為疊加，重複第五步的效果新增的操作。

在添加了一些按鈕和漂亮的條紋之後，頭部區域就是像上面那樣子的。不要方劑把圖層都放在’header’層資料夾裡面。

第十九步

最終效果圖裡面你會看到在內容區域裡面有很漂亮的切換頁。為了建立這種切換頁我們需要實現額外的一些操作，這是很有必要的。首先用圓角長方形工具建立一個高70px圓角半徑為10px的圖形（注意要畫路徑圖），現在我們不要底部圓角的部分而為它鄭家一個更好的角效果。用直接選取工具單擊這個圖形的路徑，單擊垂直點然後按住shift鍵往下拉直到如圖所示狀態.現在看起來不錯了，但是還是比較簡陋。然後…(把圓角變直角！？？？我汗，那還不如直接畫個直角的長方形？)

如圖建立了一個比較好的角（我汗）

第二十步

選擇直線工具，設定大小為1px

第二十一步

按住shift鍵畫灰色的分割線。

第二十二步

為每個切換標題新增小圖示。我用了來自WebAppers.com的圖示。通常一個切換標題激活了其他的就處於非啟用狀態了。為了清楚表達這一點，我們需要想個辦法完成它。我降低其他圖示的飽和度並且降低標題字眼和描述文字的透明度一保證啟用的標題處於高亮狀態。

第二十三部

為了使啟用的按鈕更加明顯，我們將給它新增一個時尚的背景。為了達到這樣的效果我們把整個物件選中然後裁切選區（按住alt畫選區即可把不要的選區去掉）最終使選中的範圍只有第一個按鈕。

如上圖所示即為所要達到的選區。

用一個更小的軟筆刷，畫出一個白色背景。

第二十四步

增加一個陰影：在切換選單的後面如上圖所示畫一個深灰色的長方形。

點選圖層區底部的小圖示給該層增加一個蒙版。

把前景色設定為黑色，選一個大的軟筆刷，在蒙版層上面點選（如圖所示，蒙板上面出了白色之外的顏色都會遮擋圖層）使部分黑色去掉。結果，我們建立了一個比較好看的陰影效果。

最後我們加點細節。在切換選單下方畫一個1px的灰線。然後如上一步一樣用蒙版的方式使左右兩端漸變。現在我們就得到一條比較時尚好看的線了。

現在切換選單就像這樣。

第二十五步

現在開始設計第一個切換按鈕的內容。我們需要一個精準設計的影象（有好看的標題和一些文字內容）。首先我們得建立這個精準的圖片。這裡我認為我們最好打破這個圖片尖銳的稜角設計，從而創造一個多彩的效果。因此我現在畫一個白色有1畫素灰色邊框的長方形，再給它加上細微的陰影效果。

複製這一層並用變形工具稍微旋轉。重複這個操作幾次

把你選好的圖片導進來，放在白色長方形上面。不用擔心圖片會溢位，我們會修整它。選中最上層的長方形，按選擇->修改->收縮 ，輸入5px,確認，然後在圖層管理區下方點選新增圖層蒙版，這樣圖片就只顯示選區範圍。

這就是你現在圖層的狀態。

第二十六步

不要忘記整理圖層，這裡新建圖層夾把圖層歸類。

增加一個漂亮的標題、一些文字和列表，我們的設計工作又完成一部分。現在繼續下一步吧。

再組織一下圖層。

第二十七步: 感謝信

我認為這一個部分要比較大的，因此我把範圍限定在主區域上的一個大的盒子裡面。首先建立一個大的淡灰色的大概高220畫素的長方形。設定其有1畫素的灰色邊。

然後再畫一個上下左右都比它小10畫素的另一個長方形。同樣設定其1畫素的淡灰色邊框。

最後寫上文字就可以了。

第二十八步

終於要做頁尾啦。畫一個400畫素高的、深黑色的長方形。

第二十九步

如第五步一樣給它加亮光效果。

第三十步

下來，如圖所示，在區域上方畫一個10畫素高的長方形，並且通過在頂端和底部各多加兩條線增強細節處理。

第三十一步

建立低端部分用於放置重複的導航。你可以拷貝頂端放置導航的長方形，移動並變形使其40畫素高。把它放到你畫布的最低端。你要注意你可能要擴張你的畫布使所有東西都有適合的位置。制約擴張畫布的操作你可以這樣：影象->畫布大小 設定即可。

第三十二步

再次強化細節。給頁尾的導航區頂端加一條白色邊，這樣有比較好的邊框效果。

第三十三步

給頁尾增加內容，你可以依據網格合理安置它們。

第三十四步

然後就是把頁尾相關的圖層整合起來。

最終設計

做到這裡，我們的設計就完成了。（這裡做的設計作者改了一下之後放在ThemeForest.net上賣了）

最後總結

我希望你喜歡本教程並且從中或多或少學到點知識。現在是你創作的時候了。記住，只要你注重於細節，你就會創造出漂亮的網頁設計，儘管你photoshop只會那麼兩三個工具。現在你有設計的衝動沒？

轉載請註明：

• 譯者：Joe
• 譯文來源：http://xiebiji.com/2009/09/design_a_beautiful_website/
• 原文來自：Design a Beautiful Website From Scratch