《同步Melody》網頁的頁頂圖會隨機出現，近日再加入兩款動畫gif檔，令全部共有６款之多，看看你能否掀中以下精心製作的動畫gif頁頂圖。
本人以前慣用萬能的Corel Photo-Paint，而Photoshop近年才在最新版CS6中加入更多支援網頁製作的功能，包括動畫gif。以下以其中一幅《同步Melody》網頁的頁頂圖，分享製作動畫gif檔的心得，由於只是運用了最簡單的透明度變化效果，最適合初階講解。
《同步Melody》網頁
http://towardfung.site44.com/stepsmelody/
▲1.圖片要變化的區域為頭像部分，基本上有三個埸景，每個埸景分6格，將會遂格轉換。所以為方便管理，各圖層分別放入三個群組，並為各圖層加入編號。首先，選視窗>時間軸，在出現時間軸視窗後，直接按建立視訊時間軸。
▲2.視窗出現視訊時間軸，先將所有群組及圖層打開，以至見到各圖層出現三項分別為位置、不透明度及樣式的項目。
▲3.紅直線的時間線在零的時候，在每個圖層都按下不透明度項目，以令位於該時間線的所有圖層都出現菱形符號，表示所屬圖層在這個時間線上有所變動的記錄。再圈選所有菱形符號，right click將線性內插補點改為保持內插補點，這時菱形符號會變成方形符號，而以後的內插補點亦同樣要這樣改成方形符號。由於只有群組1的圖層在零這個時間出現，所以需在圖層視窗將其餘群組2及群組3的所有圖層的不透明度改為0%。這樣便完成了第一格動畫的設定。
▲4.時間軸上的f刻度不用在意，稍後有更方便的方式更改每格動畫的顯示時間。這樣每設新一格動畫格移動一次紅直時間線，在需要顯示或隱藏的圖層處記錄下內插補點，並同時於圖層視窗的不透明度調較100%(顯示)及0%(隱藏)即可。然後按左下方的三方形按鈕，將時間軸顯示方式轉為影格動畫。
▲5.將時間軸視窗的顯示方式轉為影格動畫後，就變成以上這樣子。
▲6.這時可選取各動畫格來更改顯示時間，以上暫先統一改為0.1秒。而左下方有個按扭可設定整個動畫反複循環的次數，以上設為永遠。
▲7.為使那特定的三個埸景停留更久，便將那三格動畫格改為8秒。要令所有動畫格轉變更得順滑，利用左下方的點點按扭，增加補間影格數。以上為每一動畫格之後加入一格補間。
▲8.記得隨時儲存，否則前功盡廢。然後往檔案>儲存為網頁用，便會開出一個動畫gif的專用設定視窗。
▲9.在動畫gif的專用設定視窗中，除了可調較組成色素及混色方法外，最好的還是可以在這裏試播最終效果如何，而且也能改變解析度。調較好儲存便大功告成。
留言列表
