我手把手教Ps制作動(dòng)態(tài)蠕動(dòng)虛線的QQ空間頭像教程![附圖解] 2012最新

1、很多人都想知道這個(gè)效果怎么做吧，今天就由我來滿足大家吧，其實(shí)很簡(jiǎn)單，為了大家能易學(xué)易懂，就分成三部分來寫。寫完馬上去睡覺！第一部分，邊框動(dòng)畫制作：01.打開ps，讓我們開始從創(chuàng)建一個(gè)新的文件，大小設(shè)置為100100px，背景色填充為“7f0444” . 02.按ctrl+j復(fù)制背景層，得到圖層1，按ctrl+a全選，點(diǎn)擊【選擇】【收縮】【3像素左右】，接著注意了,要按下delet刪除選區(qū)內(nèi)的象素，然后點(diǎn)擊【編輯】【描邊】（選擇黑色為1像素）按下ctrl+d取消選區(qū)。03.新建一層，得到圖層2，選擇【】在畫布中點(diǎn)擊一下，自動(dòng)跳出選區(qū)，【編輯】【描邊】（選擇黑色為1像素），按下ctrl+d取消選區(qū)

2、。04.選擇圖層2，按住ait不放，鼠標(biāo)點(diǎn)擊【單行的細(xì)線】移動(dòng)復(fù)制n個(gè)圖層，這里一定要細(xì)心，調(diào)和相隔的位置，接著按ctrl選中【單行的細(xì)線】全部圖層合并。05.合并之后，按ctrl+j復(fù)制一份該圖層，按ctrl+t自由變換，點(diǎn)擊【編輯】【變換】【旋轉(zhuǎn)90度（順時(shí)針）】按下回車鍵，接著將【細(xì)線】的2個(gè)圖層合并，按右鍵【】.06.打開動(dòng)畫窗口，這時(shí)將所有的圖層合并，只留下【背景層】，在該圖層按右鍵【混合選項(xiàng)】【漸變添加】07.在動(dòng)畫面板，復(fù)制一幀,得到【幀2】08.返回【混合選項(xiàng)】【漸變添加】把【角度】改為180度。09.在動(dòng)畫面板，點(diǎn)擊過渡按鈕，動(dòng)畫幀過渡 如下圖:10.這時(shí)我們已經(jīng)完成邊框動(dòng)畫

3、了，按住ctrl選中所有動(dòng)畫幀，把時(shí)間延遲調(diào)為0.1秒。邊框動(dòng)畫完成：第二部分，蠕動(dòng)虛線框的方法：以下原文是我從網(wǎng)上找來的!差不多.就代替了,我也不一一做出來了,很麻煩請(qǐng)諒解:建造個(gè)人網(wǎng)站時(shí)，設(shè)計(jì)精巧、富于動(dòng)態(tài)的Logo總是能為網(wǎng)頁增色不少。也許有的朋友見過Logo周圍有一圈細(xì)細(xì)的虛線圍繞著Logo緩緩蠕動(dòng)的效果.下面我就和大家一起來探討制作這種蠕動(dòng)虛線框的一種方法。運(yùn)行你的Photoshop，打開你制作好的Logo文件。什么？如何制作Logo？這可不是幾句話能說得清的，而且不是本文的討論內(nèi)容，讀者朋友可以參考相關(guān)資料。需要強(qiáng)調(diào)的一點(diǎn)是，Logo的標(biāo)準(zhǔn)尺寸是8831像素。本文中為了讓大家看得更

4、清楚，筆者使用了一幅較大尺寸的圖片(如圖1)。圖11、擴(kuò)大畫布的尺寸 打開Logo文件后，該圖像只有一個(gè)背景圖層，由于我們需要它的輪廓，所以不能直接在該層上擴(kuò)展畫布。在Layers面板上，雙擊Background圖層右側(cè)的空白區(qū)域，在彈出的對(duì)話框中單擊OK按鈕，即可將背景圖層轉(zhuǎn)換為普通圖層Layer 0。雙擊圖層的名字，將其命名為“Logo”。按住Ctrl鍵單擊面板底部的新建圖層按鈕，在“Logo”圖層下面新建圖層Layer 1。然后選擇菜單命令“ImageCanvas Size”，在對(duì)話框中將長(zhǎng)度單位改為Pixels，勾選Relative復(fù)選框，Width和Height均增加40像素，Anc

5、hor保持默認(rèn)的中間位置(如圖2)。圖2這步操作的結(jié)果是使畫布在上下左右四個(gè)方向都增大了20像素，為我們下面的步驟開辟了空間。2、制作用來填充背景的圖案使用菜單命令“FileNew”新建一個(gè)88像素，筆景色為白色的文件。為了能夠看清，我們可以按下Ctrl+鍵數(shù)次，將文件視圖放大到合適比例以便于操作。選擇矩形選擇工具(快捷鍵為M)，在左上角畫出一個(gè)邊長(zhǎng)為4像素的正方形選框，再按住Shift鍵，在右下角添加一個(gè)同樣的選框。確認(rèn)當(dāng)前的前景色為默認(rèn)的黑色，如果不是可以按下D鍵將其恢復(fù)為默認(rèn)。按下Alt+BackSpace鍵使用前景色黑色填充選區(qū)，然后按下Ctrl+D鍵取消選擇(如圖3)。圖3選擇菜單命

6、令“EditDefine Pattern”，在對(duì)話框中為新圖案命名為“黑白方格”，然后按下OK按鈕，保存自定義的圖案。3、制作虛線框回到Logo所在的文件，在Layers面板上，選擇下面的Layer 1圖層，然后選擇菜單命令“EditFill”，在對(duì)話框中選擇使用Pattern填充，在下面的下拉列表中選擇我們剛才自定義的“黑白方格”圖案，其余選項(xiàng)保持默認(rèn)(如圖4)。圖4確定后，Layer 1圖層將被密布而規(guī)律的黑白方格填滿(如圖5，圖中將“Logo”圖層隱藏)。圖5在Layers面板上，單擊面板底部的新建圖層按鈕，建立空白圖層Layer 2。按住Ctrl鍵單擊“Logo”圖層，將其輪廓作為選區(qū)

7、載入。再選擇菜單命令“SelectModifyExpand”，在對(duì)話框中輸入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周圍出現(xiàn)了一圈虛線框(如圖6)。圖64、使每條邊的虛線相互獨(dú)立讀者朋友們一定已經(jīng)看明白了，沒錯(cuò)，這條虛線框是假的，這里使了個(gè)障眼法，是讓背景圖案通過一條1像素寬的縫隙露出來一部分，如果讓它動(dòng)起來的話會(huì)很困難。該怎么辦呢？我們繼續(xù)使用障眼法用四塊背景來分別對(duì)應(yīng)四條邊。在

8、Layers面板上，將圖層Layer 1拖動(dòng)到面板底部的新建圖層按鈕上，新建一個(gè)該圖層的副本圖層Layer 1 copy。再重復(fù)兩次復(fù)制操作，得到四個(gè)相同的布滿“黑白方格”圖案的圖層。選擇單列像素選擇工具，將圖像視圖放大到合適比例，在Logo左側(cè)的虛線上單擊，將該條虛線所在的直線全部選擇。在Layers面板上，選擇圖層Layer 1，然后單擊面板底部的添加圖層蒙版按鈕，結(jié)果將為該圖層添加一塊幾乎為全黑色的蒙版，只在Logo左側(cè)的虛線所在的直線上是白色的，也就是說圖層Layer1只在那條直線上可見。接下來，同樣的原理，分別使用單行像素選擇工具和單列像素選擇工具選擇Logo上方、右側(cè)和下方的虛線，

9、依次為余下的三個(gè)圖案圖層添加蒙版。這時(shí)候，從表面上看Logo毫無變化，實(shí)際上圍繞在它周圍的虛線框已經(jīng)是由四部分組成的了?？梢噪[藏某一圖層，查看一下情況是否如此。根據(jù)四個(gè)圖案圖層對(duì)應(yīng)的部分，分別為它們命名為“左”、“上”、“右”和“下”(如圖7)。圖75、在ImageReady中讓虛線動(dòng)起來我們的準(zhǔn)備工作已經(jīng)做完了，下面要切換到ImageReady中制作動(dòng)畫。按下工具箱最底部的跳轉(zhuǎn)按鈕，ImageReady將自動(dòng)運(yùn)行，并且自動(dòng)載入我們剛才準(zhǔn)備好的文件，并且圖層和蒙版等元素全都保持原貌。在Animation面板上，可以看到當(dāng)前圖像自動(dòng)成為動(dòng)畫的第1幀。單擊復(fù)制當(dāng)前幀按鈕，將建立與第1幀相同的第2幀

10、(如圖8)。圖8選擇移動(dòng)工具，在Layers面板上，選擇圖層“左”，按下箭頭按鈕，使其向上移動(dòng)一個(gè)像素。然后分別將圖層“上”向右移動(dòng)一個(gè)像素，圖層“右”向下移動(dòng)一個(gè)像素，圖層“下”向左移動(dòng)一個(gè)像素。從圖像上看，就像是虛線框順時(shí)針方向蠕動(dòng)了一下。再在Animation面板上復(fù)制第2幀為第3幀，使用相同的方法再次讓虛線框順時(shí)針方向蠕動(dòng)一下。重復(fù)以上過程，直到將第8幀制作完畢。我們?cè)谇懊嬷谱鞯膱D案基本單位是8像素，每幀移動(dòng)1像素，剛好經(jīng)過8幀可以周而復(fù)始。6、最后的設(shè)置ImageReady默認(rèn)的設(shè)置是每幀動(dòng)畫停留0秒鐘，我們需要改變這個(gè)數(shù)字。在Animation面板上，單擊第1幀選擇它，再按住Shi

11、ft鍵單擊第8幀，將8幀動(dòng)畫全部選擇。單擊任意一幀下面的停留時(shí)間下拉菜單，選擇0.1seconds，于是全部幀的停留時(shí)間全都改為0.1秒鐘(如圖9)。圖9我們的動(dòng)畫已經(jīng)制作完了，下面要對(duì)輸出文件進(jìn)行設(shè)置。在Optimize面板上，將Setting選擇為GIF Web Palette，具體設(shè)置保持默認(rèn)即可(如圖10)。圖10通過菜單命令“FileSave Optimized”，在對(duì)話框中選擇目錄，命名文件，保存類型選擇Image Only，保存后即可將文件輸出為GIF動(dòng)畫。在圖像查看軟件中打開該GIF動(dòng)畫，或者將其插入到網(wǎng)頁中用網(wǎng)頁瀏覽器打開，就可以看到我們的Logo有了一條蠕動(dòng)的虛線框(如圖1

12、1)。圖11根據(jù)具體的需要，我們還可以將虛線框外面的白邊改成其他顏色或者裁切掉，以便更加適應(yīng)網(wǎng)頁設(shè)計(jì)和制作的需要。好了，動(dòng)畫制作完了。聰明的讀者已經(jīng)看出，這篇教程整個(gè)過程就是實(shí)現(xiàn)了一個(gè)視覺上的欺騙，只要摸清了思路，制作過程極為簡(jiǎn)單。只要開拓我們的思路，同樣的例子還可以制作出多種蠕動(dòng)方式的虛線框來。需要說明的是，第5步中，可以復(fù)制出第2幀后直接將各部分移動(dòng)7像素，再在Animation面板的功能菜單中選擇Tween，有軟件自動(dòng)生成中間的6幀這樣也許更簡(jiǎn)便，但不如一幀一幀的移動(dòng)容易理解。我們可以根據(jù)以上的教程，完成效果如下：邊框形狀，主要應(yīng)用“多邊形套索工具”套選出來的。我的也是做得不好，希望大家會(huì)靈活應(yīng)用。第三部分：01.還有，左側(cè)斜動(dòng)的，就是用【矩形選區(qū)工具】拉出一個(gè)長(zhǎng)矩形選區(qū)，填充為黑色，按ctrl+d取消選區(qū)，接著按ctrl+t自由變換，旋轉(zhuǎn)3045