作者:PS真功夫 翻譯　  出處:

Photoshop教程：一款清新高雅的網(wǎng)頁(yè)布局

預(yù)覽：


在這篇網(wǎng)頁(yè)設(shè)計(jì)教程中，你將學(xué)習(xí)如何設(shè)計(jì)優(yōu)雅并專業(yè)的網(wǎng)頁(yè)布局，我們將運(yùn)用各種photoshop技巧，依靠圖形工具和圖層樣式等基本操作來實(shí)現(xiàn)此布局。作為獎(jiǎng)勵(lì)，在教程結(jié)束后附有HTML/CSS/JavaScript的網(wǎng)站模板，完全免費(fèi)下載。

網(wǎng)站模板

點(diǎn)擊下圖查看網(wǎng)站模板

素材

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

1、新建文檔

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

2、設(shè)置導(dǎo)航條背景

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

復(fù)制（cmd/ctrl+J）剛新建的導(dǎo)航圖層，并對(duì)其添加雜色濾鏡（濾鏡>雜色>添加雜色），如下設(shè)置：

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

3、創(chuàng)建站點(diǎn)logo/名稱

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

4、添加菜單

使用顏色（#DBD1BE）編輯激活時(shí)的菜單，正常狀態(tài)的菜單使用顏色（#ABAAAA）。

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

，然后設(shè)置如下圖層樣式：

‘內(nèi)陰影’/'描邊’：

5、添加展示區(qū)背景

在布局頭部，我們還要添加一個(gè)作品展示區(qū)，以幻燈片形式來播放圖片，每張圖片配有簡(jiǎn)單介紹和導(dǎo)航。在開始前，選取矩形選框工具（M）創(chuàng)建矩形，以顏色（#D3CAB8）進(jìn)行填充。

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

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

6、添加網(wǎng)站介紹

使用水平字體工具（T），在展示區(qū)左側(cè)添加網(wǎng)站文字說明，采用Helvetica 或Arial字體進(jìn)行編輯，確保標(biāo)題（顏色#FFFFFF）和內(nèi)容（顏色#2A2A2A）文字在不同圖層。

為了使標(biāo)題更加炫目，按如下設(shè)置添加圖層樣式：

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

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

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

‘外發(fā)光’/'漸變疊加’：

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

7、創(chuàng)建幻燈片區(qū)

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

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

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

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

降低圖層透明度到75%，添加簡(jiǎn)單的文字說明

8、在展示區(qū)底部添加分隔線

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

設(shè)計(jì)的主內(nèi)容區(qū)的時(shí)間到了！

9、給主內(nèi)容區(qū)添加背景

就像預(yù)覽圖一樣，主內(nèi)容區(qū)分布為三列，選取矩形選框工具（M），生成畫布寬的選區(qū)，用顏色（#FBF5EA）進(jìn)行填充。

主內(nèi)容區(qū)的設(shè)計(jì)其實(shí)相當(dāng)簡(jiǎn)單，但是要讓人看出很簡(jiǎn)單也要花一定時(shí)間完成。我們將從左邊開始，放置服務(wù)列表。

10、添加列標(biāo)題

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

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

下面為曲線添加一點(diǎn)漸變，設(shè)置”漸變疊加”的圖層樣式：

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

11、為左欄添加內(nèi)容

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

12、為中欄添加內(nèi)容

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

接著為圓角矩形設(shè)置圖層樣式：

‘外發(fā)光’/'描邊’：

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

13、為右欄添加內(nèi)容

像左欄和中欄一樣，添加標(biāo)題和圖標(biāo)。對(duì)于未激活的鏈接，采用深灰色（#353535）編輯字體，對(duì)于活動(dòng)狀態(tài)的鏈接，采用白色字體，并且創(chuàng)建深灰色（#353535）圓角矩形背景，半徑也是3px。

14、設(shè)計(jì)時(shí)事通訊窗口

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

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

15、添加footer

一開始創(chuàng)建footer，就像創(chuàng)建header中的導(dǎo)航一樣，只不過要比導(dǎo)航條高些。

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

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

最后一件事，選擇一些社區(qū)媒體圖標(biāo)添加到鏈接上方，選擇站點(diǎn)logo和copyright放在footer右側(cè)。