Error message

Notice: Undefined offset: 1 in counter_get_browser() (line 70 of /home/weldon/www/sites/all/modules/counter/counter.lib.inc).

Photoshop製作gif文字過光動畫

Categories : 

好久沒有新增文章了,今天就來分享一下,如何使用photosop製作一個文字過光的gif動畫檔案吧!

首先,到時候做好的成果,就會像下面這個成品一樣

這次研討會的網頁看一看,越看越覺得上面標題的地方,好像有些單調,於是,想說讓它稍微有點變化好了,於是開始上網找了找要如何讓它動?

一開始還想說,是不是一定要用Flash來做,但又覺得麻煩...又有一些相容性的問題等等的`,再加上本人實在是非常不擅長使用Adobe系列產品...結果很Lucky的,上網一找就找到了文字過光這個資訊,所以就決定使用photoshopx來做一個動態gif的檔案了!

第一步,準備圖檔或新增文字


首先,建立一個圖層來新增你要過光的文字,或是載入一個圖片,

在這邊,我是載入一個PNG的文字圖檔,因為我之前已經在photoimpact處理過了

另外,文字的部分,我還加上了白邊,因為我第一次製作匯出後,發現會有一點毛邊的現象,

所以我乾脆直接讓他一開始就有一點邊框,到時候配上我網頁的底圖時,才不會毛邊的那麼明顯(因為我直接讓他有邊了!!!

第二步,新增過光圖層


首先,先建立一個圖層,並把這個圖層移動到你的文字圖層的上方(1)

接著,點選左邊工具列上的第二個"矩形選取工具"(2),在過光圖層上,拉一個你想要的形狀(3)

接著,在上方羽化的部分,輸入你想要羽化的程度(4)!

第三步,填滿矩形


點選編輯 > 填滿 > 選擇"白色"或其他你想要的顏色

第四步,矩形旋轉


點選編輯 > 變形 > 旋轉

並在上方的旋轉角度的地方,輸入你想要轉幾度!

第五步,建立剪裁遮色片


點選過光圖層,在上方點選滑鼠右鍵

選擇建立剪裁遮色片

第六步,動畫


建立剪裁遮色片後,點選視窗 > 動畫

接著,可以看到在畫面下方,出現了影格,

你可以在第1個影格中,移動你的矩形圖案,這將是你的過光起始位置

接著,點選複製影格,並在這個影格中,將你的矩形圖案移動到你想要結束過光的位置

接著,將影格1與影格2都選起來,再點選補間,如上圖所示

在跳出的視窗中輸入想要增加的影格數,即可完成補間動畫

在動畫的左下方,選擇永遠,可以重複不斷地撥放動畫

右方最後一個影格(原本的影格2),可以設定為較長的秒數

避免會頭昏眼花的狀況XD

第七步,輸出


點選檔案 > 儲存為網頁與裝置用 > 儲存

這樣就可以完成輸出動態gif檔案的動作囉!