使用的軟件為:  Photoshop CS3

輔助使用軟件:  Ulead GIF Animator5.5

適合的讀者為:  初級(jí)入門(mén)

操作的難易度:  簡(jiǎn)單稍有煩瑣

  導(dǎo)讀：通過(guò)本教程的學(xué)習(xí),，

使初學(xué)PS的朋友快速的掌握使用PSCS3的動(dòng)畫(huà)制作基本功能，

及在CS3中如何使用時(shí)間軸功能編輯GIF動(dòng)畫(huà)的基本技巧,

以及Photoshop的智能圖層和視頻圖層的使用等等：

因?yàn)镃S3中已經(jīng)取消了IR,，而PS是無(wú)法完整同時(shí)打開(kāi)一幅動(dòng)態(tài)GIF圖片的所有幀圖層的,，

如果你的電腦里安裝了QuickTime 7.1 版或更高版本，那么可以通過(guò)PS的

“文件”--->"導(dǎo)入"-->"視頻幀到圖層"命令來(lái)導(dǎo)入GIF圖畫(huà)圖片的所有幀信息的,

不過(guò),相信一般的朋友的電腦里基本上是沒(méi)有安裝QuickTime 7.1的啦,

這樣一來(lái),我們就唯有借助別的軟件來(lái)完成這個(gè)任務(wù)了,

在這里我推薦大家使用Ulead GIF Animator5.5來(lái)進(jìn)行GIF圖片的轉(zhuǎn)換為PSD的工作.

( 當(dāng)然用Ulead GIF Animator來(lái)處理GIF動(dòng)畫(huà)也是個(gè)很好的選擇哦 )

如果你沒(méi)有該軟件, 可以瀏覽這里了解該軟件的相關(guān)信息!

素材如下：



效果圖：





教程開(kāi)始了，如果大家在學(xué)習(xí)本教程中碰到問(wèn)題或是有疑問(wèn),，可以到這里提出,，我們一起來(lái)解決！

1. 獲取PSD文檔

啟動(dòng)Ulead GIF Animator5.5,打開(kāi)我們要編輯的圖片 RJ.gif,因?yàn)槲覀儾恍枰肬L來(lái)編輯該GIF

所以,我們直接選擇"另存為"-->"PSD文件"即可,我把該文件命名為"浣熊RJ.psd".

接著直接雙擊剛剛保存的"浣熊RJ.psd",系統(tǒng)自動(dòng)以最新版本的PS打開(kāi),如果你使用的不是PS-CS3,

那基本上本教程可以不看了,呵呵~ 因?yàn)楸窘坛讨袑⒁褂肅S3動(dòng)畫(huà)面板里的時(shí)間軸功能來(lái)處理的,

而CS3版本以下的PS中是沒(méi)有該功能的!~



2. 改變文檔尺寸大小

   通過(guò)"圖像"-->"圖像大小"( Alt+Ctrl+I或用鼠標(biāo)右鍵點(diǎn)擊當(dāng)前文檔的頂部邊框選擇"圖像大小" )

檢查發(fā)現(xiàn)此時(shí)的文檔尺寸大小為66×80 px,我需要把該文件的尺寸改為250×60 px,。所以,，我們需要

把圖像大小修改為高60PX，這里大家要記住需要勾選下面的“縮放樣式,、約束比例,、重定圖像像素”。

否則該文檔在執(zhí)行了圖像大小的操作后,會(huì)產(chǎn)生變形的!

   在調(diào)整了圖像大小后,此時(shí)的圖像大小已經(jīng)是50×60 PX了,高度是符合要求力量,不過(guò)寬度還不符合我們的要求,

所以我們要繼續(xù)更改畫(huà)布的大小.方法和改變"圖像大小"一樣,我們把寬度改為250,定位選擇向右即可,。

現(xiàn)在該文檔尺寸終于符合我們的要求了,。

3. 將圖層轉(zhuǎn)化為動(dòng)畫(huà)幀

①在圖層面板上把所有的圖層全部設(shè)置為可見(jiàn)

（快捷的方法：按住鼠標(biāo)左鍵不放，在圖層面板上的小眼睛處由上向下拖動(dòng)鼠標(biāo)即可）

接著在菜單欄的“窗口”菜單中選擇“動(dòng)畫(huà)”以打開(kāi)“動(dòng)畫(huà)”操作面板,。

（PS默認(rèn)的動(dòng)畫(huà)操作方式為“時(shí)間軸”方式的,，不要更改為“幀動(dòng)畫(huà)”方式哦）

②③現(xiàn)在用鼠標(biāo)左鍵點(diǎn)擊動(dòng)畫(huà)面板右上角的“黑色小三角按鈕”，打開(kāi)動(dòng)畫(huà)面板的卷簾,。

在該卷簾面板中選擇“文檔設(shè)置”,，把“持續(xù)時(shí)間”修改為“00:03:00”(也就是3秒);把“幀速率”修改為“10”fps（10幀）

④接著同樣是在該卷簾中選擇“從圖層建立幀”，好,，現(xiàn)在點(diǎn)擊動(dòng)畫(huà)面板上的播放按鈕,。

看到了吧，我們的小浣熊RJ開(kāi)心的走起來(lái)了 ：）

不過(guò)現(xiàn)在的動(dòng)畫(huà)卻是2秒一個(gè)循環(huán),，不符合我們的要求喲,，沒(méi)關(guān)系等一陣子再解決這個(gè)問(wèn)題就是了。



4. 將圖層轉(zhuǎn)換為智能對(duì)象圖層

  在圖層面板上選擇所有圖層,，

〖快捷方法：選擇最上層（或最底層）圖層,，按住Shift鍵，用鼠標(biāo)左鍵相應(yīng)地點(diǎn)擊最底層（或最上層）的圖層〗

然后在圖層面板上用鼠標(biāo)右鍵點(diǎn)擊,，在彈出的對(duì)話框里選擇“轉(zhuǎn)換為智能對(duì)象”得到圖層

接著Ctrl+J快速“通過(guò)拷貝新的智能對(duì)象”得到復(fù)制圖層,，現(xiàn)在圖層面板上共有兩個(gè)圖層了。

為了便于操作我們把這兩個(gè)圖層分別重命名為“原圖1,，原圖2”,，接著點(diǎn)擊”原圖1“以保持該圖層為單前可操作圖層，

按住Ctrl鍵,，點(diǎn)擊圖層面板下部的“創(chuàng)建新圖層”按鈕,，以新建一個(gè)空白圖層并填充為白色，然后重命名為“背景”

〖注：這里按住Ctrl鍵來(lái)創(chuàng)建新圖層,，可以快速的讓新建的圖層位于當(dāng)前可操作圖層的下一層〗

5. 讓整個(gè)畫(huà)面的動(dòng)畫(huà)流暢

關(guān)鍵的時(shí)候到了,，大家可別分心了：

①在”原圖2“的時(shí)間軸上,，先把“當(dāng)前時(shí)間指示器”移動(dòng)到2秒處（0:00:02:00）；

②-—③接著在時(shí)間軸上的起始位置,，按住鼠標(biāo)左鍵不放一直向右拖動(dòng),，直到2秒處（0:00:02:00）。

現(xiàn)在點(diǎn)擊播放按鈕,，看看效果是不是不一樣了呢,？呵呵~

〖注： 小圖④的操作方法是錯(cuò)誤的！具體的效果大家可以自己嘗試一下,！〗



6. 創(chuàng)建自己的動(dòng)畫(huà)

⑴ 關(guān)鍵幀的基本操作：

①把“當(dāng)前時(shí)間指示器”拖會(huì)到時(shí)間軸的起始位置,，保持當(dāng)前可操作的圖層為“原圖2”，點(diǎn)擊面板左邊的黑色小三角,，

②展開(kāi)隱藏的動(dòng)畫(huà)可控制動(dòng)作里的“秒鐘按鈕”，然后依次點(diǎn)擊各個(gè)“秒鐘按鈕”,，這樣我們就建立了相應(yīng)的“關(guān)鍵幀”了,。

〖注：圖中的紅色圓圈處；③以后如果要?jiǎng)h除關(guān)鍵幀,，只要點(diǎn)擊該關(guān)鍵幀標(biāo)志即可〗

⑵ 為了操作的方便而且我們不用修改原圖動(dòng)畫(huà)的效果,所以,，我們又可以把“原圖1”和“原圖2”選中后“轉(zhuǎn)換為智能對(duì)象”

記住：我們剛才新建的背景圖層不要一起選中哦~

⑶選擇文字工具,，選擇好自己喜歡的字體和字號(hào),，在文檔中輸入文字："PHOTOSHOP資源哪里找？"

⑷好了,，現(xiàn)在開(kāi)始制作動(dòng)畫(huà)了：

保持當(dāng)前操作圖層為文字層“Photoshop資源哪里找,？”，并且“當(dāng)前時(shí)間指示器”位于時(shí)間軸的起始位置（0:00:00:00）

①在動(dòng)畫(huà)面板上點(diǎn)擊左邊的黑色小三角以打開(kāi)動(dòng)畫(huà)控制按鈕,，接著點(diǎn)擊“不透明度”選項(xiàng)前的“秒鐘”按鈕,，建立一個(gè)關(guān)鍵幀。

緊接著把圖層面板上“Photoshop資源哪里找,？”層的“不透明度”改為“0%”,，這樣我們?cè)趧?dòng)畫(huà)打開(kāi)的第一幀里就看不到文字了。

②跟住把“時(shí)間顯示器”移動(dòng)到第二幀的位置,，并建立第二個(gè)不透明度的關(guān)鍵幀,，且把圖層的不透明度改回“100%”，

現(xiàn)在“Photoshop資源哪里找,？”又出現(xiàn)啦 ：）

〖注：再次建立關(guān)鍵幀的時(shí)候不是點(diǎn)擊那個(gè)“秒鐘”哦,，應(yīng)該是點(diǎn)擊“秒鐘”前面的兩個(gè)反方向三角形中間位置喲！〗

這里有個(gè)小技巧：如果你想要文字的顯示有個(gè)漸變的過(guò)程,，那么可以把第二個(gè)關(guān)鍵幀設(shè)置到第五幀甚至第十幀或是更遠(yuǎn),，

幀數(shù)間隔的越多則漸變的效果越好,；且你可以設(shè)置第三個(gè)關(guān)鍵幀，并把第三個(gè)關(guān)鍵幀的不透明度改為0%,，就可以產(chǎn)生漸顯示至漸隱的效果了,。具體的大家可以自己試驗(yàn)一下看看效果如何了。

7. 讓文字動(dòng)起來(lái)

①保持“時(shí)間顯示器”處于第二幀位置,，參照設(shè)置漸變效果的方法,，點(diǎn)擊位置旁的“秒鐘”創(chuàng)建第一個(gè)“位置關(guān)鍵幀”，

②接著把“時(shí)間顯示器”移動(dòng)到第三幀位置,；再次設(shè)置關(guān)鍵幀,；

③并選擇“移動(dòng)工具”，把“Photoshop資源哪里找,？”圖層隨意移動(dòng)位置,；

④依照上述方法繼續(xù)添加關(guān)鍵幀并相應(yīng)的隨意移動(dòng)文字層的位置，具體要建立多少個(gè)關(guān)鍵幀就看你自己喜歡了,，

    這里我一共設(shè)置了8個(gè)關(guān)鍵幀,，第八幀位于時(shí)間軸的（0:00:01:05）位置；

⑤在設(shè)置了第八位置關(guān)鍵幀后,，我們同時(shí)設(shè)置一個(gè)“不透明度”的關(guān)鍵幀,，

　這時(shí)候，該文字圖層的不透明度應(yīng)該還是100%,；

⑥接著移動(dòng)“時(shí)間顯示器”至（0:00:01:06）位置,，建立一個(gè)新的“不透明度”關(guān)鍵幀，并把圖層不透明度設(shè)置為）0%,；

好了,，現(xiàn)在播放一下吧，怎么樣,？文字在動(dòng)了吧,？而且是到了（0:00:01:06）位置后就不顯示了喲 ：）



8. 建立新的視頻圖層

使用視頻圖層的好處就在于，我們可以隨意的在每一個(gè)可視視頻幀里隨意進(jìn)行添加繪畫(huà)類(lèi)的操作,，而不必?zé)┈嵉娜ヌ砑雨P(guān)鍵幀,，每移動(dòng)一個(gè)幀就自然是一個(gè)關(guān)鍵幀了。

①建立視頻圖層,，選擇“圖層” --> "視頻圖層" --> "新建空白視頻圖層",得到視頻圖層"圖層1";

②選擇畫(huà)筆工具,并選取自己喜歡的畫(huà)筆,我選擇了五角星畫(huà)筆,并把畫(huà)筆的屬性調(diào)整一下;

  如果你沒(méi)有該畫(huà)筆,可以自己做一個(gè)或是使用其他畫(huà)筆,再不就到這里來(lái)找一個(gè)自己喜歡的畫(huà)筆免費(fèi)下載吧 ^_^

  選擇了畫(huà)筆工具后,在菜單欄的左邊"工作區(qū)"前有畫(huà)筆的屬性控制調(diào)板,點(diǎn)擊打開(kāi)后,如圖示設(shè)置,具體數(shù)值隨意就好,。

③接著選擇“鋼筆工具”，把鋼筆工具的屬性設(shè)置為“路徑”,，并在文檔上繪制出路徑,；

④保持當(dāng)前可操作圖層為視頻圖層“圖層1”，并且保持“時(shí)間顯示器”處于時(shí)間軸的（0:00:01:06）位置,，

  在剛剛繪制的路徑上點(diǎn)擊鼠標(biāo)右鍵,，在彈出的菜單里選擇“描邊路徑”,，

  在彈出的對(duì)話框中選擇“畫(huà)筆”并勾選“模擬壓力”確定即可；

⑤接著移動(dòng)“時(shí)間顯示器”至下一幀,，并重復(fù)剛才描邊路徑的操作,，直到自己認(rèn)為合適的時(shí)間位置為止；

  我共設(shè)置了1秒時(shí)間,，也就是說(shuō)在視頻圖層里,，我操作的范圍是（0:00:01:06）直到（0:00:02:08）位置

好了，視頻圖層里的操作到此就結(jié)束了,，快播放一下看看吧

如果大家想效果更好,，一樣可以設(shè)置各個(gè)幀的不透明度的啦。

9. 創(chuàng)建新的文字動(dòng)畫(huà)

①把“時(shí)間顯示器”拖回到（0:00:01:05）位置,，把路徑刪除或是隱藏起來(lái)（快捷的方法：Delete或Ctrl+Enter接著Ctrl+D）

然后選擇“文字工具”選擇好合適的字體,，在文檔上輸入“86ps.com頂呱呱”，PS會(huì)自動(dòng)保存為新的圖層,；

這里我給該文字層適當(dāng)設(shè)置些投影的樣式以增加效果,大家可以隨意設(shè)置自己喜歡的樣式的,；

②接著建立一個(gè)“不透明度”的關(guān)鍵幀，并把圖層的不透明度的改為3%,；（當(dāng)然，設(shè)置為0%亦是無(wú)妨啦）

③執(zhí)行同樣的操作,，在（0:00:01:08）位置建立“不透明度”關(guān)鍵幀,，并把圖層的不透明度改回100%；

  還是在同一個(gè)時(shí)間軸位置,，我們建立一個(gè)“文字變形”的關(guān)鍵幀,，對(duì)這個(gè)關(guān)鍵幀什么都不用操作；  ④接著在（0:00:02:00）位置建立一個(gè)“文字變形”的關(guān)鍵幀,，保持當(dāng)前使用的工具為“文字工具”,，在菜單欄上文字屬性后面選擇“創(chuàng)建文字變形”按鈕，在彈出的對(duì)話框中選擇樣式為“旗幟”并把“水平扭曲”數(shù)值改為“50%”,；

⑤在（0:00:02:03）位置再建立一個(gè)“文字變形”的關(guān)鍵幀,，這次把“旗幟”樣式中的“水平扭曲”數(shù)值改為“-50%”；



10. 保存動(dòng)畫(huà)

①依照上面的方法,，我們繼續(xù)設(shè)置“86ps.com頂呱呱”文字的動(dòng)畫(huà)效果直到（0:00:02:07）位置關(guān)鍵幀時(shí),，

就把文字變形樣式取消（也就是“文字變形”的樣式為“無(wú)”），并在最后一幀也設(shè)置一個(gè)關(guān)鍵幀,，樣式依然為“無(wú)”,。

②現(xiàn)在可以保存動(dòng)畫(huà)了，選擇“文件”-->“存儲(chǔ)為Web和設(shè)備所用格式” 即可,。

〖注：在存儲(chǔ)的對(duì)話框中,，各種相應(yīng)的存儲(chǔ)設(shè)置的具體的數(shù)值大家自己把握就好,，

  重要的是：一定要選擇循環(huán)選項(xiàng)為“永遠(yuǎn)”,！〗