文、黃玲君老師
要製作廣告頁所需運用的技巧，必須橫跨熟悉前端Photoshop製作動畫技巧，與後端網路超連結概念，如此搭配起來，才能順利完成一個具有動畫效果的廣告頁，且成為可以發送的廣告信。
一般市面上的Photoshop書籍，比較少在動畫的部分多做著墨，尤其是廣告頁動畫切片這一環。而Dreamweaver書籍，又偏重在網站架設，鮮少提及到如何在Photoshop做好廣告頁的前置設計作業。由於書本較少著重在此環節，通常得藉由職場的磨練，才比較有機會接觸到這方面。因此我在此分享了一些製作廣告頁動畫切片的流程與注意事項，希望能對於同學有所幫助。
針對整個廣告頁動畫製作流程，我將它分為四個階段：
壹、整體畫面設計完稿
首先要注意圖片的寬度，一般廣告頁圖片寬度約為640像素至930像素之間，適合在螢幕上觀看，或是方便使用者透過Web信箱觀看，扣除掉Web信箱左邊的按鈕選單，與右方廣告橫幅，所以才會設計成最佳寬度640像素的尺寸。
貳、構思動畫，圖層安排
製作點陣圖動畫以前，須先了解，點陣圖動畫只支援以下四種方式，可以混合搭配：
一、圖層的隱藏與顯示
點陣圖動畫不支援圖層變形，若想要製作變形效果，必須分圖層，然後利用（圖層的顯示與隱藏）技巧來製作。
二、圖層的透明度
透明度常應用在物件的忽隱忽現，或是星星的閃爍...雖然圖層混合模式也可以變換，但是並不常用。
三、位置
用來產生物體上下左右移動的效果。
四、圖層樣式
圖層樣式可以說是既容易又方便的一種動畫方式，變換的組合多到可任君挑選。
瞭解了以上四種製作點陣圖動畫製作方式，開始構思想要製作的效果，然後著手圖層的安排。
參、切片輸出
使用切片工具的一些注意事項：
切片時請留意盡量不要有小碎片，這樣易造成後續到網頁製作軟體銜接時的編修麻煩。
一個完整的動畫效果，在同一個切片裡。若中途把一個動畫效果隔開，等放上網路伺服器之後，因為圖片下載的速度不一，會導致破綻。
輸出成圖片時，有動畫效果的切片，一定要設定為GIF格式。
切片位置的安排，JPG的圖片壓縮率，與GIF的顏色數，都會影響檔案的大小與美觀程度。在調整參數的時候，即可預覽到輸出結果與檔案大小，此時可以好好拿捏一番，一個良好的技術，可以在這之間取得最佳結果。
在同一個Photoshop檔案裡，想為每一個切片製作出不同數目的影格，或是時間播放的快慢不同，可分數次輸出切片於電腦不同位置（輸出名稱須相同），然後再覆蓋掉不要的切片，便可達成同一張廣告頁裡，具有豐富層次的動畫效果。
圖片輸出時，檔案名稱務必輸出為「英文字或數字」，避免使用中文字。網路所使用的網頁檔或圖片，皆以「英文字或數字」為主，避免且不建議使用中文字來命名。
肆、圖片上傳，原始碼修改
1.將圖片全部上傳至FTP網頁空間。
2.修改網頁原始碼。
利用（尋找與取代）功能，將原始碼中的images/，取代為圖片上傳後的位址。
3.取得原始碼
取得 <!-- Save for Web Slices (檔案名稱.psd) --> 至 <!-- End Save for Web Slices --> 之間的語法，貼到網頁或是電子報的原始碼中，即可連線觀看到廣告頁動畫。
留言列表