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

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

首先新建一個(gè)400×300的白底圖像，新建一層，利用形狀工具橢圓〖U/SHIFTU〗，在公共欄選擇第3種繪圖方式(填充像素)，調(diào)出信息調(diào)板〖F8〗觀看數(shù)值，用任意顏色在新建層中間位置畫一個(gè)直徑40左右的正圓(按住SHIFT保持正圓)。如下左圖。
0614【窗口>樣式】調(diào)出樣式調(diào)板，點(diǎn)擊右上角圓三角按鈕，選擇“替換樣式”，在出來(lái)的樣式列表目錄中選擇“Web翻轉(zhuǎn)樣式”，確認(rèn)目前選擇的是新建層，然后使用“選中狀態(tài)的藍(lán)色膠體按鈕”樣式。如下中圖紅色箭頭處。大家也可以自己選擇其他顏色的。
0615將新建層與背景層合并，然后【圖像>修整】，如下右圖所示。確定操作后圖像將被裁剪為和所畫的圓同等大小。這個(gè)命令的作用是根據(jù)左上角第一個(gè)像素處，或右下角最后一個(gè)像素處的顏色，在我們這幅圖像中這兩個(gè)地方都是白色。然后就將畫面中連續(xù)的白色部分裁剪掉。這就好像現(xiàn)實(shí)中打印圖像之后將紙張的邊緣裁剪掉一樣。

接著將背景圖層復(fù)制一層，對(duì)復(fù)制出來(lái)的圖層使用曲線工具，合并高光和暗調(diào)區(qū)域(高光點(diǎn)229,255；暗調(diào)點(diǎn)60,0)，形成加亮按鈕的效果。如下左圖。完成后我們得到兩個(gè)圖層，分別是暗色按鈕的背景層，和亮色按鈕的背景復(fù)制層。如果以上步驟無(wú)法完成，點(diǎn)此下載范例文件
0616使用【文件>在ImageReady中編輯】〖CTRLSHIFTM〗，或點(diǎn)擊工具欄最下方按鈕，將會(huì)跳轉(zhuǎn)到ImageReady中，這是Photoshop附帶的一個(gè)軟件，用來(lái)制作動(dòng)畫和網(wǎng)頁(yè)。我們找到Web內(nèi)容和圖層兩個(gè)調(diào)板，如下右圖。后面的操作就是由這兩個(gè)調(diào)板配合完成。

-

在完成以上5個(gè)步驟后，我們就可以開始制作鼠標(biāo)翻轉(zhuǎn)效果了。開始之前我們先簡(jiǎn)要介紹一下制作的原理。范例網(wǎng)頁(yè)大家也看過(guò)，是隨著鼠標(biāo)的接觸而發(fā)生的。這里涉及一種概念，叫事件和方法。我們的日常生活就是由許多事件和方法組成的，比如口渴是事件，喝水就是解決這個(gè)事件的方法。肚子餓是事件，吃東西就是方法。想學(xué)習(xí)是事件，看《大師之路》就是方法等等。
這其實(shí)就是一種編程的思想，和人一樣，電腦也是由事件和方法組成的一套邏輯系統(tǒng)。所以下面我們也要按照這種思路，去創(chuàng)建一個(gè)事件和解決方法。這個(gè)事件就是鼠標(biāo)接觸事件。平時(shí)鼠標(biāo)不接觸，我們只顯示暗色按鈕層(背景層)。而在鼠標(biāo)接觸的事件發(fā)生后，顯示亮色按鈕層(背景副本層)。

0617點(diǎn)擊Web內(nèi)容調(diào)板下方的新建按鈕，將建立一個(gè)翻轉(zhuǎn)設(shè)定。位于上方的s060101代表正常狀態(tài)，因此我們要在圖層調(diào)板中隱藏背景副本層，如下左圖。
位于下方的Over代表鼠標(biāo)接觸事件，因此我們?cè)趫D層調(diào)板中顯示背景副本層并隱藏背景層(在這里由于圖層的遮蓋關(guān)系即使不隱藏也不影響最終效果)。如下右圖?？梢詮腤eb內(nèi)容調(diào)板中看到平時(shí)和鼠標(biāo)接觸兩種不同的效果。

-

0618好，這樣我們就已經(jīng)完成了制作，記得保存文件?，F(xiàn)在點(diǎn)擊工具欄上的按鈕即可在ImageReady中預(yù)覽將來(lái)做成網(wǎng)頁(yè)后的實(shí)際效果。注意有可能在圖像窗口可能會(huì)出現(xiàn)如下圖的標(biāo)有序號(hào)的橙色外框，這是切片的序號(hào)。如果覺(jué)得有礙視覺(jué)可點(diǎn)擊工具欄中的按鈕隱藏切片。有關(guān)切片的概念和使用我們將在以后介紹?，F(xiàn)在大家不必深究。
0619如果要做成實(shí)際的可以在網(wǎng)頁(yè)瀏覽器中打開的網(wǎng)頁(yè)，就要使用【文件>將優(yōu)化結(jié)果存儲(chǔ)為】〖CTRLALTSHIFTS〗。在出現(xiàn)的保存對(duì)話框中，保存類型要選擇為“HTML和圖像”，設(shè)置選項(xiàng)為“默認(rèn)設(shè)置”，切片選項(xiàng)為“所有切片”。文件名可自行決定，但不要使用中文。保存的位置默認(rèn)是個(gè)人文檔的位置，可自行更改(如桌面)。確定之后可能會(huì)出現(xiàn)一個(gè)如下右圖的警告框，提示文件名兼容性問(wèn)題，可不必理會(huì)，按下好按鈕即可。這樣將會(huì)在指定的目錄中會(huì)產(chǎn)生一個(gè).html文件和一個(gè)images目錄，如果要移動(dòng)目錄位置必須兩者一起移動(dòng)，否則圖片無(wú)法在網(wǎng)頁(yè)中顯示。因?yàn)榫W(wǎng)頁(yè)文件并不能包含圖片，圖片存放在images目錄中。

這樣的操作就成為輸出操作，將Photoshop中的圖象輸出成為了其他的格式。同時(shí)大家也要保存好這個(gè)圖像的原始psd格式，因?yàn)橐院笪覀冞€要“老瓶裝新酒”，在這個(gè)范例的基礎(chǔ)上增加動(dòng)畫效果。參見范例網(wǎng)頁(yè)。大家也可自行打開s0603.psd文件研究一下。注意要退出預(yù)覽模式(按鈕)才可以保存文件。ImageReady可以直接保存psd格式，動(dòng)畫設(shè)定也會(huì)隨之保存。

雖然曲線工具在這一小節(jié)只占有很少的部分，但也是很重要的，沒(méi)有曲線的加亮效果，后面的一切也都無(wú)從談起。曲線的類型運(yùn)用在網(wǎng)頁(yè)設(shè)計(jì)制作中是很常見的。
這是我們第一次真實(shí)地將自己的作品做成網(wǎng)頁(yè)格式，大家肯定有很多地方不明白。有種云里霧里的感覺(jué)，這沒(méi)關(guān)系，隨著本系列教程在以后的課程逐步增加更多的網(wǎng)頁(yè)相關(guān)知識(shí)，這片迷霧也會(huì)逐漸散去，大家將會(huì)發(fā)現(xiàn)來(lái)到一個(gè)更廣闊的天地。

事實(shí)上Photoshop和ImageReady在網(wǎng)頁(yè)制作方面來(lái)說(shuō)功能十分有限，如果要有更多更好的功能，還是要使用專門的網(wǎng)頁(yè)制作軟件才行。我們?cè)谝院笳n程將學(xué)習(xí)到一個(gè)專門與Photoshop和ImageReady配合的網(wǎng)頁(yè)制作軟件GoLive，它可以完全兼容ImageReady產(chǎn)生的網(wǎng)頁(yè)代碼。在其中我們也可以創(chuàng)建以上的翻轉(zhuǎn)效果，并且還能有更多的變化。在文字教程發(fā)布之前，大家可以先通過(guò)GoLiveCS2視頻教程來(lái)學(xué)習(xí)。