6-8 制作網(wǎng)頁翻轉(zhuǎn)按鈕

大家經(jīng)常在一些網(wǎng)頁中看到一種會隨著鼠標(biāo)的接觸而變色的按鈕，參見范例網(wǎng)頁。這稱之為鼠標(biāo)翻轉(zhuǎn)效果，這是根據(jù)英文rollover翻譯而來的，其實不是很符合中文的語境。其原理是利用兩張圖片，平時顯示一幅，當(dāng)鼠標(biāo)接觸后換成另外一幅圖片。如下圖。這樣看起來好像是鼠標(biāo)接觸的時候按鈕變亮了?，F(xiàn)在我們來動手制作，首先在Photoshop中將它們制作成圖片，然后再做成網(wǎng)頁。

首先新建一個400×300的白底圖像，新建一層，利用形狀工具橢圓〖U/SHIFTU〗，在公共欄選擇第3種繪圖方式(填充像素)，調(diào)出信息調(diào)板〖F8〗觀看數(shù)值，用任意顏色在新建層中間位置畫一個直徑40左右的正圓(按住SHIFT保持正圓)。如下左圖。

【窗口>樣式】調(diào)出樣式調(diào)板，點擊右上角圓三角按鈕，選擇“替換樣式”，在出來的樣式列表目錄中選擇“Web翻轉(zhuǎn)樣式”，確認(rèn)目前選擇的是新建層，然后使用“選中狀態(tài)的藍(lán)色膠體按鈕”樣式。如下中圖紅色箭頭處。大家也可以自己選擇其他顏色的。

將新建層與背景層合并，然后【圖像>修整】，如下右圖所示。確定操作后圖像將被裁剪為和所畫的圓同等大小。這個命令的作用是根據(jù)左上角第一個像素處，或右下角最后一個像素處的顏色，在我們這幅圖像中這兩個地方都是白色。然后就將畫面中連續(xù)的白色部分裁剪掉。這就好像現(xiàn)實中打印圖像之后將紙張的邊緣裁剪掉一樣。

接著將背景圖層復(fù)制一層，對復(fù)制出來的圖層使用曲線工具，合并高光和暗調(diào)區(qū)域(高光點229,255；暗調(diào)點60,0)，形成加亮按鈕的效果。如下左圖。完成后我們得到兩個圖層，分別是暗色按鈕的背景層，和亮色按鈕的背景復(fù)制層。

使用【文件>在ImageReady中編輯】〖CTRLSHIFTM〗，或點擊工具欄最下方按鈕，將會跳轉(zhuǎn)到ImageReady中，這是Photoshop附帶的一個軟件，用來制作動畫和網(wǎng)頁。我們找到Web內(nèi)容和圖層兩個調(diào)板，如下右圖。后面的操作就是由這兩個調(diào)板配合完成。

-