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