PS與ImageReady做動態Logo

來源:互聯網
上載者:User
動態

建造個人網站時,設計精巧、富於動態Logo總是能為網頁增色不少。也許有的朋友見過Logo周圍有一圈細細的虛線圍繞著Logo緩緩蠕動的效果.下面我就和大家一起來探討製作這種蠕動虛線框的一種方法。

運行你的Photoshop,開啟你製作好的Logo檔案。什嗎?如何製作Logo?這可不是幾

句話能說得清的,而且不是本文的討論內容,讀者朋友可以參考相關資料。需要強調的一點是,Logo的標準尺寸是88×31像素。本文中為了讓大家看得更清楚,筆者使用了一幅較大尺寸的圖片(如圖1)。

1、擴大畫布的尺寸。

開啟Logo檔案後,該映像只有一個背景圖層,由於我們需要它的輪廓,所以不能直接在該層上擴充畫布。在Layers面板上,雙擊Background圖層右側的空白地區,在彈出的對話方塊中單擊OK按鈕,即可將背景圖層轉換為普通圖層Layer 0。雙擊圖層的名字,將其命名為“Logo”。按住Ctrl鍵單擊面板底部的建立圖層按鈕,在“Logo”圖層下面建立圖層Layer 1。然後選擇功能表命令“Image→Canvas Size”,在對話方塊中將長度單位改為Pixels,勾選Relative複選框,Width和Height均增加40像素,Anchor保持預設的中間位置(如圖2)。

這步操作的結果是使畫布在上下左右四個方向都增大了20像素,為我們下面的步驟開闢了空間。

2、製作用來填充背景的圖案。

使用功能表命令“File→New”建立一個8×8像素,筆景色為白色的檔案。為了能夠看清,我們可以按下Ctrl+"+"鍵數次,將檔案視圖放大到合適比例以便於操作。選取矩形選擇工具(快速鍵為M),在左上方畫出一個邊長為4像素的正方形選框,再按住Shift鍵,在右下角添加一個同樣的選框。確認當前的前景色彩為預設的黑色,如果不是可以按下D鍵將其恢複為預設。按下Alt+BackSpace鍵使用前景色彩黑色填充選區,然後按下Ctrl+D鍵取消選擇(如圖3)。

選擇功能表命令“Edit→Define Pattern”,在對話方塊中為新圖案命名為“黑白方格”,然後按下OK按鈕,儲存自訂的圖案。

3、製作虛線框。

回到Logo所在的檔案,在Layers面板上,選擇下面的Layer 1圖層,然後選擇功能表命令“Edit→Fill”,在對話方塊中選擇使用Pattern填充,在下面的下拉式清單中選擇我們剛才自訂的“黑白方格”圖案,其餘選項保持預設(如圖4)。

確定後,Layer 1圖層將被密布而規律的黑白方格填滿(如圖5,圖中將“Logo”圖層隱藏)。

在Layers面板上,單擊面板底部的建立圖層按鈕,建立空白圖層Layer 2。按住Ctrl鍵單擊“Logo”圖層,將其輪廓作為選區載入。再選擇功能表命令“Select→Modify→Expand”,在對話方塊中輸入1,按下OK按鈕,選區將向外擴張一個像素。按下Ctrl+Shift+I鍵,將選區反向。確認當前圖層為Layer 2,按下Ctrl+BackSpace鍵,使用背景色白色填充選區。將圖層Layer 2命名為“白邊”。按下Ctrl+D鍵取消選擇,可以看到Logo周圍出現了一圈虛線框(如圖6)。

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

讀者朋友們一定已經看明白了,沒錯,這條虛線框是假的,這裡使了個障眼法,是讓背景圖案通過一條1像素寬的縫隙露出來一部分,如果讓它動起來的話會很困難。該怎麼辦呢?我們繼續使用障眼法——用四塊背景來分別對應四條邊。在Layers面板上,將圖層Layer 1拖動到面板底部的建立圖層按鈕上,建立一個該圖層的副本圖層Layer 1 copy。再重複兩次複製操作,得到四個相同的布滿“黑白方格”圖案的圖層。選擇單列像素選擇工具,將映像視圖放大到合適比例,在Logo左側的虛線上單擊,將該條虛線所在的直線全部選擇。在Layers面板上,選擇圖層Layer 1,然後單擊面板底部的添加圖層蒙版按鈕,結果將為該圖層添加一塊幾乎為全黑色的蒙版,只在Logo左側的虛線所在的直線上是白色的,也就是說圖層Layer1隻在那條直線上可見。接下來,同樣的原理,分別使用單行像素選擇工具和單列像素選擇工具選擇Logo上方、右側和下方的虛線,依次為餘下的三個圖案圖層添加蒙版。這時候,從表面上看Logo毫無變化,實際上圍繞在它周圍的虛線框已經是由四部分組成的了。可以隱藏某一圖層,查看一下情況是否如此。根據四個圖案圖層對應的部分,分別為它們命名為“左”、“上”、“右”和“下”(如圖7)。

5、在ImageReady中讓虛線動起來。

我們的準備工作已經做完了,下面要切換到ImageReady中製作動畫。按下工具箱最底部的跳轉按鈕,ImageReady將自動運行,並且自動載入我們剛才準備好的檔案,並且圖層和蒙版等元素全都保持原貌。在Animation面板上,可以看到當前映像自動成為動畫的第1幀。單擊複製當前幀按鈕,將建立與第1幀相同的第2幀(如圖8)。

選擇移動工具,在Layers面板上,選擇圖層“左”,按下↑箭頭按鈕,使其向上移動一個像素。然後分別將圖層“上”向右移動一個像素,圖層“右”向下移動一個像素,圖層“下”向左移動一個像素。從映像上看,就像是虛線框順時針方向蠕動了一下。再在Animation面板上複製第2幀為第3幀,使用相同的方法再次讓虛線框順時針方向蠕動一下。重複以上過程,直到將第8幀製作完畢。我們在前面製作的圖案基本單位是8像素,每幀移動1像素,剛好經過8幀可以周而復始。

6、最後的設定。

ImageReady預設的設定是每幀動畫停留0秒鐘,我們需要改變這個數字。在Animation面板上,單擊第1幀選擇它,再按住Shift鍵單擊第8幀,將8幀動畫全部選擇。單擊任意一幀下面的停留時間下拉式功能表,選擇0.1seconds,於是全部幀的停留時間全都改為0.1秒鐘(如圖9)。

我們的動畫已經製作完了,下面要對輸出檔案進行設定。在Optimize面板上,將Setting選擇為GIF Web Palette,具體設定保持預設即可(如圖10)。

通過功能表命令“File→Save Optimized”,在對話方塊中選擇目錄,命名檔案,檔案類型選擇Image Only,儲存後即可將檔案輸出為GIF動畫。在映像查看軟體中開啟該GIF動畫,或者將其插入到網頁中用網頁瀏覽器開啟,就可以看到我們的Logo有了一條蠕動的虛線框(如圖11)。

根據具體的需要,我們還可以將虛線框外面的白邊改成其他顏色或者裁切掉,以便更加適應網頁設計和製作的需要。

好了,動畫製作完了。聰明的讀者已經看出,這篇教程整個過程就是實現了一個視覺上的欺騙,只要摸清了思路,製作過程極為簡單。只要開拓我們的思路,同樣的例子還可以製作出多種蠕動方式的虛線框來。

最後的結果是這樣的:

需要說明的是,第5步中,可以複製出第2幀後直接將各部分移動7像素,再在Animation面板的功能菜單中選擇Tween,有軟體自動產生中間的6幀——這樣也許更簡便,但不如一幀一幀的移動容易理解。:)



相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。