photoshopcs2實用教程網(wǎng)頁圖像設(shè)計

《photoshopcs2實用教程網(wǎng)頁圖像設(shè)計》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

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

2、從PhotoshopCS2中將動畫導(dǎo)出為動畫GIF，也可以從Image-ReadyCS2中將動畫導(dǎo)出為動畫GIF或SWF文件。單擊工具箱下方的，便會打開ImageReadyCS2，其工作界面與PhotoshopCS2相似，如圖11-1所示。圖11-1第11章網(wǎng)頁圖像設(shè)計11.2優(yōu)化圖像11.3翻轉(zhuǎn)和動畫11.4小結(jié)11.1設(shè)計Web頁11.1設(shè)計Web頁11.1.1關(guān)于切片11.1.2切片的類型11.1.3創(chuàng)建切片11.1.4查看切片11.1.5修改切片11.1.1關(guān)于切片切片是根據(jù)圖層、參考線、精確選擇區(qū)域或用切片工具創(chuàng)建的一塊矩形圖像區(qū)域，利

3、用Photoshop和ImageReady可以使用切片工具將圖像分割成許多功能區(qū)域。在存儲網(wǎng)頁圖像和HTML文件時，每個切片都會作為獨立文件存儲，并具有其自己的設(shè)置和顏色調(diào)板，并且在關(guān)聯(lián)的Web頁中會保留所創(chuàng)建的正確的鏈接、翻轉(zhuǎn)效果以及動畫效果?？梢詣?chuàng)建一個HTML表格或CSS樣式表來包含和排列切片。可以生成一個HTML文件，使之包含附帶這個表格或CSS的切割圖像。通過將圖像劃分為切片，能夠更好地控制圖像的功能和文件大小。11.1.2切片的類型切片按照其內(nèi)容類型以及創(chuàng)建方式分類。1.切片內(nèi)容類型可以指定在與HTML文件一起導(dǎo)出時，切片數(shù)據(jù)在Web

4、瀏覽器中的顯示方式?？捎眠x項因所選的應(yīng)用程序和切片類型而異。?圖像切片包含圖像數(shù)據(jù)（包括翻轉(zhuǎn)狀態(tài)），這是默認(rèn)的內(nèi)容類型。?無圖像切片允許創(chuàng)建可在其中填充文本或純色的空表單元格?？梢栽凇盁o圖像”切片中輸入HTML文本。如果設(shè)置了“文本為HTML”標(biāo)記，在瀏覽器中查看文本時，文本會被解釋為HTML。?（ImageReady）表切片充當(dāng)切片子集（導(dǎo)出時作為嵌套表寫入到HTML文本文件中）的容器。表切片包含嵌套表。是用ImageReady中的Web內(nèi)容調(diào)板創(chuàng)建的。?用戶切片使用切片工具創(chuàng)建的切片稱為用戶切片。?基于圖層的切片基于圖層內(nèi)容創(chuàng)建的切片稱為基于

5、圖層的切片。?自動切片當(dāng)創(chuàng)建新的用戶切片或基于圖層的切片時，將會用自動生成的自動切片來占據(jù)圖像的其余區(qū)域。換句話說，自動切片填充圖像中用戶切片或基于圖層的切片未定義的空間。每次添加或編輯用戶切片或基于圖層的切片時，都會重新生成自動切片。還可以將自動切片轉(zhuǎn)換為用戶切片。2.切片創(chuàng)建方式類型?子切片子切片是一種自動切片，它是在創(chuàng)建重疊切片時生成的。當(dāng)存儲被優(yōu)化的文件時，子切片會顯示文件的分割狀況。盡管子切片有編號并顯示切片標(biāo)記，但是不能在脫離切片存在的情況下獨立選擇或編輯它們。每次排列切片的堆疊順序時都會重新生成子切片。“用戶切片”、“基于圖層的切片

6、”和“自動切片”的外觀不同?！坝脩羟衅焙汀盎趫D層的切片”由實線定義，而“自動切片”由虛線定義。另外，每種類型的切片都顯示不同的圖標(biāo)?？梢赃x取顯示或隱藏自動切片，這更容易查看使用用戶切片和基于圖層的切片的作品。?你知道嗎？11.1.3創(chuàng)建切片1.使用切片工具創(chuàng)建切片在圖像中使用切片工具拖出一矩形定義的切片稱為“用戶切片”。一旦在一幅圖像中定義了一個“用戶切片”，Photoshop或ImageReady就會把周圍沒有定義的區(qū)域生成為“自動切片”。具體操作步驟如下：（1）在PhotoshopCS2中，打開軟件自帶的ImageReadyFiles文件

7、夾中名為ButtonFactory.psd的圖像文件，如圖11-2所示。（2）選擇切片工具箱中的切片工具，任何現(xiàn)有切片都將自動出現(xiàn)在文檔窗口中，01是灰色的自動切片，02、03、04、05為用戶切片，如圖11-3所示。圖11-2打開的圖像文件圖11-3現(xiàn)有切片都將自動出現(xiàn)在文檔窗口中（3）相應(yīng)的工具選項欄，如圖11-4所示。（4）使用切片工具，在自動切片01的左下角向右上角拖出矩形邊框。松開鼠標(biāo)，Photoshop會生成一個編號為02的自動切片（在切片左上角顯示灰色數(shù)字），左側(cè)和下方會自動形成編號為01、03、04、05、06的用戶切片，每創(chuàng)建一

8、個新的用戶切片，自動切片就會重新標(biāo)注數(shù)字，如圖11-5所示。圖11-5生成一個編號為02的自動切片（4）如果要改變切片的大小，可在工具箱