Gif動(dòng)畫制作課件

Gif動(dòng)畫製作

創(chuàng)建切片在Photoshop中，使用圖層和切片可以設(shè)計(jì)網(wǎng)頁和網(wǎng)頁介面元素，創(chuàng)建用於導(dǎo)入到Dreamweaver或Flash中的翻轉(zhuǎn)文本或按鈕圖形。切片的類型

切片使用HTML表或CSS圖層將圖像化分為若干較小的圖像，這些圖像可以在Web頁上重新組合。通過劃分圖像，可以指定不同的URL鏈接以創(chuàng)建頁面導(dǎo)航，或使用其自身的優(yōu)化設(shè)置對圖像的每個(gè)部分進(jìn)行優(yōu)化。如果從創(chuàng)建方式上對切片進(jìn)行分類，可以將切片分為用戶切片、基於圖層的切片和自動(dòng)切片3種。

用切片工具創(chuàng)建切片選擇“切片”工具，在工具選項(xiàng)欄中可以設(shè)置切片的創(chuàng)建樣式，如圖所示。如選擇“正常”選項(xiàng)，可在要?jiǎng)?chuàng)建切片的區(qū)域上拖動(dòng)滑鼠設(shè)置切片的大小，放開滑鼠可創(chuàng)建切片。如果按住Shift鍵拖動(dòng)可將切片限制為正方形，按住Alt鍵拖動(dòng)則可以從中心繪製；選擇“固定長寬比”選項(xiàng)，可輸入整數(shù)或小數(shù)作為長寬比。例如，如果要?jiǎng)?chuàng)建一個(gè)寬度是高度兩倍的切片，可輸入寬度2和高度1；選擇“固定大小”選項(xiàng)，可以輸入整數(shù)像素值來指定切片的高度和寬度。

“切片”工具選項(xiàng)欄基於參考線創(chuàng)建切片基於參考線創(chuàng)建切片前先要向圖像中添加參考線，如左圖所示。然後選擇切片工具，單擊工具選項(xiàng)欄中的“基於參考線的切片”按鈕，可基於參考線創(chuàng)建切片，如右圖所示。

基於參考線創(chuàng)建切片基於圖層創(chuàng)建切片在“圖層”調(diào)板中選擇圖層，選擇“圖層”|“新建基於圖層的切片”命令，可基於圖層創(chuàng)建切片，如左圖所示。基於圖層的切片將包括圖層中的所有像素?cái)?shù)據(jù)，移動(dòng)圖層或編輯圖層內(nèi)容，切片區(qū)域?qū)⒆詣?dòng)調(diào)整，如右圖所示。

基於圖層創(chuàng)建切片編輯切片創(chuàng)建切片後，可以移動(dòng)切片或組合多個(gè)切片，也可以複製切片或者刪除切片。通過為切片設(shè)置輸出選項(xiàng)，可為切片制定輸出內(nèi)容，為圖像指定URL鏈接資訊。選擇切片選擇工具，在圖像中單擊相應(yīng)的切片，可以選擇該切片。按住Shift鍵單擊其他切片，可以選擇多個(gè)切片。組合切片選擇兩個(gè)或多個(gè)切片後，單擊滑鼠右鍵，選擇快捷菜單中的“組合切片”命令，可將選擇的切片組合為一個(gè)單獨(dú)的切片，如圖所示。Photoshop會(huì)利用通過連接組合切片的外邊緣創(chuàng)建的矩形來確定所生成的切片的尺寸和位置。如果組合切片不相鄰，或者比例或?qū)R方式不同，則新組合的切片可能會(huì)與其他切片重疊。需要注意的是，基於圖層創(chuàng)建的切片不能組合。

移動(dòng)與複製切片使用切片選擇工具選擇一個(gè)或多個(gè)用戶切片後，拖動(dòng)滑鼠可以移動(dòng)切片。按住Shift鍵拖動(dòng)可將移動(dòng)限制在垂直、水準(zhǔn)或45度對角線方向上。按住Alt鍵拖動(dòng)則可以複製切片。調(diào)整用戶切片大小

使用切片選擇工具選擇一個(gè)或多個(gè)用戶切片，拖動(dòng)切片的邊手柄或角手柄，可以調(diào)整切片的大小。如果選擇相鄰切片並調(diào)整其大小，則這些切片共用的公共邊緣將一起調(diào)整大小。選擇切片後，單擊工具選項(xiàng)欄中的“選項(xiàng)”按鈕，或者雙擊切片，可以打開“切片選項(xiàng)”對話框。在“尺寸”選項(xiàng)組中更改一個(gè)或多個(gè)選項(xiàng)也可以調(diào)整切片的大小或者移動(dòng)切片。鎖定與刪除切片創(chuàng)建切片後，選擇“視圖”|“鎖定切片”命令，可以鎖定所有切片。鎖定切片可以防止不小心調(diào)整切片大小、移動(dòng)切片或?qū)η衅M(jìn)行了其他更改。選擇一個(gè)或多個(gè)切片，按下Delete鍵，可刪除切片。如果要?jiǎng)h除所有用戶切片和基於圖層的切片，可以選擇“視圖”|“清除切片”命令進(jìn)行刪除。

優(yōu)化圖像使用“存儲(chǔ)為Web和設(shè)備所用格式”命令可以導(dǎo)出和優(yōu)化切片圖像，Photoshop會(huì)將每個(gè)切片存儲(chǔ)為單獨(dú)的檔並生成顯示切片圖像所需的HTML或CSS代碼。優(yōu)化圖像可以加快圖像在網(wǎng)路上的流覽和傳輸速度。將圖像存儲(chǔ)為Web和設(shè)備所用格式選擇“檔”|“存儲(chǔ)為Web和設(shè)備所用格式”命令，可以打開“存儲(chǔ)為Web和設(shè)備所用格式”對話框，如圖所示。使用對話框中的優(yōu)化功能，可預(yù)覽具有不同檔格式和不同檔屬性的優(yōu)化圖像。當(dāng)預(yù)覽圖像以選擇最適合自己需要的設(shè)置組合時(shí)，可以同時(shí)查看圖像的多個(gè)版本並修改優(yōu)化設(shè)置。也可以指定透明度和雜邊，選擇用於控制仿色的選項(xiàng)，以及將圖像大小調(diào)整到指定的像素尺寸或原始大小的指定百分比。

“存儲(chǔ)為Web和設(shè)備所用格式”對話框JPEG優(yōu)化選項(xiàng)

JPEG是用於壓縮連續(xù)色調(diào)圖像的標(biāo)準(zhǔn)格式。將圖像優(yōu)化為JPEG格式時(shí)將採用有損壓縮的方式優(yōu)化圖像。在“存儲(chǔ)為Web和設(shè)備所用格式”的“檔格式”下拉列表中選擇“JPEG”，可以顯示JPEG優(yōu)化選項(xiàng)，如圖所示。

JPEG優(yōu)化選項(xiàng)GIF和PNG-8優(yōu)化選項(xiàng)

GIF是用於壓縮具有單調(diào)顏色和清晰細(xì)節(jié)的圖像的標(biāo)準(zhǔn)格式。與GIF格式一樣，PNG-8格式也可以有效地壓縮純色區(qū)域，同時(shí)保留清晰的細(xì)節(jié)。

GIF和PNG-8檔都支持8位顏色，因此它們可以顯示多達(dá)256種顏色。確定使用哪些顏色的過程稱為“建立索引”，因此GIF和PNG-8格式圖像有時(shí)也稱為索引顏色圖像。為了將圖像轉(zhuǎn)換為索引顏色，Photoshop會(huì)構(gòu)建一個(gè)顏色查找表，該表存儲(chǔ)圖像中的顏色並為這些顏色建立索引。如果原始圖像中的某種顏色為出現(xiàn)在顏色查找表中，應(yīng)用程式將在該表中選取最接近的顏色，或使用可用顏色的組合模擬該顏色。在“存儲(chǔ)為Web和設(shè)備所用格式”的“檔格式”下拉列表中選擇“GIF”，可以顯示GIF優(yōu)化選項(xiàng)，。選擇“PNG-8”，可顯示PNG-8優(yōu)化選項(xiàng)。

PNG-24優(yōu)化選項(xiàng)

PNG-24適合於壓縮連續(xù)色調(diào)圖像，使用PNG-24的優(yōu)點(diǎn)在於可在圖像中保留多達(dá)256個(gè)透明度級別，但它所生成的檔比JPEG格式生成的檔要大的多。在“存儲(chǔ)為Web和設(shè)備所用格式”的“檔格式”下拉列表中選擇“PNG-24”，可以顯示PNG-24優(yōu)化選項(xiàng)，如圖所示。

PNG-24優(yōu)化選項(xiàng)關(guān)於幀動(dòng)畫動(dòng)畫是在一段時(shí)間內(nèi)顯示的一系列圖像或幀，每一幀較前一幀都有輕微的變化，當(dāng)連續(xù)、快速地顯示這些幀時(shí)就會(huì)產(chǎn)生運(yùn)動(dòng)或其他的視覺變化。在Photoshop中，可以使用“動(dòng)畫”調(diào)板創(chuàng)建動(dòng)畫幀，每一幀表示一個(gè)圖層配置。選擇“窗口”|“動(dòng)畫”命令，可以打開“動(dòng)畫”調(diào)板，如圖所示。

“動(dòng)畫”調(diào)板添加過渡幀如果要在兩個(gè)幀之間添加過渡幀，可以單擊“動(dòng)畫”調(diào)板中的過渡動(dòng)畫幀按鈕，打開“過渡”對話框，如圖所示。

“過渡”對話框關(guān)於幀動(dòng)畫要在Photoshop中創(chuàng)建基於幀的動(dòng)畫，一般採用以下工作流程。打開一個(gè)新文檔。然後添加圖層或轉(zhuǎn)換背景圖層。由於不能為背景圖層創(chuàng)建動(dòng)畫，可添加新圖層或?qū)⒈尘皥D層轉(zhuǎn)換為普通圖層。向動(dòng)畫中添加內(nèi)容。如果動(dòng)畫中包含一些已單獨(dú)創(chuàng)建動(dòng)畫的對象，或者要更改某個(gè)對象的顏色或完全更改某個(gè)幀中的內(nèi)容，可在單獨(dú)圖層上創(chuàng)建對象。

將幀添加到動(dòng)畫調(diào)板中。選擇一個(gè)幀，然後編輯選定幀的圖層。可以打開和關(guān)閉不同圖層的可見性；更改對象或圖層的位置以移動(dòng)圖層內(nèi)容；更改圖層不透明度以漸顯或漸隱內(nèi)容；更改圖層的混合模式；或者向圖層添加樣式。根據(jù)需要，添加更多幀並編輯圖層。可以用“過渡”命令，可以使用調(diào)板中兩個(gè)縣有幀之間的中間更改生成新的幀。這是一種在螢?zāi)簧弦苿?dòng)對象或漸顯/漸隱對象的快速方法。

設(shè)置幀延遲和迴圈選項(xiàng)?？梢詾槊總€(gè)幀指定延遲時(shí)間，並指定迴圈以讓動(dòng)畫運(yùn)行一次、運(yùn)行一定的次數(shù)或連續(xù)運(yùn)行。在創(chuàng)建動(dòng)畫時(shí)可使用“動(dòng)畫”調(diào)板中的控件播放動(dòng)畫。然