ps大家都很熟悉，這是一款功能強(qiáng)大的圖片處理軟件。這款軟件包含眾多的編修與繪圖工具，可以便捷地進(jìn)行圖片編輯，今天我們不講圖片，專門和大家討論用ps怎么設(shè)計網(wǎng)頁的問題。

網(wǎng)絡(luò)的普及是促使更多人需要掌握Photoshop，因為在網(wǎng)頁設(shè)計制作時Photoshop是必不可少的網(wǎng)頁圖像處理軟件。

　　一、用ps制作網(wǎng)頁頁腳

　　1、和液體感的頁首和頁腳一樣，漸變通常是web2.0設(shè)計風(fēng)格的標(biāo)志。在這個教程中我們將使用到一組模擬3D材質(zhì)的漸變文件包。你可以從excellent Deziner Folio得到這個文件包。點擊這里下載漸變文件包。

　　2、在Photoshop中創(chuàng)建新文檔。我自己創(chuàng)建了一個大的文件，1440像素X900像素大小(以適應(yīng)我的17英寸顯示屏的筆記本)。當(dāng)然，實際上你的頁腳不應(yīng)該這么大，雖然它可以很好的模擬出當(dāng)你的瀏覽器窗口被拖拽后的情況。選擇一個背景顏色，在我的這個例子中，背景色是一個簡單的從#b0b0b0到#e1e1e1的漸變色。按住Shift鍵，創(chuàng)建一個垂直的從上到下的漸變。

　　3、你將要創(chuàng)建什么樣的布局在網(wǎng)頁設(shè)計中是非常重要的。也就是在流式布局(可以自適應(yīng)瀏覽器大小的布局)和固定寬度布局(在web2.0風(fēng)格的網(wǎng)站中固定寬度布局經(jīng)常會是居中的)之中作出選擇。我們的這個頁腳將會是一個固定寬度布局的頁腳，大小為760像素X420像素。這個尺寸會保證即使在800像素X600像素大小的屏幕上，也叫也會正確的顯示出來。

　　4、雖然我們的頁腳是固定寬度，我們?nèi)匀幌Ｍ撃_能夠填滿整個頁面。為了實現(xiàn)這個目的，我們會用到我在Photoshop中制作的仿金屬材質(zhì)的圖案。點擊這里下載此圖案。在Photoshop中打開這個圖片，選擇編輯>定義圖案，為圖案命名。

（圖片來自網(wǎng)絡(luò)）

　　5、現(xiàn)在是時候使用第1步中那漂亮的漸變文件包了。創(chuàng)建一個新的圖層，使用矩形選區(qū)工具(M)創(chuàng)建一個100%文檔寬度的，21像素高的選區(qū)。選擇漸變工具(G),然后選擇一個漂亮的漸變，我選擇的是”Black 5-Gloss”，現(xiàn)在按住Shift鍵在矩形選區(qū)內(nèi)畫一條垂直的線，創(chuàng)建這個漸變。

　　6、現(xiàn)在我們給第5步創(chuàng)建的圖層添加上陰影效果。

　　7、將前景色設(shè)置為#545557，背景色設(shè)置為#1e211f。在第4步創(chuàng)建的圖層下創(chuàng)建一個新的圖層。使用選區(qū)工具選取第4步圖層的內(nèi)容。選擇漸變工具，選擇第一個漸變(前景和背景色的結(jié)合)，按住shift鍵，在選區(qū)上畫出一個垂直的漸變。現(xiàn)在選擇第4步的圖層，將圖層混合模式更改為正片疊底。

　　8、在所有圖層上方創(chuàng)建一個新的圖層，在參考線中間畫一個顏色為#dfdfdf的圓角矩形。在圖層上右擊，點擊混合選項，給矩形創(chuàng)建一個投影效果。然后在效果圖層上右擊，選擇創(chuàng)建圖層，這樣會將投影效果分離為一個單獨的圖層。

　　9、最后添加文字、版權(quán)信息和你的logo完成設(shè)計。

　　二、用ps設(shè)計網(wǎng)頁版的會員登錄頁面

　　1、新建一個空白文檔，不需要特別大，修改背景色為淺色系，然后進(jìn)行填充。

　　2、使用畫筆進(jìn)行涂抹，然后使用高斯模糊使其看起來更自然。

　　3、接下來增加填充框，并且設(shè)定圖層的描邊等樣式。

　　4、以此類推設(shè)置三個填充框，并且注明會員登陸。

　　5、最后，設(shè)置登錄的特殊顏色，為各個地方標(biāo)注上默認(rèn)提示即可。

　　6、可以改進(jìn)或者需要注意的是，登錄的按鈕設(shè)置上可以使用漸變色。

（圖片來自網(wǎng)絡(luò)）

　　三、用ps設(shè)計網(wǎng)頁效果圖

　　1、首先打開PS軟件,新建一個畫布，設(shè)置尺寸是寬度1920像素,高度要根據(jù)需求設(shè)置,暫時設(shè)置為6000像素(注意單位要是像素)。

　　2、網(wǎng)頁圖分為三部分: Head (頭部)、Body (banner+內(nèi)容)、foot(結(jié)尾) , Head包含logo、公司名稱、導(dǎo)肌-、網(wǎng)站 頁，丁代們個業(yè)文化聯(lián)系我們)、聯(lián)系電話、二維碼等內(nèi)容; Body部分包含banner圖、詳情內(nèi)容介紹; foot(結(jié)尾)指的是最下面的索引部分

　　3、在作圖的時候,要做好分組(ctrl+G )，,編輯好名稱(雙擊圖層文字即可編輯)，從上到下完成,便于及時修改。

　　4、整體頁面顏色步調(diào)一致。在作圖時整個顏色不宜太多,一般不超過3個顏色,顏色差別也不宜太大，整體給人的感覺舒服、美觀。

　　5、參照線輔助。參考線作圖比較常用,便于輔助圖片文字對齊,達(dá)到整體的協(xié)調(diào)。

　　6、做好切圖。切圖有兩種方式,上次已經(jīng)分享過不做贅述。切圖是為了圖片切成一張張小圖,便于導(dǎo)出。

　　7、頁面存儲。頁面做好后點擊新建-存儲為web所用格式-存儲-格式(選擇HEML和圖像) ,這樣打開的圖形就是切圖的內(nèi)容及網(wǎng)頁的圖,便于用戶查看。

　　8、查看代碼。一個網(wǎng)頁圖查看代碼只需要打開網(wǎng)頁圖右鍵點擊"審查元素"就可以看到后臺的代碼組了。

　　關(guān)于用ps怎么設(shè)計網(wǎng)頁，小編用三個不同的實例做了簡單的介紹和說明，希望能對初學(xué)者有一定幫助。小編一直覺得ps是一款強(qiáng)大且復(fù)雜的工具軟件，多練多上手操作才能盡快掌握。