網站圖片導航設計製作全過程

​下面是我做的一個導航效果，當鼠標放到按鈕上的時候就會變化一種顏色。做到這樣的效果你需要兩個軟件第一個是photoshop，用於製作基本的按鈕圖片，第二個軟件是dreamweaver，將圖片做成導航欄。下面是具體的方法：

操作方法

（01）先開啟photoshop，我們來製作導航圖片，新建一個圖片，高度和寬度分別爲500和300，點擊確定按鈕

（02）先繪製一個按鈕，使用矩形選框工具，畫一個如圖所示的矩形，然後使用油漆桶工具，將矩形選框塗成白色

（03）這時候矩形選框還在，在選單欄上執行：選擇---修改---收縮，我們來縮小一點矩形選框，在彈出的對話框中，設定收縮量爲1，點擊確定按鈕

（04）新建一個圖層2，將圖層2放到圖層1的上面

（05）使用漸變填充，給圖層2添加一個漸變效果，如圖所示

（06）雙擊圖層2的縮略圖，開啟圖層樣式對話框，添加投影效果，設定參數如圖所示，這個參數主要設定不透明度和距離，那你要根據自己的需要設定參數，看着圖片的效果，選擇最合適的參數

（07）最後使用文字工具，添加文字home，也就是主頁的意思

（08）下面我們就要裁剪一下圖片，在選單欄上執行：圖像---裁切。

（09）在開啟的對話框中，設定基於左上角像素顏色，然後點擊確定按鈕。

（10）這是我們得到的最後按鈕效果，灰色部分不是圖片，是ps的背景色。將該按鈕圖片儲存到網站的圖片檔案夾下。

（11）用同樣的方法做出其他的導航上的按鈕，如圖所示：我們看到有兩種顏色的按鈕，對嘍，因爲按鈕點擊的時候會有一個按下彈出的效果，所以我們要用兩張圖片來展示這種效果

（12）開啟dreamweaver軟件，插入一個表格作爲導航欄，如圖所示，在選單欄上執行：插入---表格，插入一個三行一列的表格

（13）將遊標移動到第一個單元格，然後在選單欄上執行操作：插入--圖像對象----鼠標經過圖像

（14）在開啟的對話框中，添加原始圖像和鼠標經過圖像分別是同一個按鈕的兩種不同的顏色，如下面的兩個按鈕圖片：

（15）依照上面的方法，製作其他的導航按鈕，最後得到這個效果：當鼠標放到按鈕上的時候，按鈕就會變化一種顏色，至此，圖片導航就只做完成了。