下載吧 - 綠色安全的游戲和軟件下載中心

軟件下載吧

當(dāng)前位置:軟件下載吧 > 圖形圖象 > PHOTOSHOP > Photoshop教程:設(shè)計(jì)非常漂亮的網(wǎng)頁(yè)頁(yè)腳

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

時(shí)間:2024-02-06 10:30作者:下載吧人氣:31

作者:startwmlife 出處:網(wǎng)絡(luò)收集

自從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è)腳。

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

第1步

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

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

第2步

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

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

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

第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ū)域。

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

第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é)果。

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

第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é)果。

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

第6步

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

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

第7步

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

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

第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à)筆的橡皮工具把上面邊上的陰影擦掉。

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

第9步

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

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

第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)的。

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

最后的頁(yè)腳

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

Photoshop教程:設(shè)計(jì)非常漂亮的網(wǎng)頁(yè)頁(yè)腳 Photoshop教程:設(shè)計(jì)非常漂亮的網(wǎng)頁(yè)頁(yè)腳 Photoshop教程:設(shè)計(jì)非常漂亮的網(wǎng)頁(yè)頁(yè)腳
標(biāo)簽網(wǎng)頁(yè),頁(yè)腳,漂亮,非常,教程,設(shè)計(jì),Photoshop
查看所有評(píng)論+

網(wǎng)友評(píng)論

網(wǎng)友
您的評(píng)論需要經(jīng)過(guò)審核才能顯示

熱門(mén)閱覽

最新排行

公眾號(hào)

盖楼回复X

(您的评论需要经过审核才能显示)

主站蜘蛛池模板: 中文字幕15页| 亚洲女初尝黑人巨高清| 91高端极品外围在线观看| 欧美性猛交xx免费看| 国产热の有码热の无码视频| 久久大香线蕉综合爱| 精品天海翼一区二区| 在线播放亚洲精品| 亚洲一区精品无码| 色噜噜亚洲男人的天堂| 天天爽夜夜爽人人爽| 亚洲国产另类久久久精品黑人| 黑色丝袜美腿美女被躁翻了| 无人高清视频免费观看在线动漫 | 肉伦迎合下种怀孕| 好男人资源免费手机在线观看| 亚洲欧美视频二区| 黄色三级三级三级免费看| 恋老小说我和老市长| 亚洲综合15p| 97国产在线视频公开免费| 性欧美大战久久久久久久野外| 亚洲美女aⅴ久久久91| 国产成人精品怡红院| 成人免费一区二区三区| 亚洲日韩国产二区无码| 要灬要灬再深点受不了好舒服 | 91av视频网站| 日韩人妻无码中文字幕视频 | 一区二区三区久久精品| 欧美在线观看视频一区| 国产乱子伦农村xxxx| a在线免费观看视频| 日韩精品人妻系列无码av东京| 午夜欧美日韩在线视频播放| 18美女扒开尿口无遮挡| 日操夜操天天操| 亚洲欧美日韩国产一区图片| 视频一区精品自拍| 国产麻豆剧看黄在线观看| 久久伊人色综合|