資源描述：
《ImageReady頁(yè)面圖片交換教程.doc》由會(huì)員上傳分享，免費(fèi)在線(xiàn)閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。
1、個(gè)人收集整理勿做商業(yè)用途ImageReady頁(yè)面圖片交換教程文章來(lái)源：互聯(lián)網(wǎng) 雖然ImageReady是距離Photoshop最近的軟件，但人們似乎一直都把它看作是Photoshop的附屬。不是ImageReady的功能不能滿(mǎn)足用戶(hù)的要求，只能說(shuō)Photoshop的功能太強(qiáng)大了,強(qiáng)大到足以讓人忽略掉其他的同類(lèi)產(chǎn)品，其中也包括隔壁的ImageReady。要知道,ImageReady側(cè)重于網(wǎng)頁(yè)制作,雖然Photoshop7加強(qiáng)了在網(wǎng)頁(yè)圖像制作方面的功能,但在有些方面還是ImageReady較為領(lǐng)先。既然ImageReady和Photoshop被捆綁在一起銷(xiāo)售
2、，那么Adobe一定有它的理由。新手們往往將ImageReady冷落在一旁,沒(méi)有想過(guò)去探索它的獨(dú)特功能，這種放棄會(huì)使你失去了解一個(gè)優(yōu)秀軟件的機(jī)會(huì)。創(chuàng)建翻轉(zhuǎn)是ImageReady最重要的作用之一.在這篇文章中，我們?cè)敿?xì)介紹了如何用ImageReady創(chuàng)建適用于網(wǎng)頁(yè)的翻轉(zhuǎn)。既然要介紹翻轉(zhuǎn)，那么無(wú)可避免的要用到切片和優(yōu)化，在開(kāi)始之前，我希望你已經(jīng)對(duì)這兩部分知識(shí)有了足夠的了解，不然的話(huà),理解這篇文章可能會(huì)有一定的難度。 如果你已經(jīng)準(zhǔn)備好了關(guān)于ImageReady中切片和圖像優(yōu)化的知識(shí)（可以參考《ImageReady的切片和優(yōu)化》一文），那么掌握這篇文章所述的內(nèi)容
3、就是水到渠成的事了。現(xiàn)在我們來(lái)看下面這個(gè)演示(點(diǎn)擊這里觀(guān)看演示），這就是這篇文章所舉的例子。在文字Adobe旁邊有兩個(gè)按紐，頂端的按紐演示了一個(gè)簡(jiǎn)單的翻轉(zhuǎn)，當(dāng)你的鼠標(biāo)經(jīng)過(guò)按紐時(shí),按紐的顏色就會(huì)改變；鼠標(biāo)離開(kāi)按紐后,按紐又恢復(fù)剛才的顏色。第二個(gè)按紐和第一個(gè)按紐在鼠標(biāo)經(jīng)過(guò)時(shí)的表現(xiàn)相同，但與第一個(gè)按紐不同的是,在鼠標(biāo)經(jīng)過(guò)第二個(gè)按紐時(shí),不但按紐本身出現(xiàn)變化,同步改變的還有文字ADOBE。這就是我們?cè)谶@篇文章中要論述的ImageReady中的翻轉(zhuǎn)效果?！ 『昧?，現(xiàn)在我們來(lái)正式開(kāi)始.首先，你需要設(shè)計(jì)這樣一個(gè)多個(gè)圖層結(jié)構(gòu)的圖像。你的圖像應(yīng)當(dāng)包括兩個(gè)按紐,主要圖像部分,如
4、一個(gè)Logo或是你希望的別的什么東西。我建議你最好在Photoshop中進(jìn)行，這樣你可以使用更多的圖像工具和高級(jí)圖層選項(xiàng)。雖說(shuō)你可以單獨(dú)在ImageReady中創(chuàng)作，但你會(huì)發(fā)現(xiàn)很多工具的功能受到限制,沒(méi)有在Photoshop中得心應(yīng)手。在這個(gè)例子中,按紐部分用了漸變，而主要圖像部分使用了一些圖層效果。要知道，圖像本身并不是我們這篇文章的重點(diǎn),所以我們將制作過(guò)程忽略過(guò)去。確定布置好了所有的翻轉(zhuǎn)狀態(tài)—-原始狀態(tài)的按紐,鼠標(biāo)經(jīng)過(guò)時(shí)的按紐，翻轉(zhuǎn)前后的圖片。所有的元素應(yīng)當(dāng)分別處于各自的圖層中,通過(guò)將翻轉(zhuǎn)的圖像內(nèi)容置于翻轉(zhuǎn)圖層上,就可使用圖層面板來(lái)創(chuàng)建翻轉(zhuǎn)效果。檢查你
5、的圖層面板，它的結(jié)構(gòu)應(yīng)該如下面的例圖（圖01）.文檔為個(gè)人收集整理，來(lái)源于網(wǎng)絡(luò) 在完成了基礎(chǔ)圖像之后，將圖像保存為Psd格式，轉(zhuǎn)跳到ImageReady中.現(xiàn)在，我們開(kāi)始準(zhǔn)備創(chuàng)建翻轉(zhuǎn)。要做的第一件事，就是用切片工具將圖像切片。這個(gè)例子中,我們將圖像切成三部分,分別包括上下兩個(gè)按紐和主要圖像（圖02）。個(gè)人收集整理勿做商業(yè)用途現(xiàn)在，確定你的文檔在“正?！钡臓顟B(tài)時(shí)，也就是圖像第一次載入瀏覽器并且未發(fā)生任何翻轉(zhuǎn)效果時(shí)的外觀(guān).點(diǎn)擊圖層面板左邊的眼睛圖標(biāo),來(lái)顯示或隱藏相關(guān)的圖層.在這個(gè)例子中，我們隱藏了“Adobe副本”層?！ √崾荆杭词鼓硞€(gè)圖層處于正常狀態(tài)下的圖
6、層之下,最好也被隱藏起來(lái)。這樣可以防止上面的圖層出現(xiàn)不透明或是半透明的邊緣。 當(dāng)每個(gè)對(duì)象都處于正常狀態(tài)后，下面，打開(kāi)翻轉(zhuǎn)面板，在Normal狀態(tài)之下,出現(xiàn)三個(gè)分別名為“Rollover＿01”、“Rollover＿02”、“Rollover＿03”的切片,現(xiàn)在，選擇翻轉(zhuǎn)面板中名為“Rollover＿01"的切片，文檔窗口中圖像的左上角包含第一個(gè)按紐的切片也同時(shí)被選擇（翻轉(zhuǎn)面板文檔窗口的變化同步）。，點(diǎn)擊面板底部的“創(chuàng)建新的翻轉(zhuǎn)狀態(tài)”按紐。這樣你會(huì)發(fā)現(xiàn),在“Rollover＿01”切片之下，出現(xiàn)一個(gè)與之相同的Over狀態(tài)?，F(xiàn)在,將注意力放在圖層面板中,我們
7、要使圖像呈現(xiàn)出鼠標(biāo)經(jīng)過(guò)切片時(shí)的圖像狀態(tài)。我們的設(shè)計(jì)構(gòu)想是當(dāng)鼠標(biāo)經(jīng)過(guò)藍(lán)色的按紐時(shí)，它變?yōu)辄S色.所以，在圖層面板中，我們隱藏upbutt1層，這樣，下面的黃色按紐就顯示出來(lái)。在隱藏圖層之后,可以看到翻轉(zhuǎn)面板和文檔窗口的圖像一起改變?！ ⊥瑯拥?我們也為“Rollover＿03”添加Over狀態(tài)，將圖層面板中的upbutt2層隱藏起來(lái)?，F(xiàn)在，點(diǎn)擊工具面板中的“預(yù)覽文檔”或“在默認(rèn)預(yù)覽器中預(yù)覽”按紐，我們來(lái)檢查一下初步的成果。將鼠標(biāo)越過(guò)第一個(gè)藍(lán)色按紐，可以看到,第一個(gè)按紐工作正常，在鼠標(biāo)越過(guò)時(shí)變?yōu)辄S色,鼠標(biāo)離開(kāi)后又恢復(fù)為原來(lái)的藍(lán)色。第二個(gè)按紐就不太對(duì)了，雖然在鼠標(biāo)
8、經(jīng)過(guò)和離開(kāi)后的表現(xiàn)都對(duì),但第一個(gè)按紐也與之一同改變。這當(dāng)然不是我們
