Gif動畫制作課件

Gif動畫製作

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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