在這個網頁設計教程，您將學習如何創建一個優雅和專業的網頁布局，可以用來作為網站系列站點。我們將使用Photoshop中的各種技術，依靠一些基本的工具，如形狀工具和圖層樣式，這將導致一個可用的網頁設計。作為獎勵，我們已列入工作的HTML / CSS/ JavaScript的網頁模板，您可以下載並使用你喜歡的任何方式，免費！
預覽
點擊下面的圖片可以看到 全面的網頁設計.
工作樣例
點擊下面的圖片可以看到 工作范例 (你可以在本文的最后下載).
相關資源
- Vector Social Media Icons by IconDock
- Grungy Natural Beige Photoshop Pattern by Webtreats
- Floral Brushes by Vasiliy Orlov
- Mono Icons by Jason Cho
步驟1: 建立Photoshop文檔
第一件事，我們需要建立一個新的Photoshop文檔，用於我們的網頁設計布局，並使其尺寸設置為1020×1180px.
步驟2: 設置導航條背景
我們將從頭部開始，然后按照我們的思路一直做到底部。 使用矩形選擇工具(M), 創建一個整個網頁寬度的矩形畫布，然后向其填充暗灰色(#393939)。
步驟3: 風格化導航條背景
通過組合鍵Cmd + J 復制已經創建好的導航條，在復制圖層上使用一個降噪濾鏡(濾鏡 > 噪點 > 添加噪點) ，要注意的是，我們應該使用統一的噪點分布，使背景可以為以后使用。
然后改變這一層的混合模式為疊加，降低不透明度為23％左右。
步驟4: 創建站點的Logo或是名字
對於我們的Logo,我使用字體“Georgia”並設置為“粗斜”，我使用白色(#FFFFFF)做為文本“Six”的顏色，並且使用米色(#F7E5C4) f作為文本“Studios”的顏色. 對於這個Logo或是名字, 我使用本文前面提到的資源中免費的Mono Icons 列表中的 boxupload32 圖標。
步驟5: 添加菜單鏈接
到了做橫向導航鏈接的時候了. 將活動鏈接顏色設為 #DBD1BE, 非活動鏈接顏色設為 #ABAAAA.
為了讓我們的活動鏈接更引人注目，給它做個圓角矩形背景。從工具面板中選擇矩形工具（U），選中活動鏈接文字，然后調整邊緣中半徑設為5px、前景色設為#464646, 如下圖所示做一個圓角矩形。.
在你的圓角矩形圖層上，右擊並從上下文菜單中選擇混合選項，添加內陰影和描邊圖層樣式。
內陰影設置:
描邊設置:
步驟6: 功能區域添加背景色
為便於用戶瀏覽和查看你的精選作品，在網頁布局的頂端部分，會設置一個圖片幻燈片區域。這個區域也可以顯示關於你的站點的一些描述。要開始做事了，我們要使用矩形選框工具（M）創建一個矩形用來表示該功能區的背景，填充顏色 #D3CAB8.
接下來，下載並且在Photoshop中打開Grungy Natural Beige Photoshop Pattern (或是您自己喜歡的風格) 。 拖拽這個紋理到你的畫布上，並覆蓋該區域背景。
步驟7: 屏蔽掉背景紋理中不需要的部分
我們不希望到最后顯示多余的紋理, 所以我們要屏蔽掉不需要的部分. 要做到這一點, Cmd/Ctrl + click 在圖層面板的功能背景層的縮略圖上做自動選擇.
在圖層面板中選擇紋理層，然后點擊面板底部的添加圖層蒙版按鈕掩蓋除選擇區域外的一切。
然后調整紋理層的不透明度到35%左右，讓下面的圖可以顯示出來。
使用橫排文字工具（T），在此功能區使用字體“黑體”或“宋體”添加一些文字，要確保標題文字和正文在不同的層次。
標題文本顏色使用白色(#FFFFFF)，正文顏色使用淺灰色(#2A2A2A).
給標題文本添加一個下拉陰影和顏色漸變的效果。
陰影設置：
漸變疊加設置:
步驟8:創建 "About us" 圓角按鈕
"About us" 界面按鈕，使用圓角矩形工具（U），還是設置5px的半徑。按鈕上的文字，可以使用顏色#404040。
你可以找到箭頭圖標，我使用Mono Icons 中的 circleright32) 並使用切換命令（CMD/CTRL+T）調整圖標的大小，以填充您創建的按鈕。
在這個圓角矩形圖層上添加外發光和顏色漸變效果，使形狀更生動。
外發光設置:
漸變疊加設置:
步驟9: 添加florish 設計元素
功能區這里最后一步是添加一個微妙的florish設計元素，增強網頁優雅而高貴的外觀和感覺。首先，下載並安裝碎花刷子畫筆包（在前面的相關資源中列出）。
在使用畫筆前設置前景色為 #343434 .
選擇畫筆工具（B），在我們安裝的筆刷包中找到你喜歡的花筆尖，通過一次點擊應用你的筆觸。
之后，改變層的混合模式為強光。
步驟10: 創建幻燈片區
讓我們一起來處理幻燈片內容區，使用圓角矩形工具（U）在網頁布局右側生成一個前景色為白色（#FFFFFF），半徑為5px的圓角矩形形狀。
調整這層的透明度為15%，讓一些背景圖案可以顯示出來，然后添加陰影的形狀。
步驟11:在幻燈片區添加一個圖片
我們需要在框中這一點上添加縮略圖，取一個你可以在這個區域使用的圖像（如網站的截圖），並放置在這個區域上。我們想要把圓角羽化，在圖層面板中，CMD/Ctrl+點擊圓角矩形的縮略圖預覽進行選擇。
還是在圖層面板上，在上面選擇圖像層。打開 選擇> 修改>羽化選區 設為10px。然后， 選擇>反向(Cmd/Ctrl + Shift + I) 反向你的選擇。
設置圖片圓角，選擇 編輯> 清理.
步驟12: 為正在顯示的圖片添加文字描述
讓我們為幻燈片區域當前顯示的圖片添加文字描述。在圖層面板的縮略圖預覽圖像周圍通過（Cmd/Ctrl+單擊）創建一個選取框。選取后，創建一個新層並且用黑色（#000000）填充選區。然后使用矩形選框工具（M）選擇新創建的圓形黑色矩形的頂部並刪除它。
該層的不透明度降低到75%左右，讓圖像可以顯示出來。完成后，使用橫排文字工具（T）添加一些文本用來描述圖像。
步驟13:在功能區底部添加分割
功能區的最后一步是在它的底部添加一個灰色、水平分割。我們按照步驟2和步驟3中相同的方法創建這個分割，唯一的不同是給它添加內陰影。
這是我們全部完成的功能區：
時間轉移到我們的主要內容區
步驟14: 主要內容區添加背景色
你可能已經猜到了，內容區域將在我們的網頁設計預覽中顯示為3列。 我們不想使其變得枯燥並且放棄白色的背景，所以用矩形選框工具（M）創建一個跨越整個畫布寬度的矩形選框，給它填充白色（#000000）。
我們的內容區域將是非常簡單的，但是如果做得正確也需要走一段很長的路要走。我們將從左側開始，在左側放置服務列表。
步驟15: 添加列標題
對於列標題，該列內容將從Mono Icons中挑選符號，並將它們定位到左側。
列標題文字使用“Georgia”字體和深灰色（#323232），接下來，使用鋼筆工具（P）在列標題下面添加一個底部邊框。
在路徑中使用描邊，首先設置和文字相同的前景色（#323232），然后找到一個很好的畫筆筆尖直徑設為3px。
在一個新層上，去到你的路徑面板（“窗口”>“路徑”），在面板底部點擊描邊路徑的毛筆按鈕。
下一步，我們想給我們的彎曲線一個漸變的點點。加入漸變疊加圖層樣式。
重復彎曲的線層（按Ctrl / Cmd+ J），然后輕移它低於原線4到5個像素，降低它的不透明度到24%左右。
步驟16: 左列添加內容
所以的這一切都是留給左列添加內容，標題文字顏色設置為深灰色（#323232）。正文使用灰色（如#2A2A2A）可讀的陰影。
使用和步驟8中相同的過程生成“Read More”界面按鈕。然而，中間行，我想切換顏色，所以我做了堅實的顏色灰色（＃484848）圓角矩形，我建議懸停這些按鈕的狀態呈現在網頁設計模擬。
步驟17: 中間列添加內容
伴隨着左列的結束，將注意力轉移到中間。 創建和左列相同的標題，改變的是你找到合適的圖標。
使用圓角矩形工具（U）生成一個一個半徑為3px和前景色白色（＃FFFFFF）的小圓角內容框，並添加一些文字和描述。
然后應用一個外發光的圓角內容框和描邊層樣式。
外發光設置:
描邊設置:
完成的圓角背景框，並添加圖像匹配你的描述。
步驟18: 添加右列內容
右列和左中兩列的安排非常相似。我們要創建其它兩個相同的標題，在此列使用不同的圖標象征內容。
對於非主動鏈接，我用暗灰色的字體顏色（＃353535）。我們活動連接，我用普通的白色（＃FFFFFF）。活動鏈接的背后，我創建了一個背景，使用圓角矩形工具（U）與3px半徑和相同的深灰色作為我們的非主動鏈接（＃353535），使它脫穎而出。
步驟19: 設計Newsletter模塊
下一步，我們需要建立我們的Newsletter模塊。使用圓角矩形工具（U），創建半徑為3px的對話框。在這個圓角框，適用於在第2步創建噪點的，灰色的背景，使我們可以重用從導航欄的設計元素，在我們的網頁布局，相同的過程。
你現在需要做的是添加一些內容到您的Newsletter模塊。標題的字體是斜體Georgia，圖標還是選自Mono Icons。疊加圖層樣式顏色米色（＃F7E5C4），使其與我們的網絡布局的配色方案完美融合。
然后，只需使用您的矩形選框工具（U）生成一個圓角矩形，用於服務用戶的電子郵件地址作為輸入字段;使用白色填充顏色（＃FFFFFF）。
這是我們主要內容的區域！時間轉移到最后一節：網絡布局頁腳。
步驟20: 添加頁腳背景
頁腳設計酷似步驟2和步驟3標題導航背景。盡管如此，你會想它比你的導航高一點，因此，它可以容納更多的內容。
步驟 21: 添加頁腳內容
接下來，在頁腳添加一些鏈接。使用矩形選框工具（M），創建一個矩形，並填充深灰色的顏色（＃323232）。然后將其放置在框中一些白色的文字（＃FFFFFF）為您的鏈接。
現在改變矩形層的混合模式為柔光，降低不透明度為63％，讓頁腳的背景顯示通過。重復這個過程中，為你所需要的許多環節。
我們需要做的最后一件事是添加我們的社會媒體上面我們頁腳的導航菜單圖標，然后我們的商標和版權文字添加到我們的頁腳的右側。使用的圖標來自 Vector Social Media Icons.
這就是它！
下載源文件：
- PSD file: clean_classy_webdesign_psd (ZIP, 3.17 MB)
- Web template: clean_classy_webdesign_template (ZIP, 0.41 MB)
原文鏈接：http://designinstruct.com/web-design/clean-classy-web-design-photoshop/