Photoshop教程：一款清新高雅的網頁布局

預覽：


在這篇網頁設計教程中，你將學習如何設計優雅并專業的網頁布局，我們將運用各種photoshop技巧，依靠圖形工具和圖層樣式等基本操作來實現此布局。作為獎勵，在教程結束后附有HTML/CSS/JavaScript的網站模板，完全免費下載。

網站模板

點擊下圖查看網站模板

素材

• 矢量社區媒體圖標（下載）
• 凌亂、自然灰褐色圖案（下載）
• 高清花紋筆刷（下載）
• Mono圖標（下載）

1、新建文檔

打開photoshop，新建尺寸為1020*1180px的空白文檔。

2、設置導航條背景

選取矩形選框工具（M），創建有整個畫布寬的選區，高度不要太高，然后用深灰色（#393939）進行填充（cmd/ctrl+F5），如下所示：

復制（cmd/ctrl+J）剛新建的導航圖層，并對其添加雜色濾鏡（濾鏡>雜色>添加雜色），如下設置：

然后更改圖層混合模式為”疊加”，透明度下降到大約23%。

3、創建站點logo/名稱

對于logo，我使用了粗斜樣式的字體Georgia，用白色（#ffffff）編輯’Six’時，用米黃色（#F7E5C4）編輯’Studios’，對于圖標，選用了Mono圖標中的boxupload32圖標，如下所示：

4、添加菜單

使用顏色（#DBD1BE）編輯激活時的菜單，正常狀態的菜單使用顏色（#ABAAAA）。

為了讓激活狀態下的菜單更加醒目，選取圓角矩形工具（T）創建一個圓角矩形（圓角半徑為5px，前景色為#464646）放置在菜單圖層下方，如下所示：

，然后設置如下圖層樣式：

‘內陰影’/'描邊’：

5、添加展示區背景

在布局頭部，我們還要添加一個作品展示區，以幻燈片形式來播放圖片，每張圖片配有簡單介紹和導航。在開始前，選取矩形選框工具（M）創建矩形，以顏色（#D3CAB8）進行填充。

下一步，下載凌亂、自然灰褐色圖案（或其它圖案）拖放到文檔中，放在矩形圖層上方。

接下來我們要遮住一些不需要的紋理，在圖層面板選中矩形圖層，按住cmd/ctrl鍵，點擊縮略圖，創建一個自動選區，然后選中紋理圖層，在下拉菜 單中點擊”添加圖層蒙版”，這樣遮住了除選區外的所有區域，最后，撤消選區（ctrl+D），把紋理圖層的透明度下降到35%。

6、添加網站介紹

使用水平字體工具（T），在展示區左側添加網站文字說明，采用Helvetica 或Arial字體進行編輯，確保標題（顏色#FFFFFF）和內容（顏色#2A2A2A）文字在不同圖層。

為了使標題更加炫目，按如下設置添加圖層樣式：

‘陰影’/'漸變疊加’：

接下來，創建”About us”的圓角按鈕。再一次選取圓角矩形工具（U），設置半徑5PX，文本顏色為#404040，同時在右邊有一個箭頭圖標（Mono圖標集中的circleright32），重設它的大小以匹配按鈕。

在矩形圖層上添加以下樣式：

‘外發光’/'漸變疊加’：

最后一步是在按鈕右邊添加花紋，就是這微妙的設計元素增加了此設計的優雅度。下載并安裝花紋筆刷（資源區的上方），先設置前景色為#343434，選取畫筆工具（B），找到花紋筆刷，在畫布上進行一次點擊，然后把圖層混合模式改為“強光”。

7、創建幻燈片區

選取圓角矩形工具（U），前景色為白色，半徑為5PX，在展示區右側生成一個圓角矩形。

設置此圖層的透明度為15%，以顯示背景圖案，接著添加’陰影’的圖層樣式：

此刻，我們需要在幻燈片區域添加圖片縮略圖，你可以找一個網站截圖或其它圖片，放在白色圓角矩形上方。我們得把圖片四角變成圓角，在圖層面板，按住 cmd/ctrl，點擊白色圓角矩形的縮略圖，創建一個自動選區，接著選擇放圖片的圖層，去往菜單”選擇>修改>收縮”，收縮10px，然后 執行”選擇>反選”（cmd/ctrl+shift+I）反選選區，最后執行”編輯>清除”。

接下來添加圖片描述，在圖層面板，按住cmd/ctrl，點擊圖片圖層的縮略圖，創建一個自動選區，新建圖層，并以黑色填充選區，然后使用圓角矩形選框工具（M），選取新建的黑色矩形的上部分并刪除。

降低圖層透明度到75%，添加簡單的文字說明

8、在展示區底部添加分隔線

像步驟2一樣在展示區底部添加一條灰色、水平分隔線，不同在于還要添加’內陰影’的樣式：

設計的主內容區的時間到了！

9、給主內容區添加背景

就像預覽圖一樣，主內容區分布為三列，選取矩形選框工具（M），生成畫布寬的選區，用顏色（#FBF5EA）進行填充。

主內容區的設計其實相當簡單，但是要讓人看出很簡單也要花一定時間完成。我們將從左邊開始，放置服務列表。

10、添加列標題

對于我們的列標題，從Mono圖標挑選一個象征符號，并放在標題左邊，使用字體”Georgia“和顏色（#323232）編輯標題文本。下一步，在文本底部添加弧線邊界，這就要用到鋼筆工具（P）了，像下圖一樣創建一條路徑。

為了給路徑描邊，設置前景色為文本顏色（#323232），然后選擇一個較硬的畫筆工具，大小大約為3px。接著打開”路徑”面板（窗口>路徑），點擊面板下方的”用畫筆給路徑描邊”。

下面為曲線添加一點漸變，設置”漸變疊加”的圖層樣式：

復制曲線圖層，離原圖層下方4或5px處，降低透明度到24%。

11、為左欄添加內容

設置標題顏色為深灰（#323232），文本內容顏色為一種可讀性的灰色（例如：#2A2A2A）。像創建”About us “一樣創建”Read More”按鈕，對于中間這行，我改變了顏色，一種純灰色（#484848）用于激活狀態下的顏色。

12、為中欄添加內容

像左欄一樣，添加標題和圖標（另外合適的圖標）。使用圓角矩形工具（U），設置半徑3px，前景色為白色，生成一小型的圓角矩形，在矩形下方添加一些文本和描述。

接著為圓角矩形設置圖層樣式：

‘外發光’/'描邊’：

然后，在圓角矩形內添加與描述相配的圖片。

13、為右欄添加內容

像左欄和中欄一樣，添加標題和圖標。對于未激活的鏈接，采用深灰色（#353535）編輯字體，對于活動狀態的鏈接，采用白色字體，并且創建深灰色（#353535）圓角矩形背景，半徑也是3px。

14、設計時事通訊窗口

選取圓角矩形工具（U），生成一個3px的圓角矩形，像第2步一樣設置雜色濾鏡。

使用字體Georgia Italic編輯標題，從Mono圖標中選擇一個信封的圖標，給此圖標設置了顏色（#F7E5C4）疊加，創建了一個圓角矩形選框，用來輸入用戶郵箱，以白色填充。

15、添加footer

一開始創建footer，就像創建header中的導航一樣，只不過要比導航條高些。

接下來創建一些鏈接，選取圓角矩形選框工具（M），生成如下圖一樣的選框，以深灰色(#323232)進行填充，里面用白色文字填充。

然后把混合模式改成”弱光”，透明度降低到63%，以突出背景顏色。重復此流程，創建其它鏈接。

最后一件事，選擇一些社區媒體圖標添加到鏈接上方，選擇站點logo和copyright放在footer右側。