[IR動圖教程] 蠕動線框動畫的制作

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

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

圖 1

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

圖 2

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

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

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

圖 3

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

圖 4

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

圖 5


圖 6

四、使每條邊的虛線相互獨立

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

圖 7

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

圖 8

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

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

圖 9

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

圖 10

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

圖 11

　　好了，動畫制作完了?，F(xiàn)在你已經(jīng)看出，這篇教材整個過程就是實現(xiàn)了一個視覺上的欺騙，只要摸清了思路，制作過程極為簡單。只要開拓我們的思路，同樣的例子還可以制作出多種蠕動方式的虛線框來。（完）簡單的,我們教你,深奧的,你來分享
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