大多數標誌都是為一個靜止的表面設計的。招牌、名片、網站角落、產品標籤——每一個都給標誌全世界所有的時間。影片正好相反。它給標誌的,是一個常常只有幾公分寬、還經常移動的畫面裡的幾分之一秒,然後就切走了。能在那種轉換中活下來的標誌,很少是那些在大型看板上最好看的。它們是那些一開始就抱著「小畫面、快速一瞥」去畫的。
這就是影片標誌背後的全部需求。它不是主標誌的縮小版,也不是事後硬加上動畫的主標誌。它是一張為影片施加的條件而生的「姊妹圖」,而只要你清楚哪些決定才算數,把它做對大約一小時就夠。以下就是那些決定。
為什麼主標誌通常在影片上會失敗
先從算術開始,因為它幾乎解釋了每一種失敗。一個在 300 像素網站標頭上成立的標誌,被要求在整寬可能 1080 像素、而標誌自己只佔其中約五分之一的畫面裡撐住。接著它被壓縮、在白天的手機上觀看、然後被滑過去。每一個依賴精細細節的元素,現在都消失了。
有三個具體的東西會壞掉,順序如下。
細線條最先消失。一條髮絲線、或一個在大尺寸下顯得優雅的精緻襯線體,到了影片尺度會變成一團淡淡的灰汙,而壓縮又讓它更糊。標誌保住了大致的形狀、卻失去了個性,這說不定比整個消失還糟。
接著是精細的次級元素。一個有十幾條內部線條的紋章、一個有精繪 & 符號的字標、一個有內部紋理的圖示——這些全都会殘留成模糊的雜訊。影片編碼器天生就是為了丟掉這些細節所由構成的那種資訊。
字標最後才會變得讀不出來,而這正是人們最愛爭執的一點。在某一尺寸以下,字母就不再是字母。它們變成節奏和質感,意思是觀眾再也不能從畫面上讀出你的名字——只能認出「那裡有過一些文字」。如果任務是「被認出來」,那字標做的功,還不如它佔掉的空間來得多。
壓縮會最狠地打擊這些細節,是有機械上的原因的。影片編解碼器會把位元分配給「幀與幀之間變動的東西」,而精細的靜態細節,要在整整一秒的畫面裡保留是很貴的。實務上的後果記錄在 MDN 的影片編解碼指南 裡,在決定一個小標誌能承受多少細節之前,值得先掃一眼。
最能省下重做的規則:先做小框
直覺是去做最大的版本再縮小,因為大畫布能顯示更多細節、感覺上也更有發揮空間。但對影片來說這是錯的方向,而且每次都要賠掉一個下午。
去設計你將會發布的最小位置,再往上放大。那個表面通常是頭像——一個圓形裁切,顯示寬度只有螢幕的一小部分,坐在留言串裡某個帳號名旁邊。如果標誌在那裡撐得住,它在每個更大的尺寸都撐得住,因為其他每個位置都只是「同樣的圖、更多像素」。如果它在那裡失敗,你是在一小時內就學到了,而不是在做出並匯出一段完整動畫、結果在最關鍵的地方根本看不清之後才發現。
實務上的說法:把標誌放在方形的內切圓裡,大約維持在中間百分之七十的範圍,並在手機的真實顯示尺寸下檢查。不是用設計工具放到 400%,也不是在桌機螢幕上。這兩種視角,正是一個好標誌發布出去卻是壞掉的原因。
靜態版和影片版之間,實際改變的是什麼
一旦你接受影片版是姊妹圖、而不是複製品,決定就會變得具體。以下這些是真正有回報的。
去掉副標語。任何排在名字之後才讀到的東西——一句標語、創立年份、城市——在影片版裡都該消失。在可用的時間內根本讀不到它,而且它佔掉了標誌需要的空間。
加重線條粗細,而不是減輕。影片會透過縮放和壓縮把邊緣變軟,所以一條在靜態檔案同樣尺寸下看起來剛好的線,在螢幕上會顯得更細。要在來源裡補償,而不是在匯出時。
把符號簡化成單一個概念。如果主標誌帶有符號、字標和副標語,影片版保留符號。如果符號本身有主要形狀和次要形狀,影片版保留主要的那個。
選一個能活過圓形裁切的形狀。橫向拉寬的組合會掉兩端;把元素釘在角落的標誌會掉那些元素。一個緊湊、瘦高或對角線的構圖,在圓形裡什麼都不會掉。
去掉細外框。精細的線條是壓縮第一個移除的東西,而一個消失的外框,會讓標誌看起來「沒畫完」,而不是「極簡」。
尺寸講得夠多了:影片標誌通常被看兩次
有一個介面,這整個問題已經被解決了,而且值得研究、而不是從頭發明。電視台的品牌實務已經花數十年弄清楚:當一個標誌必須在被縮小、裁切、複製到數十個情境、並顯示在任意背景之上時,會發生什麼事。從中產生的慣例是很明確的,其中有一條直接相關:標誌應該「乾淨地到達」,而不是「裝飾地到達」。
YouTube 發布它自己的頻道美術與頭像指南,原因大致相同,而且它對尺寸和安全區異常具體。根據 YouTube 的頻道品牌說明文件,重點是:頭像以 98 × 98 像素顯示,而且不建議額外的裝飾——邊框、陰影、外框。一個需要邊框才能在影片上成立的標誌,在影片上並不成立。
至於畫面比例,同一個來源給出了實用的數字:YouTube 的影片比例與分辨率指南 把 9:16 直式、1:1 方形和 16:9 寬螢幕定義為重要的形狀,並建議直式用 1080 × 1920。這正是一個影片標誌真正需要的匯出組合:同一張圖的三種呈現,再加上一張給頭像和縮圖用的靜態圖。
注意,這些來源沒有一個描述的是「單一主檔」。每個平台都期望一組、為每個位置調過尺寸的檔案,並把其他做法都視為妥協。刻意去建這組檔案,就是「在各處都看起來對」和「在各處都看起來大概對」之間的差別。
動態改變了圖該做的事
靜態標誌只有一個任務:被認出來。影片標誌有兩個——被認出來,以及在一個時間預算內完成一個動作。這第二個任務,正是讓影片標誌成為「不同的設計問題」、而不是「比較小的設計問題」的原因。
那個動作很短。進場、定格、退場。出場在「一秒以內」是實務目標,因為滑動動態牆的觀眾,在標誌還沒完全出現之前,就已經在決定要不要繼續看了。
由此產生三個設計上的後果。
圖在它到達的那一刻,就必須看起來已經完成了,而不是「還在組裝途中」。如果標誌是由會組裝起來的零件構成——字母飛入、符號旋轉到位——觀眾只在序列最後幾分之一秒才看到完整的品牌。中間狀態必須也要認得出來,否則動畫就是把「被認出的預算」花在過程上、而不是花在結果上。
會移動的元素,需要足夠的間隔才能「移進去」。一個擠得很密的組合讓動畫無處可去,所以進場只好做成淡入、或從無到有的縮放——而兩者都顯得千篇一律。在影片版裡把構圖稍微放鬆一點,就為一個刻意的進場創出了空間。
結尾狀態必須是一個乾淨的定格。如果序列結束在一個稍微旋轉、或部份透明的畫面上,那個畫面就會變成觀眾記住的影像。最後一格應該是標誌,被妥善地呈現,並定格得夠久、足以被登記下來。
有一個文獻充分的論點,支持把這一切保持克制。Nielsen Norman Group 關於介面動畫的研究 清楚劃分了「傳達狀態改變的動作」與「為了動而存在的動作」,並發現後者花掉的注意力比它換回來的還多。標誌的進場是一種狀態改變——內容開始了——所以它合格。但一個帶有旋轉、彈跳和粒子爆裂的標誌進場是裝飾,而且它正好花掉了開場本該買到的那個資源。
一套可行的流程,從頭到尾
以下這個順序能避免重做,它是根據「引起最少問題的序列」排的。
一、把標誌匯出成 SVG,或匯出成可用的最高分辨率的透明 PNG。把檔案放在深色背景上實際看過,來確認透明度,而不是相信匯出對話框。這一步絆倒的專案比其他任何一步都多,因為一張從簡報裡取出來的 JPEG,帶著一個看不見的白色長方形,一旦背景不是白色,就會變得異常顯眼。
二、先做圓形頭像裁切,並在手機上檢查。這是整組其他檔案都繼承下來的那個限制。
三、如果字標在那個裁切裡已經不再清晰可讀,現在就做決定:把它從影片版裡去掉,只保留符號。等動畫都已經做好再決定,就代表要重做動畫。
四、把進場設計成一個「一秒」的概念,然後從同一個來源匯出三種比例,這樣時間點才不會在它們之間漂移。
五、從序列結尾那個乾淨的定格匯出一張靜態幀,並把它當成頭像和縮圖的候選。
六、在手機上、以動態牆尺寸、靜音看結果。如果進場在沒有聲音的情況下依然看起來是刻意的,那時間點就達成它的任務了。你可以在 <a href="/logo-animation-templates/logo-video-maker">logo video maker</a> 頁面上實際看到這套流程,或是從我們 <a href="/blog/new-video-logo">從零開始打造一個新影片標誌</a> 的實作導覽中,比較不同生成方式在同一個檔案上做出的結果。
最花時間的錯誤
以下四個,佔了人們回報的重做中的大部分。
從最大的版本開始、再縮小。它感覺有效率,卻把失敗藏到最糟的那一刻才暴露。
重複使用網站用的匯出檔。一個為網站標頭匯出的標誌,常常是被壓平過的,有時還在白色背景上,而且很少到能撐住直式畫布的分辨率。請從來源檔案重新匯出。
把動畫當成設計本身。動態救不了一個在小畫面裡讀不出意義的構圖——它只能讓那個問題被多注意一下下。
相反的錯誤也存在:花好幾週去做一個極度精簡、卻不再有辨識度的版本。一個完全為 40 像素圓形優化過的標誌,可能會丟掉那個讓它被認出來的形狀。
常見問題
我可以把現有的標誌用在影片上嗎?
通常可以,但不是用那個現有的檔案。拿來源圖稿,專門匯出一個給影片用的版本:更重的線條、不要副標語、以符號為優先,並確認透明度。圖可以是一樣的;匯出必須不同。
影片裡的標誌應該多大?
沒有單一數字,因為它取決於位置。可行的做法是對著最小的那個表面——圓形頭像——來設計,再從那裡往上放大,然後從同一個來源匯出 9:16、1:1 和 16:9 三種呈現,讓三者一致。
標誌應該出現在影片的開頭還是結尾?
如果觀眾是為了這個標誌才看的——品牌內容和開場標誌就是這種情況——就放開頭。如果觀眾是為了內容而來、標誌只是個簽名,就放結尾。兩個地方都放很常見,而且通常是個錯誤,除非這支影片不到十秒又會循環。
影片版需要字標嗎?
在決定之前,先以顯示尺寸檢查它。如果字母已經不再讀得出來,那字標就是佔著空間、卻沒在傳達名字——而且在多數平台上,帳號名本來就會以文字印在標誌旁邊,這讓它既冗餘、又讀不出。
一個影片頻道需要幾個標誌版本?
四個工作檔:給頭像用的圓形靜態圖、給縮圖和動態牆位置用的方形靜態圖、一個直式動畫,以及一個寬螢幕動畫。這四個都來自同一張圖,所以成本在匯出這道手續、而不是在設計。
重點整理
拿你的標誌檔,用它被真正看見的尺寸打開它——手機上的一個小圓形、在日光下、在一個已經在移動的動態牆裡。如果你看不出它是什麼,那影片版就還不存在,不管主標誌看起來多好。在碰動畫之前先修好圖,因為動態會把構圖已經在做的事放大:它讓清楚的標誌更清楚,也讓擁擠的標誌更混亂。誠實的測試只要兩分鐘,而且它是唯一能預測這個標誌在它真正居住的地方會表現如何的測試。