最新 New

[公告]草監網路更改網址至gratch.tw

[經驗]廣告banner製作,Flash banner壓K秘笈

草監網路已從Blogger搬離至獨立網站https://gratch.tw/ ,將於3秒後自動跳轉

這是一門寧願不要學到的技巧,因為廣告banner很容易修修改改,尤其是flash banner,每次改幾乎都會動到影格,三不五時就會覺得要重做之類的感覺,一整個就是無底洞深淵,但是現在活動網站這麼多,廣告平台也很多,所以這樣的經驗與技巧還是需要傳承的,我只能說希望大家以後可以漸漸不需要用到這篇了。 

JPG靜態圖片Banner

banner壓K密技 通常圖片型banner大概都會抓到40K~50K左右,jpg壓K還蠻容易,通常做完可以用photoshop輸出,預設集的地方可以選擇輸出JPEG高中低,或者可以調整品質的百分比,比例越低畫質越模糊,然後再用jpegmini,可以將jpg最佳化到最小size,我個人會用imageoptimimageoptim不只可以壓jpg還可以壓gif與png,所以可以一次性將所有的圖片檔案都最小化,還蠻不錯的,最重要的是imageoptim是免費的,不過mac only喔。

Facebook本身有文字不得超過20%的限制,所以設計完草稿記得到網格工具檢查是否有符合20%的規範。

GIF動態圖片Banner

GIF Banner的K數限制也是在40K~50K左右,通常大概可以做3~4個場景的動態,如果場景不多,可以盡量用256色來製作,但是如果要壓K,通常就只能從256色開始減少,比方說換成128色或64色,再來混色的百分比也可以往下調整,要注意banner輸出的結果會不會看起來很馬賽克,畢竟顏色少混色又低,結果就是會像馬賽克磁磚的感覺,不過個人覺得比jpg模糊好看一點,最後一樣可以用imageoptim在最佳化一次,大概可以少個0.5%以上,不會影響到動態的GIF,可以安心使用。

Flash動態swf Banner


製作Flash Banner有三個重點:壓K、埋code、墊檔圖。說到Flash Banner,應該是很多設計師最煩惱、最討厭、最不想做的一個種類,三不五時就會遇到可能要重做的下場。目前Flash cc 2015僅支援action script 3,但大部分廣告平台都只支援action script 2,也就是說如果你要做Flash Banner,最好的Flash軟體一定不是最新版,再來Flash僅能支援降低一個版本,所以目前最好製作Flash banner的版本,我個人會覺得是Flash CS6,同時支援action script2 與action script 3,而且版本也夠低,不同版本的Flash做出來的檔案大小其實不太一樣,印象中我有聽過好像用CS4做出來的檔案最小,不過因為我沒有這麼老的版本所以沒辦法比較。

再來元件的部分,當然會先用Photoshop處理每ㄧ卡的畫面,畢竟要先跟客戶過稿,Photoshop在修圖上也比較優勢,所以會先在Photoshop處理完後,再逐成輸出PNG或JPG,包含文字也要輸出成圖片,然後我會使用imageoptim對圖片進行一次檔案最佳化然後再匯入Flash中,接著製作動態完成後,統一在發布設定裡設定JPEG輸出品質約50,通常以兩個場景約四卡的動畫來說,就可以壓在40~50K以內,如果還是超出一點,一些K數較大的元件我就會設定JPEG輸出品質約30,文字部分因為是純色,設定品質10其實都還好。
再來Flash的部分一定要記得要埋Click tag,也就是要寫action script在一顆透明大按鈕上,每個平台的action script的code都不一樣,以下列出一些我最近有使用過的action script2的click tag code:

--------------google--------------
on (release) {
getURL (_level0.clickTag, "_blank");
}

--------------yahoo--------------
on (release) {
if (_root.clickTAG.substr(0, 5) == "http:" || _root.clickTAG.substr(0, 6) == "https:")
{
getURL(_root.clickTAG, "_blank");
}
}

--------------mobile01--------------
on (release) {
getURL (clickTAG, "_blank");
}


想知道埋code是否正確?Google有提供工具來檢查是否有正確埋code,但是只能撿查要投放到Google的Banner,其他部分可能還要等廣告上刊測試後,如果有問題廣告商會跟你說的。

最後就是Flash banner都需要一張墊檔圖,通常是動畫的最後一卡,這個部分如果有photoshop排版,可以從photoshop輸出,但是既然都用Flash了,就統一用Flash來做吧!只要將動畫的時間軸拉到最後一卡完整的畫面,然後選擇檔案>匯出>匯出影像,然後按下儲存,之後會跳出設定畫面,請選擇完整文件大小,即可匯出最後一卡的畫面當作墊檔圖使用。
當然墊檔圖盡量不要太大,因為也要在40~50K範圍裡,所以我會設定品質為90,如果是100的話有時候還是會超過50K,所以設定成90可以確保一定少於50K。

HTML5 Banner


目前各大平台可以完整支援HTML5 banner的不多,而且HTML5 banner製作方式也蠻多樣的,但目前最簡單的做法就是把Flash做好的swf直接使用Google Swiffy 做轉檔的動作,你可以觀看各廣告平台的規範,裡面還是會提到要在Flash中埋code,在使用Google Swiffy轉檔。Google Swiffy會將swf轉成HTML5 banner,並且將圖片元素轉成base64格式,所以只要一個html檔案就可以完整呈現整個banner,當然如果使用flash製作完成後還要打開瀏覽器上傳轉檔,感覺是挺多此一舉的,所以Google有推出Flash外掛,讓你只要多點幾下就可以直接轉成HTML5 banner。
安裝好Swiffy Extension之後,你就可以在最上方工具列的命令>Export as HTML5(Swiffy),即可輸出HTML5 banner,輸出後記得確認是否有在150K限制內,如果沒有,一樣可以像swf壓K,在發布設定裡調整JPEG品質,即可降低K數。

資料整理

因為每個平台要埋的Code不同,檔案大小限制也不太一樣,每次一波廣告可能同時2~5個以上的廣告平台,所以建議每一個平台的廣告banner的要有自己的資料夾,這樣才會比較好核對所有的banner,如果banner之後有修改,建議在資料夾上除了有平台名稱以外,也可以押上日期,這樣才不會太過於混亂,導致找不到Banner。

留言