Photoshop CS2實(shí)用教程 第二版 高職多媒體第11章網(wǎng)頁(yè)圖像設(shè)計(jì).ppt

《Photoshop CS2實(shí)用教程 第二版 高職多媒體第11章網(wǎng)頁(yè)圖像設(shè)計(jì).ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫(kù)。

1、第11章網(wǎng)頁(yè)圖像設(shè)計(jì)PhotoshopCS2和ImageReadyCS2中的圖形工具和功能簡(jiǎn)化了大多數(shù)Web設(shè)計(jì)任務(wù)，可以使用文本、繪圖和繪畫(huà)工具向版面中添加內(nèi)容，可以設(shè)計(jì)和制作在Web上使用的靜態(tài)或動(dòng)態(tài)的圖像。還可以使用切片工具，將頁(yè)面版式或復(fù)雜圖形劃分為多個(gè)區(qū)域，并指定獨(dú)立的壓縮設(shè)置（從而獲得較小的文件大?。？梢詫D像分為切片、超鏈接和HTML文字、優(yōu)化切片并將圖像存儲(chǔ)為一個(gè)Web頁(yè)面。還可以使用“動(dòng)畫(huà)”調(diào)板結(jié)合切片組、嵌套表、百分比寬度表以及遠(yuǎn)程翻轉(zhuǎn)（將鼠標(biāo)移到某幅圖像上時(shí)，另一幅圖像發(fā)生

2、變化）來(lái)創(chuàng)建簡(jiǎn)單的Web動(dòng)畫(huà)，逐幀確定動(dòng)畫(huà)的外觀。從PhotoshopCS2中將動(dòng)畫(huà)導(dǎo)出為動(dòng)畫(huà)GIF，也可以從Image-ReadyCS2中將動(dòng)畫(huà)導(dǎo)出為動(dòng)畫(huà)GIF或SWF文件。單擊工具箱下方的，便會(huì)打開(kāi)ImageReadyCS2，其工作界面與PhotoshopCS2相似，如圖11-1所示。圖11-1第11章網(wǎng)頁(yè)圖像設(shè)計(jì)11.2優(yōu)化圖像11.3翻轉(zhuǎn)和動(dòng)畫(huà)11.4小結(jié)11.1設(shè)計(jì)Web頁(yè)11.1設(shè)計(jì)Web頁(yè)11.1.1關(guān)于切片11.1.2切片的類型11.1.3創(chuàng)建切片11.1.4查看切片11.1.5修

3、改切片11.1.1關(guān)于切片切片是根據(jù)圖層、參考線、精確選擇區(qū)域或用切片工具創(chuàng)建的一塊矩形圖像區(qū)域，利用Photoshop和ImageReady可以使用切片工具將圖像分割成許多功能區(qū)域。在存儲(chǔ)網(wǎng)頁(yè)圖像和HTML文件時(shí)，每個(gè)切片都會(huì)作為獨(dú)立文件存儲(chǔ)，并具有其自己的設(shè)置和顏色調(diào)板，并且在關(guān)聯(lián)的Web頁(yè)中會(huì)保留所創(chuàng)建的正確的鏈接、翻轉(zhuǎn)效果以及動(dòng)畫(huà)效果?？梢詣?chuàng)建一個(gè)HTML表格或CSS樣式表來(lái)包含和排列切片?？梢陨梢粋€(gè)HTML文件，使之包含附帶這個(gè)表格或CSS的切割圖像。通過(guò)將圖像劃分為切片，能夠更好地控

4、制圖像的功能和文件大小。11.1.2切片的類型切片按照其內(nèi)容類型以及創(chuàng)建方式分類。1.切片內(nèi)容類型可以指定在與HTML文件一起導(dǎo)出時(shí)，切片數(shù)據(jù)在Web瀏覽器中的顯示方式。可用選項(xiàng)因所選的應(yīng)用程序和切片類型而異。?圖像切片包含圖像數(shù)據(jù)（包括翻轉(zhuǎn)狀態(tài)），這是默認(rèn)的內(nèi)容類型。?無(wú)圖像切片允許創(chuàng)建可在其中填充文本或純色的空表單元格。可以在“無(wú)圖像”切片中輸入HTML文本。如果設(shè)置了“文本為HTML”標(biāo)記，在瀏覽器中查看文本時(shí)，文本會(huì)被解釋為HTML。?（ImageReady）表切片充當(dāng)切片子集（導(dǎo)出時(shí)作為

5、嵌套表寫(xiě)入到HTML文本文件中）的容器。表切片包含嵌套表。是用ImageReady中的Web內(nèi)容調(diào)板創(chuàng)建的。?用戶切片使用切片工具創(chuàng)建的切片稱為用戶切片。?基于圖層的切片基于圖層內(nèi)容創(chuàng)建的切片稱為基于圖層的切片。?自動(dòng)切片當(dāng)創(chuàng)建新的用戶切片或基于圖層的切片時(shí)，將會(huì)用自動(dòng)生成的自動(dòng)切片來(lái)占據(jù)圖像的其余區(qū)域。換句話說(shuō)，自動(dòng)切片填充圖像中用戶切片或基于圖層的切片未定義的空間。每次添加或編輯用戶切片或基于圖層的切片時(shí)，都會(huì)重新生成自動(dòng)切片。還可以將自動(dòng)切片轉(zhuǎn)換為用戶切片。2.切片創(chuàng)建方式類型?子切片子切片

6、是一種自動(dòng)切片，它是在創(chuàng)建重疊切片時(shí)生成的。當(dāng)存儲(chǔ)被優(yōu)化的文件時(shí)，子切片會(huì)顯示文件的分割狀況。盡管子切片有編號(hào)并顯示切片標(biāo)記，但是不能在脫離切片存在的情況下獨(dú)立選擇或編輯它們。每次排列切片的堆疊順序時(shí)都會(huì)重新生成子切片?！坝脩羟衅?、“基于圖層的切片”和“自動(dòng)切片”的外觀不同?！坝脩羟衅焙汀盎趫D層的切片”由實(shí)線定義，而“自動(dòng)切片”由虛線定義。另外，每種類型的切片都顯示不同的圖標(biāo)。可以選取顯示或隱藏自動(dòng)切片，這更容易查看使用用戶切片和基于圖層的切片的作品。?你知道嗎？11.1.3創(chuàng)建切片1.使用

7、切片工具創(chuàng)建切片在圖像中使用切片工具拖出一矩形定義的切片稱為“用戶切片”。一旦在一幅圖像中定義了一個(gè)“用戶切片”，Photoshop或ImageReady就會(huì)把周圍沒(méi)有定義的區(qū)域生成為“自動(dòng)切片”。具體操作步驟如下：（1）在PhotoshopCS2中，打開(kāi)軟件自帶的ImageReadyFiles文件夾中名為ButtonFactory.psd的圖像文件，如圖11-2所示。（2）選擇切片工具箱中的切片工具，任何現(xiàn)有切片都將自動(dòng)出現(xiàn)在文檔窗口中，01是灰色的自動(dòng)切片，02、03、04、05為用戶切片，如

8、圖11-3所示。圖11-2打開(kāi)的圖像文件圖11-3現(xiàn)有切片都將自動(dòng)出現(xiàn)在文檔窗口中（3）相應(yīng)的工具選項(xiàng)欄，如圖11-4所示。（4）使用切片工具，在自動(dòng)切片01的左下角向右上角拖出矩形邊框。松開(kāi)鼠標(biāo)，Photoshop會(huì)生成一個(gè)編號(hào)為02的自動(dòng)切片（在切片左上角顯示灰色數(shù)字），左側(cè)和下方會(huì)自動(dòng)形成編號(hào)為01、03、04、05、06的用戶切片，每創(chuàng)建一個(gè)新的用戶切片，自動(dòng)切片就會(huì)重新標(biāo)注數(shù)字，如圖11-5所示。圖11-5生成一個(gè)編號(hào)為02的自動(dòng)切片（4）如果要改變切片的大小，可在工具箱