使用Photoshop cs5設計清新優雅的網頁布局

Adobe Photoshop CS5精簡漢化特別版

• 類型：圖像處理大?。?i>119.5M語言：中文 評分：8.2
• 標簽：

立即下載

在這個網頁設計教程，您將學習如何創建一個優雅和專業的網頁布局，可以用來作為網站系列站點。我們將使用Photoshop中的各種技術，依靠一些基本的工具，如形狀工具和圖層樣式，這將導致一個可用的網頁設計。作為獎勵，我們已列入工作的HTML / CSS/ JavaScript的網頁模板，您可以下載并使用你喜歡的任何方式，免費！

Photoshop cs5：http://www.pirinnaturalssoapandspa.com/soft/11058.html

點擊下面的圖片可以看到 全面的網頁設計.

工作樣例

點擊下面的圖片可以看到 工作范例 

 

相關資源

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: 中間列添加內容