利用Photoshop製作廣告頁動畫流程001.jpg文、黃玲君老師

要製作廣告頁所需運用的技巧,必須橫跨熟悉前端Photoshop製作動畫技巧,與後端網路超連結概念,如此搭配起來,才能順利完成一個具有動畫效果的廣告頁,且成為可以發送的廣告信。

 一般市面上的Photoshop書籍,比較少在動畫的部分多做著墨,尤其是廣告頁動畫切片這一環。而Dreamweaver書籍,又偏重在網站架設,鮮少提及到如何在Photoshop做好廣告頁的前置設計作業。由於書本較少著重在此環節,通常得藉由職場的磨練,才比較有機會接觸到這方面。因此我在此分享了一些製作廣告頁動畫切片的流程與注意事項,希望能對於同學有所幫助。

針對整個廣告頁動畫製作流程,我將它分為四個階段:

壹、整體畫面設計完稿

首先要注意圖片的寬度,一般廣告頁圖片寬度約為640像素至930像素之間,適合在螢幕上觀看,或是方便使用者透過Web信箱觀看,扣除掉Web信箱左邊的按鈕選單,與右方廣告橫幅,所以才會設計成最佳寬度640像素的尺寸。

 利用Photoshop製作廣告頁動畫流程001.jpg

貳、構思動畫,圖層安排

製作點陣圖動畫以前,須先了解,點陣圖動畫只支援以下四種方式,可以混合搭配:

一、圖層的隱藏與顯示

點陣圖動畫不支援圖層變形,若想要製作變形效果,必須分圖層,然後利用(圖層的顯示與隱藏)技巧來製作。

利用Photoshop製作廣告頁動畫流程002.jpg  

 

二、圖層的透明度

透明度常應用在物件的忽隱忽現,或是星星的閃爍...雖然圖層混合模式也可以變換,但是並不常用。

利用Photoshop製作廣告頁動畫流程003.jpg  

 三、位置

用來產生物體上下左右移動的效果。

 利用Photoshop製作廣告頁動畫流程004.jpg

四、圖層樣式

圖層樣式可以說是既容易又方便的一種動畫方式,變換的組合多到可任君挑選。

利用Photoshop製作廣告頁動畫流程005.jpg  


瞭解了以上四種製作點陣圖動畫製作方式,開始構思想要製作的效果,然後著手圖層的安排。

 利用Photoshop製作廣告頁動畫流程006.jpg

利用Photoshop製作廣告頁動畫流程007.jpg 利用Photoshop製作廣告頁動畫流程008.jpg

 參、切片輸出

使用切片工具的一些注意事項:

切片時請留意盡量不要有小碎片,這樣易造成後續到網頁製作軟體銜接時的編修麻煩。

一個完整的動畫效果,在同一個切片裡。若中途把一個動畫效果隔開,等放上網路伺服器之後,因為圖片下載的速度不一,會導致破綻。

輸出成圖片時,有動畫效果的切片,一定要設定為GIF格式。

切片位置的安排,JPG的圖片壓縮率,與GIF的顏色數,都會影響檔案的大小與美觀程度。在調整參數的時候,即可預覽到輸出結果與檔案大小,此時可以好好拿捏一番,一個良好的技術,可以在這之間取得最佳結果。

在同一個Photoshop檔案裡,想為每一個切片製作出不同數目的影格,或是時間播放的快慢不同,可分數次輸出切片於電腦不同位置(輸出名稱須相同),然後再覆蓋掉不要的切片,便可達成同一張廣告頁裡,具有豐富層次的動畫效果。

圖片輸出時,檔案名稱務必輸出為「英文字或數字」,避免使用中文字。網路所使用的網頁檔或圖片,皆以「英文字或數字」為主,避免且不建議使用中文字來命名。

利用Photoshop製作廣告頁動畫流程009.jpg

肆、圖片上傳,原始碼修改

1.將圖片全部上傳至FTP網頁空間。

2.修改網頁原始碼。

利用(尋找與取代)功能,將原始碼中的images/,取代為圖片上傳後的位址。

利用Photoshop製作廣告頁動畫流程010.jpg  

3.取得原始碼

取得 <!-- Save for Web Slices (檔案名稱.psd) --> 至 <!-- End Save for Web Slices --> 之間的語法,貼到網頁或是電子報的原始碼中,即可連線觀看到廣告頁動畫。

 

, , , , ,

lccnetvip 發表在 痞客邦 PIXNET 留言(0) 人氣()