亚洲6080yy久久无码产自国产,正在播放的国产A一片

使用Photoshop cs5設(shè)計清新優(yōu)雅的網(wǎng)頁布局

作者：佚名點擊：209次評論：1次標(biāo)簽： Photoshopcs5

類型：圖像處理大�。�119.5M語言：中文評分：8.2
標(biāo)簽：

立即下載

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

Photoshop cs5：http://elephantinaurance.com/soft/11058.html

點擊下面的圖片可以看到全面的網(wǎng)頁設(shè)計.

工作樣例

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

相關(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文檔

第一件事，我們需要建立一個新的Photoshop文檔，用于我們的網(wǎng)頁設(shè)計布局，并使其尺寸設(shè)置為1020×1180px.

步驟2: 設(shè)置導(dǎo)航條背景

我們將從頭部開始，然后按照我們的思路一直做到底部。使用矩形選擇工具(M), 創(chuàng)建一個整個網(wǎng)頁寬度的矩形畫布，然后向其填充暗灰色(#393939)。

步驟3: 風(fēng)格化導(dǎo)航條背景

通過組合鍵Cmd + J 復(fù)制已經(jīng)創(chuàng)建好的導(dǎo)航條，在復(fù)制圖層上使用一個降噪濾鏡(濾鏡 > 噪點 > 添加噪點) ，要注意的是，我們應(yīng)該使用統(tǒng)一的噪點分布，使背景可以為以后使用。

然后改變這一層的混合模式為疊加，降低不透明度為23％左右。

步驟4: 創(chuàng)建站點的Logo或是名字

對于我們的Logo,我使用字體“Georgia”并設(shè)置為“粗斜”，我使用白色(#FFFFFF)做為文本“Six”的顏色，并且使用米色(#F7E5C4) f作為文本“Studios”的顏色. 對于這個Logo或是名字, 我使用本文前面提到的資源中免費的Mono Icons 列表中的 boxupload32 圖標(biāo)。

步驟5: 添加菜單鏈接

到了做橫向?qū)Ш芥溄拥臅r候了. 將活動鏈接顏色設(shè)為 #DBD1BE, 非活動鏈接顏色設(shè)為 #ABAAAA.

為了讓我們的活動鏈接更引人注目，給它做個圓角矩形背景。從工具面板中選擇矩形工具（U），選中活動鏈接文字，然后調(diào)整邊緣中半徑設(shè)為5px、前景色設(shè)為#464646, 如下圖所示做一個圓角矩形。.

在你的圓角矩形圖層上，右擊并從上下文菜單中選擇混合選項，添加內(nèi)陰影和描邊圖層樣式。

內(nèi)陰影設(shè)置:

描邊設(shè)置:

步驟6: 功能區(qū)域添加背景色

為便于用戶瀏覽和查看你的精選作品，在網(wǎng)頁布局的頂端部分，會設(shè)置一個圖片幻燈片區(qū)域。這個區(qū)域也可以顯示關(guān)于你的站點的一些描述。要開始做事了，我們要使用矩形選框工具（M）創(chuàng)建一個矩形用來表示該功能區(qū)的背景，填充顏色 #D3CAB8.

接下來，下載并且在Photoshop中打開Grungy Natural Beige Photoshop Pattern (或是您自己喜歡的風(fēng)格) 。拖拽這個紋理到你的畫布上，并覆蓋該區(qū)域背景。

步驟7: 屏蔽掉背景紋理中不需要的部分

我們不希望到最后顯示多余的紋理, 所以我們要屏蔽掉不需要的部分. 要做到這一點, Cmd/Ctrl + click 在圖層面板的功能背景層的縮略圖上做自動選擇.

在圖層面板中選擇紋理層，然后點擊面板底部的添加圖層蒙版按鈕掩蓋除選擇區(qū)域外的一切。

然后調(diào)整紋理層的不透明度到35%左右，讓下面的圖可以顯示出來。

使用橫排文字工具（T），在此功能區(qū)使用字體“黑體”或“宋體”添加一些文字，要確保標(biāo)題文字和正文在不同的層次。

標(biāo)題文本顏色使用白色(#FFFFFF)，正文顏色使用淺灰色(#2A2A2A).

給標(biāo)題文本添加一個下拉陰影和顏色漸變的效果。

陰影設(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)建的按鈕。

在這個圓角矩形圖層上添加外發(fā)光和顏色漸變效果，使形狀更生動。

外發(fā)光設(shè)置:

漸變疊加設(shè)置:

步驟9: 添加florish 設(shè)計元素

功能區(qū)這里最后一步是添加一個微妙的florish設(shè)計元素，增強(qiáng)網(wǎng)頁優(yōu)雅而高貴的外觀和感覺。首先，下載并安裝碎花刷子畫筆包（在前面的相關(guān)資源中列出）。

在使用畫筆前設(shè)置前景色為 #343434 .

選擇畫筆工具（B），在我們安裝的筆刷包中找到你喜歡的花筆尖，通過一次點擊應(yīng)用你的筆觸。

之后，改變層的混合模式為強(qiáng)光。

步驟10: 創(chuàng)建幻燈片區(qū)

讓我們一起來處理幻燈片內(nèi)容區(qū)，使用圓角矩形工具（U）在網(wǎng)頁布局右側(cè)生成一個前景色為白色（#FFFFFF），半徑為5px的圓角矩形形狀。

調(diào)整這層的透明度為15%，讓一些背景圖案可以顯示出來，然后添加陰影的形狀。

步驟11:在幻燈片區(qū)添加一個圖片

我們需要在框中這一點上添加縮略圖，取一個你可以在這個區(qū)域使用的圖像（如網(wǎng)站的截圖），并放置在這個區(qū)域上。我們想要把圓角羽化，在圖層面板中，CMD/Ctrl+點擊圓角矩形的縮略圖預(yù)覽進(jìn)行選擇。

還是在圖層面板上，在上面選擇圖像層。打開選擇> 修改>羽化選區(qū) 設(shè)為10px。然后，選擇>反向(Cmd/Ctrl + Shift + I) 反向你的選擇。

設(shè)置圖片圓角，選擇編輯> 清理.

步驟12: 為正在顯示的圖片添加文字描述

讓我們?yōu)榛脽羝瑓^(qū)域當(dāng)前顯示的圖片添加文字描述。在圖層面板的縮略圖預(yù)覽圖像周圍通過（Cmd/Ctrl+單擊）創(chuàng)建一個選取框。選取后，創(chuàng)建一個新層并且用黑色（#000000）填充選區(qū)。然后使用矩形選框工具（M）選擇新創(chuàng)建的圓形黑色矩形的頂部并刪除它。

該層的不透明度降低到75%左右，讓圖像可以顯示出來。完成后，使用橫排文字工具（T）添加一些文本用來描述圖像。

步驟13:在功能區(qū)底部添加分割

功能區(qū)的最后一步是在它的底部添加一個灰色、水平分割。我們按照步驟2和步驟3中相同的方法創(chuàng)建這個分割，唯一的不同是給它添加內(nèi)陰影。

這是我們?nèi)客瓿傻墓δ軈^(qū)：

時間轉(zhuǎn)移到我們的主要內(nèi)容區(qū)

步驟14: 主要內(nèi)容區(qū)添加背景色

你可能已經(jīng)猜到了，內(nèi)容區(qū)域?qū)⒃谖覀兊木W(wǎng)頁設(shè)計預(yù)覽中顯示為3列。我們不想使其變得枯燥并且放棄白色的背景，所以用矩形選框工具（M）創(chuàng)建一個跨越整個畫布寬度的矩形選框，給它填充白色（#000000）。

我們的內(nèi)容區(qū)域?qū)⑹欠浅：唵蔚模侨绻龅谜_也需要走一段很長的路要走。我們將從左側(cè)開始，在左側(cè)放置服務(wù)列表。

步驟15: 添加列標(biāo)題

對于列標(biāo)題，該列內(nèi)容將從Mono Icons中挑選符號，并將它們定位到左側(cè)。

列標(biāo)題文字使用“Georgia”字體和深灰色（#323232），接下來，使用鋼筆工具（P）在列標(biāo)題下面添加一個底部邊框。

在路徑中使用描邊，首先設(shè)置和文字相同的前景色（#323232），然后找到一個很好的畫筆筆尖直徑設(shè)為3px。