網站圖片導航設計製作全過程
下面是我做的一個導航效果,當鼠標放到按鈕上的時候就會變化一種顏色。做到這樣的效果你需要兩個軟件第一個是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)依照上面的方法,製作其他的導航按鈕,最後得到這個效果:當鼠標放到按鈕上的時候,按鈕就會變化一種顏色,至此,圖片導航就只做完成了。