[IR動(dòng)圖教程] 蠕動(dòng)線框動(dòng)畫的制作

蠕動(dòng)線框動(dòng)畫的制作建造網(wǎng)站時(shí)，設(shè)計(jì)精巧、富于動(dòng)態(tài)的Logo總能為網(wǎng)頁增色不少。也許有的朋友見過Logo周圍有一圈細(xì)細(xì)的虛線圍繞著Logo緩緩蠕動(dòng)的效果。

　　其實(shí)這個(gè)效果是用Photoshop和ImageReady共同實(shí)現(xiàn)的一個(gè)視覺欺騙。下面我們就來探討制作這種蠕動(dòng)虛線框的方法。
[img][/img]
　　運(yùn)行你的Photoshop，打開你制作好的Logo文件（圖1）。這里你可用一張圖片來代替。

圖 1

　　一、擴(kuò)大畫布的尺寸
　　1.打開Logo文件后，該圖像只有一個(gè)背景圖層，由于我們需要它的輪廓，所以不能直接在該層上擴(kuò)展畫布。在Layers面板上，雙擊Background圖層右側(cè)的空白區(qū)域，在彈出的對(duì)話框中單擊OK按鈕，即可將背景圖層轉(zhuǎn)換為普通圖層Layer 0。雙擊圖層的名字，將它命名為“Logo”。按住Ctrl鍵單擊面板底部的新建圖層按鈕，在“Logo”圖層下面新建圖層Layer 1。
　　2.然后選擇菜單命令“Image（圖像）→Canvas Size（畫布大�。�，在對(duì)話框中將長度單位改為Pixels，勾選Relative復(fù)選框，Width和Height均增加40像素，Anchor保持默認(rèn)的中間位置（圖2）。這步操作的結(jié)果是使畫布在上下左右四個(gè)方向都增大了20像素，為我們下面的步驟開辟了空間。

圖 2

二、制作用來填充背景的圖案

　　1.使用菜單命令“File（文件）→New（新建）”新建一個(gè)8×8像素，背景色為白色的文件。為了能夠看清，我們可以按下“Ctrl ‘ ’”鍵數(shù)次，將文件視圖放大到合適比例以便于操作。選擇矩形選擇工具（快捷鍵為M），在左上角畫出一個(gè)邊長為4像素的正方形選框，再按住Shift鍵，在右下角添加一個(gè)同樣的選框。

　　2.確認(rèn)當(dāng)前的前景色為默認(rèn)的黑色，如果不是可以按下D鍵將它恢復(fù)為默認(rèn)的。按下“Alt BackSpace”鍵使用前景色黑色填充選區(qū)，然后按下“Ctrl D”鍵取消選擇（如圖3）。

圖 3

　　3.選擇菜單命令“Edit（編輯）→Define Pattern（定義圖案）”，在對(duì)話框中為新圖案命名為“黑白方格”，然后按下OK按鈕，保存自定義的圖案。
　　三、制作虛線框
　　1.回到Logo所在的文件，在Layers面板上，選擇下面的Layer 1圖層，然后選擇菜單命令“Edit（編輯）→Fill（填充）”，在對(duì)話框中選擇使用Pattern填充，在下面的下拉列表中選擇我們剛才自定義的“黑白方格”圖案，其余選項(xiàng)保持默認(rèn)值（圖4）。

圖 4

　　2.確定后，Layer 1圖層將被密布而有規(guī)律的黑白方格填滿（如圖5，圖中將“Logo”圖層隱藏）。在Layers面板上，單擊面板底部的新建圖層按鈕，建立空白圖層Layer 2。按住Ctrl鍵單擊“Logo”圖層，將其輪廓作為選區(qū)載入。再選擇菜單命令“Select（選擇）→Modify（改變）→Expand（擴(kuò)展）”，在對(duì)話框中輸入1，按下OK按鈕，選區(qū)將向外擴(kuò)張一個(gè)像素。按下“Ctrl Shift I”鍵，將選區(qū)反向。確認(rèn)當(dāng)前圖層為Layer 2，按下“Ctrl BackSpace”鍵，使用背景色白色填充選區(qū)。將圖層Layer 2命名為“白邊”。按下“Ctrl D”鍵取消選擇，可以看到Logo周圍出現(xiàn)了一圈虛線框（圖6）。

圖 5


圖 6

四、使每條邊的虛線相互獨(dú)立

　　現(xiàn)在你一定已經(jīng)看明白了，這條虛線框是假的，這里使了個(gè)障眼法，是讓背景圖案通過一條1像素寬的縫隙露出來一部分，如果讓它動(dòng)起來的話會(huì)很困難。該怎么辦呢?我們繼續(xù)使用障眼法——用四塊背景來分別對(duì)應(yīng)四條邊。
　　1.在Layers面板上，將圖層Layer 1拖動(dòng)到面板底部的新建圖層按鈕上，新建一個(gè)該圖層的副本圖層Layer 1 copy。再重復(fù)兩次復(fù)制操作，得到四個(gè)相同的布滿“黑白方格”圖案的圖層。選擇單列像素選擇工具，將圖像視圖放大到合適的比例，在Logo左側(cè)的虛線上單擊，將該條虛線所在的直線全部選擇。
　　2.在Layers面板上，選擇圖層Layer 1，然后單擊面板底部的添加圖層蒙版按鈕，結(jié)果將為該圖層添加一塊幾乎為全黑色的蒙板，只在Logo左側(cè)的虛線所在的直線上是白色的，也就是說圖層Layer1只在那條直線上可見。接下來，同樣的原理，分別使用單行像素選擇工具和單列像素選擇工具選擇Logo上方、右側(cè)和下方的虛線，依次為余下的三個(gè)圖案圖層添加蒙板。
　　3.這時(shí)候，從表面上看Logo毫無變化，實(shí)際上圍繞在它周圍的虛線框已經(jīng)是由四部分組成的了�？梢噪[藏某一圖層，查看一下情況是否如此。根據(jù)四個(gè)圖案圖層對(duì)應(yīng)的部分，分別為它們命名為“左”、“上”、“右”和“下”（圖7）。

圖 7

　　五、在ImageReady中讓虛線動(dòng)起來
　　1.我們的準(zhǔn)備工作已經(jīng)做完了，下面要切換到ImageReady中制作動(dòng)畫。按下工具箱最底部的跳轉(zhuǎn)按鈕，ImageReady將自動(dòng)運(yùn)行，并且自動(dòng)載入我們剛才準(zhǔn)備好的文件，并且圖層和蒙板等元素全都保持原貌。
　　2.在Animation面板上，可以看到當(dāng)前圖像自動(dòng)成為動(dòng)畫的第1幀。單擊復(fù)制當(dāng)前幀按鈕，將建立與第1幀相同的第2幀（如圖8）。選擇移動(dòng)工具，在Layers面板上，選擇圖層“左”，按下↑箭頭按鈕，使它向上移動(dòng)一個(gè)像素。然后分別將圖層“上”向右移動(dòng)一個(gè)像素，圖層“右”向下移動(dòng)一個(gè)像素，圖層“下”向左移動(dòng)一個(gè)像素。

圖 8

　　3.從圖像上看，就像是虛線框順時(shí)針方向蠕動(dòng)了一下。再在Animation面板上復(fù)制第2幀為第3幀，使用相同的方法再次讓虛線框順時(shí)針方向蠕動(dòng)一下。重復(fù)以上過程，直到將第8幀制作完畢。我們?cè)谇懊嬷谱鞯膱D案基本單位是8像素，每幀移動(dòng)1像素，剛好經(jīng)過8幀可以周而復(fù)始。
六、最后的設(shè)置

　　1.ImageReady默認(rèn)的設(shè)置是每幀動(dòng)畫停留0秒鐘，我們需要改變這個(gè)數(shù)值。在Animation面板上，單擊第1幀選擇它，再按住Shift鍵單擊第8幀，將8幀動(dòng)畫全部選擇。單擊任意一幀下面的停留時(shí)間下拉菜單，選擇0.1秒，于是全部幀的停留時(shí)間全都改為0.1秒鐘（如圖9）。

圖 9

　　2.我們的動(dòng)畫已經(jīng)制作完了，下面要對(duì)輸出文件進(jìn)行設(shè)置。在Optimize面板上，將Setting選擇為GIF Web Palette，具體設(shè)置保持默認(rèn)即可（如圖10）。

圖 10

　　3.通過菜單命令“File（文件）→Save Optimized（將優(yōu)化結(jié)果存儲(chǔ)為）”，在對(duì)話框中選擇目錄，命名文件，保存類型選擇Image Only，保存后即可將文件輸出為GIF動(dòng)畫。在圖像查看軟件中打開該GIF動(dòng)畫，或者將它插入到網(wǎng)頁中用網(wǎng)頁瀏覽器打開，就可以看到我們的Logo有了一條蠕動(dòng)的虛線框（圖11）。根據(jù)具體的需要，我們還可以將虛線框外面的白邊改成其他顏色或者裁切掉，以便更加適應(yīng)網(wǎng)頁設(shè)計(jì)和制作的需要。

圖 11

　　好了，動(dòng)畫制作完了�，F(xiàn)在你已經(jīng)看出，這篇教材整個(gè)過程就是實(shí)現(xiàn)了一個(gè)視覺上的欺騙，只要摸清了思路，制作過程極為簡單。只要開拓我們的思路，同樣的例子還可以制作出多種蠕動(dòng)方式的虛線框來。（完）簡單的,我們教你,深?yuàn)W的,你來分享
photoshop,ps,photoshopjiao cheng ,psjiao cheng ,photoshopxia zai ,pslun tan ,fei zhu liu psjiao cheng ,fei zhu liu psruan jian ,fei zhu liu tu pian ,fei zhu liu kong jian ,qqkong jian ,qqkong jian dai ma ,qqkong jian liu yan dai ma ,qqkong jian mo kuai ,QQkong jian FLASHmo kuai ,PSzi ti ,PSbi shua