任務(wù)四制作個(gè)人求職網(wǎng)站菜單按鈕

網(wǎng)站建設(shè)與維護(hù)項(xiàng)目五處理網(wǎng)站圖像CONTENTS目錄Part1安裝并運(yùn)行Photoshop圖像處理軟件Part4制作個(gè)人求職網(wǎng)站菜單按鈕Part2使用Photoshop摳圖Part3圖像大小和屬性的處理Part5制作個(gè)人求職網(wǎng)站廣告條04

任務(wù)四

制作個(gè)人求職網(wǎng)站菜單按鈕

利用PS制作菜單按鈕菜單按鈕是網(wǎng)頁(yè)中常見的元素之一，如何利用好這個(gè)常見的視覺元素為網(wǎng)站添加個(gè)性與魅力呢？我們可以借助ps來制作出符合不同網(wǎng)站或者不同個(gè)人需求的按鈕，以要制作求職網(wǎng)站的菜單按鈕為例。利用PS制作菜單按鈕【步驟1】：新建一張300*300的畫布。填充背景顏色為灰色（#eaeaea），然后利用圓角矩形工具，在畫布上畫一個(gè)適當(dāng)大小的按鈕形狀，大小可以自行把握?！拘陆ㄎ募俊緢A角矩形工具】【設(shè)置顏色】【填充顏色】【繪制圖形】【步驟2】：設(shè)置其混合屬性”內(nèi)陰影、漸變疊加”效果，參數(shù)設(shè)置和效果如下圖：利用PS制作菜單按鈕【設(shè)置內(nèi)陰影】【設(shè)置漸變疊加】【效果圖】【步驟3】：在里面在做一個(gè)圓角矩形，然后復(fù)制一層，做出按鈕效果。設(shè)置其圖層混合模式屬性參數(shù)設(shè)置如下：利用PS制作菜單按鈕【描邊設(shè)置】【內(nèi)發(fā)光設(shè)置】【漸變疊加設(shè)置】【投影設(shè)置】【效果圖】【步驟4】：最后為按鈕添加文字，點(diǎn)擊，將光標(biāo)移至合適的位置，輸入文字，并調(diào)整文字格式大小后，保存即可。利用PS制作菜單按鈕【文字設(shè)置】【輸入文字】【文字屬性設(shè)置】【效果圖示】利用PS制作導(dǎo)航按鈕除了單個(gè)按鈕的制作外，我們還可以利用ps制作完整的菜單按鈕，即網(wǎng)頁(yè)導(dǎo)航：【步驟1】：新建一文件，大小設(shè)置為“200*800”，背景色設(shè)為“透明”，選擇“工具欄”中的“圓角矩形工具”項(xiàng)，并設(shè)置合適的“半徑”（如20像素），然后在繪圖區(qū)域進(jìn)行繪制，效果如圖所示，可以通過按鍵盤組合鍵“Ctrl+T”對(duì)其進(jìn)行調(diào)整?！拘陆ㄎ募俊竟ぞ哌x擇】【屬性設(shè)置】【效果圖】

【步驟2】：切換至“路徑”面板，點(diǎn)擊“將路徑作為選區(qū)載入”按鈕，接著返回“圖層”面板，選擇“工具欄”中的漸變工具，并設(shè)置合適的漸變色進(jìn)行填充。利用PS制作導(dǎo)航按鈕【切換路徑】【漸變工具選擇】【漸變?cè)O(shè)置】【效果圖】利用PS制作導(dǎo)航按鈕【步驟3】：接著雙擊該圖層，為其添加“浮雕圖層樣式”，參數(shù)如圖，新建一個(gè)“圖層2”，接著選擇“圓角矩形工具”，將半徑設(shè)置為“10像素”，并繪制如圖所示的圖形。然后切換至“路徑”面板，點(diǎn)擊“將路徑作為選區(qū)載入”按鈕，然后返回圖層面板，填充一種純色，如“黃色”?！拘泵娓〉裥ЧO(shè)置】【繪制新矩形】【效果圖】利用PS制作導(dǎo)航按鈕【步驟4】：雙擊“圖層2”，為其添加“圖層樣式”，參數(shù)及效果如圖所示?！拘戮匦涡泵娓〉裨O(shè)置】【漸變疊加設(shè)置】利用PS制作導(dǎo)航按鈕【步驟5】：接著將“圖層2”拖動(dòng)到“新建圖層”按鈕上以創(chuàng)建“圖層2副本”，接著選擇“移動(dòng)”工具將“圖層2副本”移動(dòng)到合適的位置，按住鍵盤上“Ctrl”鍵不放的同時(shí)，點(diǎn)擊“圖層2副本”以選中該圖像，然后為其填充另一種顏色，如“紅色”?！緩?fù)制圖層】【填充紅色】【拖動(dòng)圖層】【步驟6】：至此，基本的導(dǎo)航欄結(jié)構(gòu)已經(jīng)做好啦。下面我們來創(chuàng)建切片。點(diǎn)擊“工具欄”中的“切片”工具，然后對(duì)整個(gè)圖像區(qū)域進(jìn)行劃分，其中的一種分割方式如圖：

利用PS制作導(dǎo)航按鈕【切片工具選擇】【切片后效果】【步驟7】：最后點(diǎn)擊“文件”→“存儲(chǔ)為Web所有格式”項(xiàng)，選擇文件類型為“JPEG”格式，接著點(diǎn)擊“存儲(chǔ)”按鈕，在打開的“另存為”窗口中將“存儲(chǔ)類型”設(shè)置為“網(wǎng)頁(yè)和圖像”，最后點(diǎn)擊“保存”按鈕。：利用PS制作導(dǎo)航按鈕【存儲(chǔ)格式選擇】【圖片屬性設(shè)置】【文件名設(shè)置】利用PS制作導(dǎo)航按鈕