Class LLL / 設計星團教材目錄編輯與來源

Photoshop 教材 / Class LLL

影格動畫與時間狀態

同一來源，哪份狀態隨時間改變？

把來源、逐格屬性與播放緩衝分開，檢查延遲、補間和透明拖尾，不把構圖方案當成動畫。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 26 分鐘

開啟互動教材查看參考來源

閱讀目標

適用條件與學習範圍

現在換的是原像素、這一格的屬性，還是播放器留下的前一畫面？

能區分圖層構圖方案與時間序列，辨認延遲和補間；用真正輸出預覽檢查循環、透明與處置。

Windows／macOS Photoshop桌面版官方操作；網站限RGB8原創RGBA、最多八格，不做GIF／影片編碼或Adobe補間重現。

原理與判斷

同一層看起來在動，可能是位置、眼睛或內容隨時間改變。增加影格不一定保存另一份像素；預覽順暢也不證明GIF已正確編碼。先指出時間和資料責任，才能找到改錯格、全格一起變及透明拖尾的原因。

先分問題：圖層構圖方案不是時間序列

同一份海報的兩種設計，可以用圖層構圖保存方案；只有方案順序，沒有每格延遲、循環或連續播放責任。影格動畫則把一系列顯示狀態和停留時間串起來。適合短小的逐格標記、圖示或循環，不代表適合長影片剪輯。先寫出「哪一層、哪個屬性、哪個時間」；若只想比較版面，回到構圖方案，不必加時間。終點是能指出要保存設計選項，還是要交付會播放的序列。

靜態圖層與視訊圖層：同一層不一定同一瞬間像素

靜態像素層的原稿不會因選下一影格自行長出新內容；影格動畫可以讓它的位置、眼睛或不透明度不同。視訊圖層有膠卷標誌，來源影像本身可隨時間改變，並可能依賴外部影片檔；移動或遺失原檔會影響交接。影片逐格編修與套用到整段的變形也不能混為一談。本站「逐格來源取樣」只輪用三份自製色樣，示意同一來源身份供應不同時間像素，沒有解碼影片。真正格式、編碼器和時間軸剪輯要按安裝版本查核，完整視訊工作流另讀後續主題。

時間軸兩模式與建立 影格動畫入口

先保留可回改母檔，在視窗 > 時間軸及視窗 > 圖層開面板；時間軸中央選建立 影格動畫並建立第一格。若顯示建立 視訊時間軸，先用選單切換目的，不要把軌道時間標尺當成影格縮圖。需要移動或透明的背景先轉一般圖層。影格模式用縮圖選格，視訊時間軸用軌道與時間指示器；模式轉換可能失去插值關鍵影格等資訊，先另存副本。終點是知道目前在編哪種資料，而不是看到時間軸就假設功能相同。

新增、複製、刪除影格：狀態數不等於來源層數

在時間軸選一格或多格，以複製 Selected 影格新增所選狀態；選格後刪除的是序列項目，不是圖層原稿。若要用不同內容，先另備來源層，或明確選建立新圖層 for Each 新增 影格，這是另一個面板選項，不能把duplicate 影格自動解讀成深複製像素。本站複製格只複製x、眼睛、不透明度、參照眼睛、延遲及處置，來源一直是兩層，最多八格、至少一格。若改筆觸後全部格都變，先檢查是否仍共用同一原稿，不要用更多重複格補救。

從圖層建立影格與反轉 影格

已有各姿勢圖檔時，可用檔案 > 指令碼 > 將檔案載入堆疊載入為層；建立影格動畫，再在時間軸面板選Make 影格 From 圖層。輸入層序不等於讀者想要的時間順序，先看起點與終點，必要時反轉 影格，再逐格確認眼睛和延遲。每層是否包含完整背景、透明區或只含差異，都會影響後續處置；不要只看縮圖像是站對位置。終點是在播之前就能列出來源、格序與每格負責的畫面。

選格再編眼睛、位置與不透明度

先選時間軸的目標影格，再於圖層切眼睛、用移動改位置或調不透明度，逐格核對。眼睛關閉不刪除來源；不透明度影響參與合成，位置改變也不會創造新像素。本站將每格狀態列在讀數，時間滑桿和前後按鈕都選同一格；改延遲後仍停在該格起點，避免編到別格。原創A是實心方塊，B中間有真正Alpha洞；換來源會讓所有格重讀同一稿。不要推論所有筆觸、遮罩或混合設定都有完全獨立的逐格副本，遇到一起改要回查來源與統一設定。

Unify、Propagate 影格 1與新增層全格可見

Unify 圖層 Position／Visibility／樣式是把指定層的屬性在各格統一；適合固定標誌或一致效果，不適合本來要逐格移動的角色。Propagate 影格 1是修改首格時向後續格傳播相關變更，官方以相對後續格描述，不能寫成把所有原像素覆成首格。新增 圖層 Visible In All 影格只管新加入的層，不等於把目前層眼睛全部打開。本站僅實作「統一本格眼睛到全部」的明確布林套用，其它兩種行為由此區分；若動畫忽然全格一樣，先取消不合目的的統一，再逐格修，不以複製來源誤蓋問題。

延遲與總長：格數不等於播放速度

在影格下方選延遲秒數或其他輸入小數；可多選影格共同設定，新影格一般沿目前延遲。總長是各格停留時間相加，並非單純格數除以固定FPS。本站預設200／400／200ms總800ms，時間200ms已進第二格；延遲控件下限50ms是本站有界策略，不是Photoshop下限。No 延遲也不保證無限速度，播放器可能限制極短延遲。若輸出比預覽慢，先核對各格延遲和實際接收播放器，不由網站計時測得OS級精度。

循環與播放：一次、三次、持續及其他

時間軸循環選一次、3 Times、永遠或其他指定次數。它決定整段序列播幾輪，不改每格像素，也不等於選一格眼睛。本站一次／三次／持續只控制本站預覽，初始與重載都停止；按播放從首格開始，完成有限輪後停末格。換控件、離開圖解或分頁隱藏會停播；少動態模式用前後按鈕及時間滑桿完整觀察。若GIF在收件軟體只播一次，必須檢查真正檔案及播放器，網站下拉選項不會替下載PNG寫入循環。

補間補間：插屬性，不是推理中間動作

先選相鄰端點，時間軸 > 補間選補間 With（選取範圍、Previous／Next 影格；邊界可選First／Last）、影格 to 增加、全部圖層或Selected 圖層，以及Position／不透明度／效果參數。適合平移、淡入與可插值效果；換姿勢、遮擋、手繪輪廓或加速度不會自動被理解。本站只在本格與下一格插一至三格線性位置／不透明度，眼睛沿前格，沒有效果 solver；兩端X2和10、不透明度100與50插一格得到6及75。新增格沿前格延遲，總長800變1000ms；「均分延遲回800ms」是另一個明示網站策略，不是Adobe自動保時長。終點是能指出插了什麼、沒插什麼，並重核總長與首尾接縫。

處置：保留、移除或Automatic的播放緩衝

選影格的處置選單：Do Not Dispose在顯示下一格前保留目前畫面；Dispose移除目前顯示，讓下一格接手；Automatic由Photoshop按影格判斷。責任是播放器的暫存畫面，不是刪除來源層、刪序列格或把目前文件清空。透明處會露出前畫面時，保留可能造成拖尾；要累積筆跡則可能正需要保留。本站每格皆32×16全畫布，離開前格時Dispose與網站自動都清全緩衝，非模擬Adobe決策；再以source-over合成本格。先把首格設保留再看第二格，左窗透明位置與右窗紅色拖尾不同；改Dispose後同位置透明。終點是能用同一像素指出問題出在完整影格還是處置。

最佳化：Bounding Box、Redundant Pixel Removal與透明

時間軸 Optimize Animation可用Bounding Box縮小需存的變更矩形，Redundant Pixel Removal讓未改像素透明；官方要求這類流程搭配儲存 for Web透明與Automatic處置。這不表示邏輯畫布尺寸真的縮小，也不能把矩形面積當成GIF檔案位元組。本站第三個資料窗只比較相鄰完整RGBA格，BBox裁出變更區，RPR把完全相同像素設透明，空區以1×1透明佔位；它與完整影格、播放緩衝各有不同責任。透明刪除如何表達、調色盤、區域處置與編碼還需要真正GIF流程，不由這張PNG證明可還原。

GIF輸出與預覽：調色盤、混色、拖尾和交付

先另存PSD保留來源及動畫，再檔案 > 轉存 > 儲存 for Web (Legacy)選GIF；核對尺寸、Colors／調色盤、混色、透明度及Looping。示範中的256色或0.1秒只是例子，不是所有圖都適用；少色圖示與照片漸層的體積／色階取捨不同。跨格調色盤和dither不一致可能閃爍，改設定後按預視在瀏覽器觀察完整循環、首尾停頓、透明邊緣和拖尾，再儲存並重新開真正GIF確認。單張PNG只有當下RGBA，沒有延遲／loop；影片輸出也不是GIF改副檔名。若收件平台不播放，先分清檔案是否動畫、平台限制與播放器，不靠編輯畫面宣稱交付成功。

這個比較台能證明與不能證明的事

兩份4×4原創素材、32×16透明畫布及兩個固定來源層，沒有下載他人照片。所有放大窗、原尺寸窗口、SVG貼圖、下載PNG與讀數來自同一模型；編碼RGB source-over不宣稱Adobe色管、GIF調色盤或影片解碼。放大只方便查像素，沒有新增細節。70件既有三床、夾具與滑軌表示來源／完整格／緩衝，滑座是目前格而非輸出內容。操作先單步比對，必要才播放；保留來源再回Photoshop桌面照官方入口核對。2026-10-20讀取官方Windows／macOS桌面說明；平台快捷鍵、版本介面和影片格式需以實際安裝確認，未做Photoshop軟體或真人學習成效實測。

步驟與觀察

  1. 保母檔並指定問題

    先列哪兩層、哪個屬性隨時間變；設計備選用圖層構圖，真正時間序列才建影格動畫。

  2. 建立、排序與選格

    開時間軸／圖層，建第一格；複製或Make 影格 From 圖層後核順序，必要反轉，再逐格核眼睛、位置、不透明度。

  3. 核對延遲與循環

    逐格記延遲及總長，指定有限循環；補間後重新加總，勿預設時長自動不變。

  4. 用兩窗定位透明責任

    本站首格設Do Not Dispose、進下一格，比完整合成與緩衝同一位置；改Dispose再看，不以刪來源層修拖尾。

  5. 最佳化後預覽真正檔案

    另存PSD；GIF於儲存 for Web Legacy核色數、dither、透明和loop，預視看首尾與拖尾，輸出後重開確認。

  6. 返回補讀再驗狀態

    從圖層可見性補讀返回，檢查所選格、來源、眼睛與延遲仍在；重設只還原本站比較台，不是假稱復原Photoshop輸出。

常見問題

改一格的筆觸，所有格都一起變

影格不是原稿深拷貝；查共用層、Unify及Propagate，內容確實不同時另備來源。

新增影格同時多了一層，眼睛卻在全部格開

分開檢查建立新圖層 for Each 新增 影格及新增 圖層 Visible In All 影格，不和複製或Unify混為一談。

補間後變慢或動作仍跳

加格沿延遲會加總長；補間只處理選定屬性，輪廓換姿勢或遮擋需另外設計來源。

透明處留下上格殘影

比較完整格和播放緩衝，核處置、透明輸出及實際播放器；不能只把眼睛關掉或刪原稿。

最佳化資料很小，GIF卻沒有變小或閃爍

像素面積不是壓縮bytes；核一致調色盤／dither、透明與Automatic，實際輸出再比較檔案和播放。

PNG有畫面卻不會動

本站PNG是當下輸出；要延遲、循環與動畫編碼用真正GIF流程，保留PSD母檔。

影片換電腦後來源遺失

視訊層可能引用外檔，保存依賴與合適輸出；不要把靜態影格狀態當成影片封裝。

少動態模式不能按播放

以首格／前後／時間位置完整檢查；本站尊重少動態，沒有必要自動播放才能理解的資訊。

適用範圍與證據

原教材查核日期：2026-10-20 適用範圍：Windows／macOS Photoshop桌面官方入口；RGB8原創有限RGBA／時間示意。 來源狀態：13篇Adobe primary實讀；日期及歷史／平台界線見各來源與研究紀錄，完整影片主題沿相關知識補讀。 示意限制：兩4×4原創來源、32×16畫布、最多八格；線性位置／不透明度、明定全畫布處置與相鄰資料比較。 原生軟體實測：未Photoshop實測，沒有真GIF／影片編碼、AI補間或Adobe壓縮求解。 學習成效驗證：沒有真人學習成效證據。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。

相關知識