Photoshop教程:設(shè)計(jì)非常漂亮的網(wǎng)頁(yè)頁(yè)腳

自從Web2.0沖擊互聯(lián)網(wǎng)以來(lái)，頁(yè)腳就變得比以前任何時(shí)候都顯得重要了，出現(xiàn)了許多非常漂亮的頁(yè)腳設(shè)計(jì)。在這個(gè)教程中，我將會(huì)教給你如何在Photoshop中創(chuàng)建一個(gè)簡(jiǎn)潔、光滑的網(wǎng)站頁(yè)腳。

這就是我們把要?jiǎng)?chuàng)建的頁(yè)腳。

第1步

與液體感的頁(yè)首與頁(yè)腳相同，漸變通常是web2.0設(shè)計(jì)風(fēng)格的標(biāo)志。在這個(gè)教程中我們把運(yùn)用到一組模仿3D材質(zhì)的漸變文件包。你可從excellent Deziner Folio獲得這個(gè)文件包。單擊這兒下載漸變文件包。

第2步

在PS中新建新文檔。我個(gè)人新建了一大的文件，1440像素X900像素大小（以適應(yīng)我的17英寸顯示屏的筆記本）。當(dāng)然，實(shí)際上你的頁(yè)腳不應(yīng)該這么大，雖然它可很好的模仿出當(dāng)你的瀏覽器窗口被拉拽后的情況。

選取一背景色彩，在我的這個(gè)例子中，背景色是一容易的從#b0b0b0到#e1e1e1的漸變色。按住Shift鍵，新建一垂直的從上到下的漸變。

第3步

你把要新建什么樣的布局在網(wǎng)頁(yè)設(shè)計(jì)中是相當(dāng)重要的。也就是在流式布局（可自適應(yīng)瀏覽器大小的布局）與固定寬度布局（在web2.0風(fēng)格的網(wǎng)站中固定 寬度布局常常會(huì)是居中的）之中作出選取。我們的這個(gè)頁(yè)腳把會(huì)是一固定寬度布局的頁(yè)腳，大小為760像素X420像素。這個(gè)尺寸會(huì)保證即使在800像素 X600像素大小的屏幕上，也叫也會(huì)準(zhǔn)確的顯示出來(lái)。

如下運(yùn)用網(wǎng)格來(lái)你的網(wǎng)站的大小。留意假如你想新建一合適于1024像素x768像素屏幕大小的布局，那么把你的網(wǎng)格定義在955像素X600像素的區(qū)域。

第4步

雖然我們的頁(yè)腳是固定寬度，我們?nèi)耘f希望頁(yè)腳能夠填滿整個(gè)頁(yè)面。只為實(shí)現(xiàn)這個(gè)目的，我們會(huì)用到我在Photoshop中做的仿金屬材質(zhì)的圖片。單擊這兒下載此圖片。在PS中打開(kāi)這個(gè)照片，選取編輯>定義圖片，為圖片命名。

此時(shí)新建一新的文檔，1440像素寬，86像素高，選取編輯>填充命令，選取我們剛剛新建的圖片。全部選擇（Ctrl+A），之后把照片剪切、粘貼到我們的第一文檔的底端，我們把會(huì)獲得如下的結(jié)果。

第5步

此時(shí)是時(shí)候運(yùn)用第1步中那美麗的漸變文件包了。新建一新的圖層，運(yùn)用矩形選區(qū)工具（M）新建一100%文檔寬度的，21像素高的選區(qū)。選取漸變工具 （G）,之后選取一美麗的漸變，我選取的是”Black 5-Gloss”，此時(shí)按住Shift鍵在矩形選區(qū)內(nèi)畫(huà)一條垂直的線，新建這個(gè)漸變。

把新建好的外形拖動(dòng)到第4步中新建的外形的上面。你應(yīng)當(dāng)獲得與下圖顯示的照片類似的結(jié)果。

第6步

此時(shí)我們給第5步新建的圖層加上上陰影效果。

第7步

把前景色設(shè)定為#545557，背景色設(shè)定為#1e211f。在第4步新建的圖層下新建一新的圖層。運(yùn)用選區(qū)工具選擇第4步圖層的內(nèi)容。選取漸變工 具，選取第一漸變（前景與背景色的結(jié)合），按住shift鍵，在選區(qū)上勾出一垂直的漸變。此時(shí)選取第4步的圖層，把圖層混合模式修改為正片疊底。

第8步

在所有圖層上面新建一新的圖層，在參考線中間畫(huà)一色彩為#dfdfdf的圓角矩形。在圖層上右擊，單擊混合選項(xiàng)，給矩形新建一投影效果。之后在完成圖層上右擊，選取新建圖層，如此會(huì)把投影效果分離為一單獨(dú)的圖層。

此時(shí)你已經(jīng)有了矩形圖層與陰影圖層，拖動(dòng)并且調(diào)整陰影的大小直到獲得如下圖的效果。你可按下Ctrl+T來(lái)調(diào)出變換工具，之后右擊，選取透視，向內(nèi)拉拽頂部的兩個(gè)手柄。也可把陰影朝下方拖動(dòng)，運(yùn)用柔軟畫(huà)筆的橡皮工具把上面邊上的陰影擦掉。

第9步

最終加上文字、版權(quán)信息與你的logo做完設(shè)計(jì)。

第10步

只為在html文件中運(yùn)用頁(yè)腳，只需把文字移除（文字把會(huì)在html中加上），見(jiàn)下圖剪切背景照片，之后把其粘貼到一新的文件中。就像在 Photoshop中那樣，這個(gè)圖片把會(huì)在CSS文件中運(yùn)用背景照片屬性來(lái)實(shí)現(xiàn)。這就是為什么我們要把照片剪切到這么小，為的是以小的文件獲得更好的效 果。

要剪切頁(yè)腳只想要在參考線內(nèi)選取照片的內(nèi)容，之后把其剪切并粘貼到一新的文件中。

選取存儲(chǔ)>存儲(chǔ)為網(wǎng)頁(yè)與設(shè)備命令來(lái)保存這兩張照片。之后選取JPG格式與適合的品質(zhì)。JPG格式與PNG格式都是存儲(chǔ)照片的很好的格式，他們可保存很多的色彩。GIF格式最好用于色彩容易的照片。這種不同的使用方法是因?yàn)椴煌乃惴ǖ脕?lái)的。

最后的頁(yè)腳

如此就做完了一幅漂亮的頁(yè)腳元素！