在這個(gè)網(wǎng)頁設(shè)計(jì)教程，您將學(xué)習(xí)如何創(chuàng)建一個(gè)優(yōu)雅和專業(yè)的網(wǎng)頁布局，可以用來作為網(wǎng)站系列站點(diǎn)。我們將使用Photoshop中的各種技術(shù)，依靠一些基本的工具，如形狀工具和圖層樣式，這將導(dǎo)致一個(gè)可用的網(wǎng)頁設(shè)計(jì)。作為獎(jiǎng)勵(lì)，我們已列入工作的HTML / CSS/ JavaScript的網(wǎng)頁模板，您可以下載并使用你喜歡的任何方式，免費(fèi)！
Photoshop cs5：http://www.innovatechautomation.com/soft/11058.html
點(diǎn)擊下面的圖片可以看到 全面的網(wǎng)頁設(shè)計(jì).
工作樣例
點(diǎn)擊下面的圖片可以看到 工作范例
相關(guān)資源
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文檔
第一件事，我們需要建立一個(gè)新的Photoshop文檔，用于我們的網(wǎng)頁設(shè)計(jì)布局，并使其尺寸設(shè)置為1020×1180px.
步驟2: 設(shè)置導(dǎo)航條背景
我們將從頭部開始，然后按照我們的思路一直做到底部。 使用矩形選擇工具(M), 創(chuàng)建一個(gè)整個(gè)網(wǎng)頁寬度的矩形畫布，然后向其填充暗灰色(#393939)。
步驟3: 風(fēng)格化導(dǎo)航條背景
通過組合鍵Cmd + J 復(fù)制已經(jīng)創(chuàng)建好的導(dǎo)航條，在復(fù)制圖層上使用一個(gè)降噪濾鏡(濾鏡 > 噪點(diǎn) > 添加噪點(diǎn)) ，要注意的是，我們應(yīng)該使用統(tǒng)一的噪點(diǎn)分布，使背景可以為以后使用。
然后改變這一層的混合模式為疊加，降低不透明度為23％左右。
步驟4: 創(chuàng)建站點(diǎn)的Logo或是名字
對(duì)于我們的Logo,我使用字體“Georgia”并設(shè)置為“粗斜”，我使用白色(#FFFFFF)做為文本“Six”的顏色，并且使用米色(#F7E5C4) f作為文本“Studios”的顏色. 對(duì)于這個(gè)Logo或是名字, 我使用本文前面提到的資源中免費(fèi)的Mono Icons 列表中的 boxupload32 圖標(biāo)。
步驟5: 添加菜單鏈接
到了做橫向?qū)Ш芥溄拥臅r(shí)候了. 將活動(dòng)鏈接顏色設(shè)為 #DBD1BE, 非活動(dòng)鏈接顏色設(shè)為 #ABAAAA.
為了讓我們的活動(dòng)鏈接更引人注目，給它做個(gè)圓角矩形背景。從工具面板中選擇矩形工具（U），選中活動(dòng)鏈接文字，然后調(diào)整邊緣中半徑設(shè)為5px、前景色設(shè)為#464646, 如下圖所示做一個(gè)圓角矩形。.
在你的圓角矩形圖層上，右擊并從上下文菜單中選擇混合選項(xiàng)，添加內(nèi)陰影和描邊圖層樣式。
內(nèi)陰影設(shè)置:
描邊設(shè)置:
步驟6: 功能區(qū)域添加背景色
為便于用戶瀏覽和查看你的精選作品，在網(wǎng)頁布局的頂端部分，會(huì)設(shè)置一個(gè)圖片幻燈片區(qū)域。這個(gè)區(qū)域也可以顯示關(guān)于你的站點(diǎn)的一些描述。要開始做事了，我們要使用矩形選框工具（M）創(chuàng)建一個(gè)矩形用來表示該功能區(qū)的背景，填充顏色 #D3CAB8.
接下來，下載并且在Photoshop中打開Grungy Natural Beige Photoshop Pattern (或是您自己喜歡的風(fēng)格) 。 拖拽這個(gè)紋理到你的畫布上，并覆蓋該區(qū)域背景。
步驟7: 屏蔽掉背景紋理中不需要的部分
我們不希望到最后顯示多余的紋理, 所以我們要屏蔽掉不需要的部分. 要做到這一點(diǎn), Cmd/Ctrl + click 在圖層面板的功能背景層的縮略圖上做自動(dòng)選擇.
在圖層面板中選擇紋理層，然后點(diǎn)擊面板底部的添加圖層蒙版按鈕掩蓋除選擇區(qū)域外的一切。
然后調(diào)整紋理層的不透明度到35%左右，讓下面的圖可以顯示出來。
使用橫排文字工具（T），在此功能區(qū)使用字體“黑體”或“宋體”添加一些文字，要確保標(biāo)題文字和正文在不同的層次。
標(biāo)題文本顏色使用白色(#FFFFFF)，正文顏色使用淺灰色(#2A2A2A).
給標(biāo)題文本添加一個(gè)下拉陰影和顏色漸變的效果。
陰影設(shè)置：
漸變疊加設(shè)置:
步驟8:創(chuàng)建 "About us" 圓角按鈕
"About us" 界面按鈕，使用圓角矩形工具（U），還是設(shè)置5px的半徑。按鈕上的文字，可以使用顏色#404040。
你可以找到箭頭圖標(biāo)，我使用Mono Icons 中的 circleright32) 并使用切換命令（CMD/CTRL+T）調(diào)整圖標(biāo)的大小，以填充您創(chuàng)建的按鈕。
在這個(gè)圓角矩形圖層上添加外發(fā)光和顏色漸變效果，使形狀更生動(dòng)。
外發(fā)光設(shè)置:
漸變疊加設(shè)置:
步驟9: 添加florish 設(shè)計(jì)元素
功能區(qū)這里最后一步是添加一個(gè)微妙的florish設(shè)計(jì)元素，增強(qiáng)網(wǎng)頁優(yōu)雅而高貴的外觀和感覺。首先，下載并安裝碎花刷子畫筆包（在前面的相關(guān)資源中列出）。
在使用畫筆前設(shè)置前景色為 #343434 .
選擇畫筆工具（B），在我們安裝的筆刷包中找到你喜歡的花筆尖，通過一次點(diǎn)擊應(yīng)用你的筆觸。
之后，改變層的混合模式為強(qiáng)光。
步驟10: 創(chuàng)建幻燈片區(qū)
讓我們一起來處理幻燈片內(nèi)容區(qū)，使用圓角矩形工具（U）在網(wǎng)頁布局右側(cè)生成一個(gè)前景色為白色（#FFFFFF），半徑為5px的圓角矩形形狀。
調(diào)整這層的透明度為15%，讓一些背景圖案可以顯示出來，然后添加陰影的形狀。
步驟11:在幻燈片區(qū)添加一個(gè)圖片
我們需要在框中這一點(diǎn)上添加縮略圖，取一個(gè)你可以在這個(gè)區(qū)域使用的圖像（如網(wǎng)站的截圖），并放置在這個(gè)區(qū)域上。我們想要把圓角羽化，在圖層面板中，CMD/Ctrl+點(diǎn)擊圓角矩形的縮略圖預(yù)覽進(jìn)行選擇。
還是在圖層面板上，在上面選擇圖像層。打開 選擇> 修改>羽化選區(qū) 設(shè)為10px。然后， 選擇>反向(Cmd/Ctrl + Shift + I) 反向你的選擇。
設(shè)置圖片圓角，選擇 編輯> 清理.
步驟12: 為正在顯示的圖片添加文字描述
讓我們?yōu)榛脽羝瑓^(qū)域當(dāng)前顯示的圖片添加文字描述。在圖層面板的縮略圖預(yù)覽圖像周圍通過（Cmd/Ctrl+單擊）創(chuàng)建一個(gè)選取框。選取后，創(chuàng)建一個(gè)新層并且用黑色（#000000）填充選區(qū)。然后使用矩形選框工具（M）選擇新創(chuàng)建的圓形黑色矩形的頂部并刪除它。
該層的不透明度降低到75%左右，讓圖像可以顯示出來。完成后，使用橫排文字工具（T）添加一些文本用來描述圖像。
步驟13:在功能區(qū)底部添加分割
功能區(qū)的最后一步是在它的底部添加一個(gè)灰色、水平分割。我們按照步驟2和步驟3中相同的方法創(chuàng)建這個(gè)分割，唯一的不同是給它添加內(nèi)陰影。
這是我們?nèi)客瓿傻墓δ軈^(qū)：
時(shí)間轉(zhuǎn)移到我們的主要內(nèi)容區(qū)
步驟14: 主要內(nèi)容區(qū)添加背景色
你可能已經(jīng)猜到了，內(nèi)容區(qū)域?qū)⒃谖覀兊木W(wǎng)頁設(shè)計(jì)預(yù)覽中顯示為3列。 我們不想使其變得枯燥并且放棄白色的背景，所以用矩形選框工具（M）創(chuàng)建一個(gè)跨越整個(gè)畫布寬度的矩形選框，給它填充白色（#000000）。
我們的內(nèi)容區(qū)域?qū)⑹欠浅：?jiǎn)單的，但是如果做得正確也需要走一段很長的路要走。我們將從左側(cè)開始，在左側(cè)放置服務(wù)列表。
步驟15: 添加列標(biāo)題
對(duì)于列標(biāo)題，該列內(nèi)容將從Mono Icons中挑選符號(hào)，并將它們定位到左側(cè)。
列標(biāo)題文字使用“Georgia”字體和深灰色（#323232），接下來，使用鋼筆工具（P）在列標(biāo)題下面添加一個(gè)底部邊框。
在路徑中使用描邊，首先設(shè)置和文字相同的前景色（#323232），然后找到一個(gè)很好的畫筆筆尖直徑設(shè)為3px。
在一個(gè)新層上，去到你的路徑面板（“窗口”>“路徑”），在面板底部點(diǎn)擊描邊路徑的毛筆按鈕。
下一步，我們想給我們的彎曲線一個(gè)漸變的點(diǎn)點(diǎn)。加入漸變疊加圖層樣式。
重復(fù)彎曲的線層（按Ctrl / Cmd+ J），然后輕移它低于原線4到5個(gè)像素，降低它的不透明度到24%左右。
步驟16: 左列添加內(nèi)容
所以的這一切都是留給左列添加內(nèi)容，標(biāo)題文字顏色設(shè)置為深灰色（#323232）。正文使用灰色（如#2A2A2A）可讀的陰影。
使用和步驟8中相同的過程生成“Read More”界面按鈕。然而，中間行，我想切換顏色，所以我做了堅(jiān)實(shí)的顏色灰色（＃484848）圓角矩形，我建議懸停這些按鈕的狀態(tài)呈現(xiàn)在網(wǎng)頁設(shè)計(jì)模擬。
步驟17: 中間列添加內(nèi)容
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
下載 
喜歡 
頂
難過
囧
圍觀
無聊
