ps網(wǎng)頁布局設(shè)計(jì)實(shí)例教程

今天，我將介紹如何創(chuàng)建一個(gè)干凈的網(wǎng)絡(luò)布局、一個(gè)漂亮的背景。開門見山，咱直接切入正題吧，菇?jīng)鰩浉鐐冇信d趣的話，可以打開PS跟著做喲。

開始設(shè)置的文件

打開一個(gè)新的文檔：外形尺寸1200×1640像素，分辨率為72像素/英寸。

我們要?jiǎng)?chuàng)建基本的背景層。簡單的在草稿上勾畫出大概的布局與結(jié)構(gòu)，可以看出頁面最終的雛形，不過

在設(shè)計(jì)過程中，我們可能會(huì)添加新的元素。

草稿上可以看出，我們將創(chuàng)建5個(gè)分欄，在這里我們將添加的內(nèi)容。

添加的第一層，這將是我們的背景，顏色#ededed。

在頁面頂部繪制一個(gè)矩形命名為top1(使用矩形柵格化的圖層(顏色#ededed)，并添加雜色(濾鏡>雜色>添加雜色0.5 – 0.8;高斯分布和單色)。再次繪制矩形，顏色#cddcec)，柵格化的形狀和添加雜色(濾鏡>雜色>添加雜色0.5 – 0.8;高斯分布和單色)。添加一個(gè)漸變疊加(柔光，54%，從黑到白的90%，角度和縮放75%)。

接下來添加矩形(U)，在中間新建一個(gè)矩形(顏色為#608bb6，高度400像素左右)，設(shè)置混合模式為顏色加深，并填充為75%，然后添加一個(gè)白色的描邊1像素(圖層樣式)。

最后的底部頁腳添加一個(gè)矩形形狀，使用相同的工具和色彩，但現(xiàn)在設(shè)置混合線性光，不透明度為70%。

下面的最終結(jié)果。

步驟2 – 背景

給我們的背景添加紋理。

添加一個(gè)新層(CTR + SHIFT + N)，使用選框工具在畫布頂部添加一個(gè)1像素的白線。(仔細(xì)看下圖頂部有條白線)

現(xiàn)在打開一個(gè)新的文檔12×1像素，背景層解鎖并隱藏它。放大到3200%(最大)，添加一個(gè)新圖層，使用矩形選框工具添加兩個(gè)1×1像素的正方形，填充顏色為#FFF和其他#000，如下圖所示。然后選擇菜單>編輯>定義圖案。

我們制作了一個(gè)新的圖案效果即將使用(這也是一個(gè)制作樣式圖案方法哦)

回到我們的主要文件。創(chuàng)建一個(gè)新的圖層，用矩形選框工具繪制一個(gè)整個(gè)畫布那么大的選區(qū)，填充前景色，設(shè)置填充為0%，然后添加圖層樣式里的圖案疊加。

現(xiàn)在是時(shí)候繪制云了!

您可以拉出5條輔助線(如圖，方法,菜單>視圖>新建參考線分別輸入位置84px – 186px – 600px的- 1014px – 1118px)，以劃分工作區(qū)，然后使用橢圓工具添加一些形狀(如圖)，然后把這幾個(gè)形狀圖層都選中并編組。

復(fù)制這個(gè)組

并將復(fù)制出來的組轉(zhuǎn)化為智能對象(點(diǎn)組然后右鍵即可看到)，添加雜色。

現(xiàn)在，你必須使用一個(gè)圖層蒙版隱藏超出部分的云(認(rèn)真看下面的方法)：Ctrl +單擊“圖層top1”那個(gè)圖層縮覽圖(在“圖層”面板中)，出現(xiàn)選區(qū)，然后單擊選擇已經(jīng)添加雜色那個(gè)云的圖層，關(guān)鍵的一步，單擊添加矢量蒙版。

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%7D5E@RN[%7BWBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%7D5E@RN[%7BWBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%7D5E@RN[%7BWBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%7D5E@RN[%7BWBM5L_1MA1$~9J5.jpg[/img]

[img]http://www.uisdc.com/Users/Administrator/AppData/Roaming/Tencent/Users/335485107/QQ/WinTemp/RichOle/%7D5E@RN[%7BWBM5L_1MA1$~9J5.jpg[/img]

然后應(yīng)用下面的樣式。內(nèi)陰影：混合模式選擇疊加，白色，透明度55%，全局光角度120°，距離5大小0。

出現(xiàn)云的白色投影。

現(xiàn)在，我們畫個(gè)漂亮的云彩陰影。復(fù)制云那圖層，先清除圖層樣式，調(diào)整位置向右側(cè)下移低于原來的層，設(shè)置填充為0%，再添加下面的樣式。

漸變疊加，線性，混合模式正常，角度90°。

如果成功出現(xiàn)了，那么使用相同的方式來繪制他的云。

第3步 – 頂部配飾繪制

添加logo。使用鋼筆工具(顏色#79a7db)，勾畫出下面的圖形，使用直線工具繪制兩個(gè)白色線段。然后添加圖層樣式。

投影，混合模式為正片疊底，透明度46%，取消全局光，調(diào)整角度為140°，距離7px大小0。描邊，白色大小3px，位置內(nèi)部，透明度55%，混合模式正常。確定

然后為兩條白線也應(yīng)用相同的陰影。

添加文字(找個(gè)類似的字體吧)圖中使用 Ballpark 字體，然后添加陰影和漸變疊加。圖層樣式如下圖。