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

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

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

圖 1

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

圖 2

二、制作用來(lái)填充背景的圖案

　　1.使用菜單命令“File（文件）→New（新建）”新建一個(gè)8×8像素，背景色為白色的文件。為了能夠看清，我們可以按下“Ctrl ‘ ’”鍵數(shù)次，將文件視圖放大到合適比例以便于操作。選擇矩形選擇工具（快捷鍵為M），在左上角畫(huà)出一個(gè)邊長(zhǎng)為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ì)話(huà)框中為新圖案命名為“黑白方格”，然后按下OK按鈕，保存自定義的圖案。
　　三、制作虛線(xiàn)框
　　1.回到Logo所在的文件，在Layers面板上，選擇下面的Layer 1圖層，然后選擇菜單命令“Edit（編輯）→Fill（填充）”，在對(duì)話(huà)框中選擇使用Pattern填充，在下面的下拉列表中選擇我們剛才自定義的“黑白方格”圖案，其余選項(xiàng)保持默認(rèn)值（圖4）。

圖 4

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

圖 5


圖 6

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

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

圖 7

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

圖 8

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

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

圖 9

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

圖 10

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

圖 11

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