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

​下面是我做的一個導航效果，當滑鼠放到按鈕上的時候就會變化一種顏色。做到這樣的效果你需要兩個軟體第一個是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）依照上面的方法，製作其他的導航按鈕，最後得到這個效果：當滑鼠放到按鈕上的時候，按鈕就會變化一種顏色，至此，圖片導航就只做完成了。