任務四制作個人求職網站菜單按鈕

網站建設與維護項目五處理網站圖像CONTENTS目錄Part1安裝并運行Photoshop圖像處理軟件Part4制作個人求職網站菜單按鈕Part2使用Photoshop摳圖Part3圖像大小和屬性的處理Part5制作個人求職網站廣告條04

任務四

制作個人求職網站菜單按鈕

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

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

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