Photoshop cs6中文版標(biāo)準(zhǔn)實例教程 第 9 章 Photoshop CS網(wǎng)絡(luò)應(yīng)用

第9章PhotoshopCS6網(wǎng)絡(luò)應(yīng)用

【本章主要內(nèi)容】隨著網(wǎng)絡(luò)的快速發(fā)展，制作精美的網(wǎng)頁已成為一種時尚。很多人都在自己的網(wǎng)頁中放置漂亮的圖片或添加一些簡單的動畫，使得網(wǎng)頁更加生動活潑。PhotoshopCS6是制作網(wǎng)頁很好的輔助工具，利用PhotoshopCS6及其附件ImageReadyCS可以非常方便地制作用于Web的圖片和GIF動畫。本章主要就PhotoshopCS6的網(wǎng)絡(luò)功能進(jìn)行介紹?！颈菊聦W(xué)習(xí)重點】PhotoshopCS6制作Web圖像9.1PhotoshopCS制作Web圖像

9.1.1制作切片切片是圖像的一塊矩形區(qū)域，可用于在Web頁中創(chuàng)建鏈接、翻轉(zhuǎn)和動畫。用戶可以通過為圖像制作切片有選擇地優(yōu)化圖像以便于Web查看。1.創(chuàng)建切片要為圖像創(chuàng)建切片，可首先選中工具箱中的切片工具，此時將在圖像的左上角顯示，表示當(dāng)前只有一個切片，即整個圖像被作為一個切片。切片工具屬性欄如圖所示，“樣式”下拉列表中有三個選項：“正?！?、“固定長寬比”和“固定大小”，當(dāng)選擇“正?！睍r，用戶可以在圖像中拖動默認(rèn)創(chuàng)建任意長寬比的切片；當(dāng)選擇另兩項時，工具屬性欄的“寬度”和“高度”文本框?qū)⒆優(yōu)榭捎?，在這里可設(shè)置切片的長寬比例或大小。若圖像窗口顯示參考線，工具屬性欄中的“基于參考線的切片”按鈕將變?yōu)榭捎?。選中切片工具后的圖像窗口切片工具屬性欄設(shè)置好“樣式”后，在圖像窗口中單擊并拖動鼠標(biāo)即可創(chuàng)建切片，如圖所示。使用這種方法創(chuàng)建的切片，我們稱之為用戶切片。創(chuàng)建切片此外，用戶還可根據(jù)圖層創(chuàng)建切片。為此，可首先在圖層控制面板中選中要創(chuàng)建為切片的圖層，然后執(zhí)行“圖層”∣“新建基于圖層的切片”命令。例如，在圖9-4中，要基于文字“bodybo”所在的圖層創(chuàng)建切片，可先在圖層控制面板中選中該層，然后執(zhí)行“圖層”∣“新建基于圖層的切片”命令，則創(chuàng)建的切片如圖所示。創(chuàng)建基于圖層的切片2.設(shè)置切片選項要設(shè)置切片選項，可單擊切片選擇工具屬性欄上的“切片選項”按鈕，系統(tǒng)將打開“切片選項”對話框。對話框中各選項的意義說明如下：“切片類型”下拉列表：可為“圖像”或“無圖像”兩種類型。若選擇“無圖像”類型，“切片選項”對話框，用戶可在該對話框中輸入顯示在單元格中的文本?！懊Q”文本框URL文本框“目標(biāo)”文本框“信息文本”文本框“Alt標(biāo)記”文本框“尺寸”選項組“切片背景類型”下拉列表“切片選項”對話框“無圖像”類型“切片選項”對話框9.1.2翻轉(zhuǎn)圖像翻轉(zhuǎn)是一種Web效果，當(dāng)查看者在Web頁的某一區(qū)域上執(zhí)行鼠標(biāo)動作（如滾動或單擊）時，該效果將產(chǎn)生不同的圖像顯示狀態(tài)。狀態(tài)由圖層控制面板的特定配置定義，包括圖層位置、樣式和其他格式化選項。要創(chuàng)建翻轉(zhuǎn)，至少需要兩個圖像：主圖像表示處于正常狀態(tài)的圖像，次圖像表示處于更改狀態(tài)的圖像。我們通過一個實例來說明如何為切片制作翻轉(zhuǎn)狀態(tài)。彈起經(jīng)過兩種按鈕狀態(tài)調(diào)整好圖層順序創(chuàng)建切片“存儲為Web所用格式”對話框“交換圖像”對話框“行為”面板預(yù)覽網(wǎng)頁觀察按鈕狀態(tài)設(shè)置切片選項“將優(yōu)化結(jié)果存儲為”對話框指向狀態(tài)

C:\Windows文件夾9.1.3制作動畫利用時間軸面板，可以很方便地制作動畫，執(zhí)行“窗口”∣“時間軸”命令打開動畫面板如圖所示。我們通過一個簡單的例子來說明動畫的制作方法。時間軸面板輸入“Photoshop”圖層控制面板文字層為最頂層制作圓形選區(qū)編輯圖層調(diào)整文字層位置時間軸面板匹配第九幀匹配第一幀匹配第二幀“優(yōu)化”面板“存儲優(yōu)化結(jié)果”對話框“過渡”對話框創(chuàng)建過渡9.1.4優(yōu)化圖像優(yōu)化是微調(diào)圖像顯示品質(zhì)和文件大小的過程，以便用于Web或其他聯(lián)機(jī)媒體。AdobePhotoshop使用戶可以在優(yōu)化圖像聯(lián)機(jī)顯示品質(zhì)的同時，有效地控制圖像文件的壓縮大小。優(yōu)化圖像有兩種方法：

基本優(yōu)化精確優(yōu)化“存儲為Web所用格式”對話框圖像編輯窗口快捷菜單“輸出設(shè)置”對話框“將優(yōu)化結(jié)果存儲為”對話框9.2

動手練練請用ImageReady為一幅圖像制作切片和圖像映射，并為其建立超鏈接，然后利用圖層控制面板和翻轉(zhuǎn)面板制作翻轉(zhuǎn)效果。用ImageReady制作變臉動畫，步驟如下：（1）打開如圖所示的素材圖像，將它們放置于一幅圖像的兩個圖層中。（2）使用動畫面板制作兩幀動畫，分別對