建造個人網站時，設計精巧、富于動態的Logo總是能為網頁增色不少。也許有的朋友見過Logo周圍有一圈細細的虛線圍繞著Logo緩緩蠕動的效果，沒有見過的朋友請看這裏：
下面我就和大家一起來探討制作這種蠕動虛線框的一種方法。
運行你的Photoshop，打開你制作好的Logo文件。什麽？如何制作Logo？這可不是幾句話能說得清的，而且不是本文的討論內容，讀者朋友可以參考相關資料。需要強調的一點是，Logo的標准尺寸是88×31像素。本文中為了讓大家看得更清楚，筆者使用了一幅較大尺寸的圖
片(如圖1)。
圖1
1、擴大畫布的尺寸。
打開Logo文件後，該圖像只有一個背景圖層，由于我們需要它的輪廓，所以不能直接在該層上擴展畫布。在Layers面板上，雙擊Background圖層右側的空白區域，在彈出的對話框中單擊OK按鈕，即可將背景圖層轉換為普通圖層Layer0。雙擊圖層的名字，將其命名為“Logo”。按住Ctrl鍵單擊面板底部的新建圖層按鈕，在“Logo”圖層下面新建圖層Layer1。然後選擇菜單命令“Image→CanvasSize”，在對話框中將長度單位改為Pixels，勾選Relative複選框，Width和Height均增加40像素，Anchor保持默認的中間位置(如圖2)。
圖2
這步操作的結果是使畫布在上下左右四個方向都增大了20像素，為我們下面的步驟開辟了空間。
2、制作用來填充背景的圖案。
使用菜單命令“File→New”新建一個8×8像素，筆景色為白色的文件。為了能夠看清，我們可以按下Ctrl+"+"鍵數次，將文件視圖放大到合適比例以便于操作。選擇矩形選擇工具(快捷鍵為M)，在左上角畫出一個邊長為4像素的正方形選框，再按住Shift鍵，在右下角添加一個同樣的選框。確認當前的前景色為默認的黑色，如果不是可以按下D鍵將其恢複為默認。按下Alt+BackSpace鍵使用前景色黑色填充選區，然後按下Ctrl+D鍵取消選擇(如圖3)。
圖3
選擇菜單命令“Edit→Define Pattern”，在對話框中為新圖案命名為“黑白方格”，然後按下OK按鈕，保存自定義的圖案。
3、制作虛線框。
回到Logo所在的文件，在Layers面板上，選擇下面的Layer 1圖層，然後選擇菜單命令“Edit→Fill”，在對話框中選擇使用Pattern填充，在下面的下拉列表中選擇我們剛才自定義的“黑白方格”圖案，其余選項保持默認(如圖4)。
圖4
確定後，Layer 1圖層將被密布而規律的黑白方格填滿(如圖5，圖中將“Logo”圖層隱藏)。
圖5
在Layers面板上，單擊面板底部的新建圖層按鈕，建立空白圖層Layer2。按住Ctrl鍵單擊“Logo”圖層，將其輪廓作為選區載入。再選擇菜單命令“Select→Modify→Expand”，在對話框中輸入1，按下OK按鈕，選區將向外擴張一個像素。按下Ctrl+Shift+I鍵，將選區反向。確認當前圖層為Layer2，按下Ctrl+BackSpace鍵，使用背景色白色填充選區。將圖層Layer2命名為“白邊”。按下Ctrl+D鍵取消選擇，可以看到Logo周圍出現了一圈虛線框(如圖6)。
圖6
4、使每條邊的虛線相互獨立。
讀者朋友們一定已經看明白了，沒錯，這條虛線框是假的，這裏使了個障眼法，是讓背景圖案通過一條1像素寬的縫隙露出來一部分，如果讓它動起來的話會很困難。該怎麽辦呢？我們繼續使用障眼法——用四塊背景來分別對應四條邊。在Layers面板上，將圖層Layer1拖動到面板底部的新建圖層按鈕上，新建一個該圖層的副本圖層Layer 1copy。再重複兩次複制操作，得到四個相同的布滿“黑白方格”圖案的圖層。選擇單列像素選擇工具，將圖像視圖放大到合適比例，在Logo左側的虛線上單擊，將該條虛線所在的直線全部選擇。在Layers面板上，選擇圖層Layer1，然後單擊面板底部的添加圖層蒙版按鈕，結果將為該圖層添加一塊幾乎為全黑色的蒙版，只在Logo左側的虛線所在的直線上是白色的，也就是說圖層Layer1只在那條直線上可見。接下來，同樣的原理，分別使用單行像素選擇工具和單列像素選擇工具選擇Logo上方、右側和下方的虛線，依次為余下的三個圖案圖層添加蒙版。這時候，從表面上看Logo毫無變化，實際上圍繞在它周圍的虛線框已經是由四部分組成的了。可以隱藏某一圖層，查看一下情況是否如此。根據四個圖案圖層對應的部分，分別為它們命名為“左”、“上”、“右”和“下”(如圖7)。
圖7
5、在ImageReady中讓虛線動起來。
我們的准備工作已經做完了，下面要切換到ImageReady中制作動畫。按下工具箱最底部的跳轉按鈕，ImageReady將自動運行，並且自動載入我們剛才准備好的文件，並且圖層和蒙版等元素全都保持原貌。在Animation面板上，可以看到當前圖像自動成為動畫的第1幀。單擊複制當前幀按鈕，將建立與第1幀相同的第2幀(如圖8)。
圖8
選擇移動工具，在Layers面板上，選擇圖層“左”，按下↑箭頭按鈕，使其向上移動一個像素。然後分別將圖層“上”向右移動一個像素，圖層“右”向下移動一個像素，圖層“下”向左移動一個像素。從圖像上看，就像是虛線框順時針方向蠕動了一下。再在Animation面板上複制第2幀為第3幀，使用相同的方法再次讓虛線框順時針方向蠕動一下。重複以上過程，直到將第8幀制作完畢。我們在前面制作的圖案基本單位是8像素，每幀移動1像素，剛好經過8幀可以周而複始。
6、最後的設置。
ImageReady默認的設置是每幀動畫停留0秒鍾，我們需要改變這個數字。在Animation面板上，單擊第1幀選擇它，再按住Shift鍵單擊第8幀，將8幀動畫全部選擇。單擊任意一幀下面的停留時間下拉菜單，選擇0.1seconds，于是全部幀的停留時間全都改為0.1秒鍾(如圖9)。
圖9
我們的動畫已經制作完了，下面要對輸出文件進行設置。在Optimize面板上，將Setting選擇為GIF Web Palette，具體設置保持默認即可(如圖10)。
圖10
通過菜單命令“File→Save Optimized”，在對話框中選擇目錄，命名文件，保存類型選擇ImageOnly，保存後即可將文件輸出為GIF動畫。在圖像查看軟件中打開該GIF動畫，或者將其插入到網頁中用網頁浏覽器打開，就可以看到我們的Logo有了一條蠕動的虛線框(如圖11)。
圖11
根據具體的需要，我們還可以將虛線框外面的白邊改成其他顔色或者裁切掉，以便更加適應網頁設計和制作的需要。
好了，動畫制作完了。聰明的讀者已經看出，這篇教程整個過程就是實現了一個視覺上的欺騙，只要摸清了思路，制作過程極為簡單。只要開拓我們的思路，同樣的例子還可以制作出多種蠕動方式的虛線框來。
最後的結果是這樣的：
需要說明的是，第5步中，可以複制出第2幀後直接將各部分移動7像素，再在Animation面板的功能菜單中選擇Tween，有軟件自動生成中間的6幀——這樣也許更簡便，但不如一幀一幀的移動容易理解。
[
本帖最後由 lesly 於 2007-5-19 01:14 PM 編輯 ]
