YouTube 的頻道頭像顯示為 98×98 像素。這比大多數人匯出 4000 像素主檔後就覺得搞定時所想像的還要小。在它旁邊,頻道橫幅拉到 2560 像素寬,在電視上卻只露出一小部分。而在每支影片的結尾,同一個標誌還得和兩個競爭對手的縮圖並排,且不能變得無法辨識。
YouTube 的動畫標誌並不是一份素材。它是一個標誌,畫一次再適配到三個幾乎沒有幾何共通點的框裡——然後對這三者動畫一次。順序搞錯,你會把標誌重畫三次;順序做對,整件事只是一個下午。如果你之前沒動畫過標誌,請先從動畫標誌的基本觀念開始。
YouTube 動畫標誌必須填滿的三個框
把每個版位當成設計限制、而不是縮放尺寸的動作,會有幫助。這三個版位除了標誌本身,沒有任何共通點。
頭像是正方形,在圓形裁切內顯示,而且很小。那個正方形內接圓以外的部分都會被切掉,所以標誌必須在設計上就待在圓裡——而不是一個剛好周圍有留白的長方形。
橫幅很寬、而且大多看不見。YouTube 在 2048×1152 像素的上傳裡顯示一個 1235×338 像素的安全區,而電視還會裁得更狠。落在那個中央條帶之外的任何內容,都只是給某一種螢幕尺寸的裝飾,是加分、但絕不是設計的前提。
結尾畫面是唯一會牽涉其他人的地方。你的標誌會以一個小圓形元素,出現在影片卡片和訂閱按鈕旁邊,蓋在你無法控制的畫面上。它得在同一個觀看時段裡,既能在一個明亮的說話頭像前讀得出來,也能在一個暗沉的打鬥場景前讀得出來。
先設計 98px 的頭像
從最小的尺寸開始,再往上做。不要反過來,也不要拖到最後才當成檢查。
道理很簡單。由大改小會丟掉細節:你在橫幅尺寸下畫了一個讀起來很漂亮的字標,結果到了頭像尺寸才發現字母塌成一團灰,而現在得重畫。由小放大則什麼都不會丟,因為一個在 98 像素下能讀出的標誌,在它之上的任何尺寸都能讀出。小版本才是限制;更大的版本只是你本來就不需要的餘裕。
實務上,這表示你在處理頭像時,要把它設計成一個獨立的符號,事後再為橫幅和結尾畫面加上字標。這種區隔,正是以字母組合標(monogram)為核心製作標誌 GIF 或任何小尺寸素材背後的道理:能通過最嚴苛裁切的版本,才值得拿去動畫。
選定一個在圓裡也成立的標誌
有兩種形狀在圓形裁切下總是失敗。任何重要內容落在邊界框四角的——左右齊頭排滿的字標、符號在名字旁邊的組合標——都會失去名字的兩端。而任何以寬矩形建構、內部間距依賴那個寬度的,一旦圓形咬進去,看起來就會偏心。
解法是用「這個框已經是圓形」的心態來設計。把標誌留在正方形內接圓之內,四周保留約直徑百分之八到十的呼吸空間;如果品牌有字標,把它當成寬版位專用的獨立素材,而不是非得在頭像尺寸出現的東西。字母組合標加上一個可選的字標,就是能通過這三個框的結構。
用真實尺寸測試標誌,而不是放大看
用 4000 像素設計,用 98 像素判斷。把標誌以真實顯示尺寸匯出,放在手機上、手臂伸直的距離,在一秒內看它。細線條會消失,負空間會縮起來,任何漸層都會變成一塊平面的中間色。能通過這項測試的,才是你拿去動畫的那個圖。
讓人不安的是,這項測試通常會殺掉標誌最有趣的版本。但這不是跳過它的理由。每個用精細插畫當頭像的頻道,最後都會替換掉它,而他們替換成的,往往就接近這項測試一開始就會產出的東西。
動態也得在頭像尺寸下讀得出來
同樣的道理也適用於動畫,而這正是大多數頻道標誌失敗的地方。由滑入、縮放和旋轉組成的進場,在 1080 像素下讀起來還行,到了 98 就變成無法辨識的糊塊,因為那全都是位置與大小的移動,而在小尺寸下眼睛追蹤不到。
能在小尺寸存活的是形狀與不透明度的變化:一個擦除、一個描繪成形、同一個輪廓兩種狀態之間的淡入淡出。這些讀起來像「狀態改變」而不是「移動」,即便在縮圖大小的元件上也會立刻被辨識。
這背後的機制記載在 CSS 動畫模型裡,它把可動畫的屬性分成能平滑插值與不能平滑插值兩類:w3.org — CSS animations specification。opacity 與 transform 能乾淨又便宜地插值;任何會在動畫中途強制整個版面重算的,渲染起來更重,在小尺寸下也更難讀。無論動畫是在瀏覽器裡跑還是渲染成影片,同一個原則都成立。
還有兩個限制來自平台。第一,動畫必須落定並停留——頭像只是被瞥一眼,所以標誌在絕大部分播放時間裡都應該處於最終狀態。第二,如果這份素材會被當成動態縮圖或用在開場,迴圈點應該回到首幀,因為一個用明顯跳動重置的動態標誌看起來像壞掉了。
動態結尾畫面與開場
除了頭像之外,動態頻道標誌還有兩個能派上用場的地方。
第一個是短促的頻道開場——一到三秒,標誌進場、停留、消散。控制在三秒以內,因為開場的每一秒,都是內容開始前花掉的觀眾留存時間。那種格式更精簡的版本,就是標誌開場動畫,它的首幀是設計成能獨立成立的。
第二個是結尾畫面。YouTube 自身關於頻道品牌的文件,要求創作者不要替那些和其他頻道卡片並排出現的元素加上投影、邊框或外框,因為平台本身已經套用了自己的處理,疊加效果會讓版面變得雜亂。因此,結尾畫面裡的動態標誌應該是乾淨的邊緣、自成一格,不要為了強調而加光暈或輪廓線。
這兩個版位和頭像共用一條規則:以處於最終狀態的標誌打頭陣。YouTube 自己的指引是,上傳至少 98×98 像素、會在圓形中顯示的頭像,並把橫幅的訊息保留在 1235×338 的安全區內——2048×1152 上傳中其餘的部分經常會被整個裁掉:support.google.com/youtube/answer/10456525。正如那份文件所說,橫跨整個上傳寬度設計的橫幅,在桌機上會看起來置中,在電視上則兩邊都會消失。
一支動畫,三種匯出
針對頭像裁切把動畫做一遍,再依頻道需要的每個比例匯出。時序、緩動與停留保持完全一致;改變的只有標誌周圍的畫面。
簡單清單:為靜態與動態的個人檔案素材,做一份頭像與縮圖尺寸的方形匯出;為頻道橫幅區以及任何網站或媒體用途,做一份橫式匯出;為開場與結尾畫面,做一份 16:9 匯出。如果頻道也發直式 Shorts,再加一份 9:16 的精簡版——同一個來源檔、同一個節拍對齊。
這裡的匯出位元率比一般影片更重要,因為平坦背景上的高對比標誌,正是壓縮失真最先現身的地方。以 H.264 的 High profile 匯出,關鍵影格間隔約兩秒,資料速率高於平台對一般影片的建議值,就能讓細線條不出現振鈴。
同一個對話框裡還藏著第二個匯出決定。放在純色背景上的標誌,對色彩空間的錯誤異常敏感,值得確認容器帶的是你預期的數值,而不是假設預設就是對的——差別會表現為某個品牌色在別人螢幕上悄悄偏移。檢查某個格式如何處理中繼資料,是這份工作的一部分,而不是事後才想:developer.mozilla.org — format handling reference。
標誌還會出現在哪裡
頻道標誌不只活在這三個官方框裡。它會出現在 YouTube 沒給你規格表的地方,而那往往正是動態版本最派得上用場之處。
縮圖是最明顯的一個。縮圖角落一個小標誌是辨識線索,而當它在每支影片上都一模一樣——同一個位置、同一個大小、同一種處理——時效果最好。一旦那個角落標誌在不同上傳之間移來移去,辨識價值就會崩塌,淪為裝飾。
第二個是 Shorts。同一個標誌的直式精簡版,可以作為 Shorts 的結尾卡,而 9:16 的畫面,正是從單一來源檔做出的標誌影片派上用場的地方——時序原封不動延用,改變的只有標誌周圍的畫面。
第三個完全是平台之外。同一個動態標誌最後會出現在電子郵件簽名、媒體資料包、Discord 伺服器和贊助商簡報裡。這些全都是把來源檔放在同一處、而不是每次有人要一個版本就重做動態的理由。
值得記在心裡的一個對照
這三個版位的差別不只是尺寸,而在你開始匯出之前,把差別列在同一處會有幫助。
頭像——正方形、在圓形中顯示、螢幕上約 98 像素、在一秒內被判定、最適合做成帶有實色或簡單對比背景的獨立符號。
橫幅——很寬、任何必須保持可見的內容實際上是 1235×338、以 2048×1152 上傳、在桌機和電視上以不同裁切被閱讀、最適合把標誌放一側、把訊息留在安全帶內。
結尾畫面——小、圓形、蓋在無法控制的畫面上、和影片卡片與訂閱按鈕競爭、最適合做成邊緣乾淨、不另加輪廓線或陰影、用短暫停留而非長動畫的標誌。
一個標誌、一種動態語言、三組數字。把數字寫在匯出檔旁邊,這樣下一個經手這個頻道的人,才不會憑記憶重做標誌,結果偏離節拍兩格。
常見問題
YouTube 頻道標誌應該多大?
至少上傳 98×98 像素,有的話更大更好——平台自己的指引是頭像最小 98 像素,而它會在圓形裁切內顯示。用 4000 像素設計,但用 98 像素判斷,並把一切重要的內容留在正方形的內接圓之內。
YouTube 頻道標誌可以做成動態嗎?
頭像本身是靜態圖片,但同一個標誌可以為開場、結尾畫面、動態縮圖以及每個平台外的版位做動態。針對頭像裁切做一支動畫,再以你需要的各種比例匯出,這樣標誌出現在哪裡,時序都完全一致。
為什麼我的標誌當頻道頭像看起來很模糊?
幾乎都是因為細線條和精細細節。在 98 像素下,一像素的線條不是消失就是閃爍,而且通常是閃爍。把圖簡化到能在最小尺寸站穩,提高標誌與背景之間的對比,並動畫簡化後的版本,而不是精細的版本。
我應該把頻道名稱放進標誌裡嗎?
把名稱當成獨立的素材。字標在頭像尺寸下讀不出來——字母會塌成一團灰——所以用字母組合標作為主要標誌,只在橫幅、開場和結尾畫面再加上字標,因為那些地方有寬度可以花在它上面。
頻道開場動畫應該多長?
一到三秒,而對每週發片的頻道來說更接近一秒。標誌快速進場、停留一拍,在觀眾的注意力必須重新爭取之前消散。更長的版本是用留存去換一個標誌,而這對你發布的每一支影片來說都是一筆爛交易。
重點總結
用 4000 像素設計,用 98 像素決定。這一個習慣——在橫幅之前先為頭像裁切做標誌,以及動畫「形狀改變」而不是大幅的位置移動——正是產出一個能在三個版位都成立、不必二度重畫的 YouTube 動畫標誌的關鍵。頻道頭像多數觀眾唯一會以完整大小看到的版本;其他一切都只是圍繞它的背景。在你決定做動畫之前,可以在瀏覽器編輯器裡用自己的標誌測試小尺寸裁切。