前言
有些人的Steam個人頁面有經過客製，做得相當精美，這邊筆記一下如何在工作坊展示欄放置動畫影片，工作坊展示欄影片、就像下面這樣：
簡易流程、以流程圖說明
工作坊展示欄算是客製Steam個人頁面中的入門級，其流程大致如下：
簡易流程、以文字說明
簡易流程如下，詳細流程請自行找相關資料
- 找到想要的影片片源、或者自行製作影片。
- 想辦法轉成 GIF 動畫格式。
- 將原始 GIF 調成寬度 766px (也有其它寬度，這邊我是用 766px)
- 將 766px 的 GIF 切成五等份 (150*5個檔案、外加每個檔案有4px間隔、共4*4=16)。
- 進行微調，各別GIF檔案不得超過5MB大小。
- 修改GIF檔案內容，檔尾要用16位元編輯器把0x3B改成0x21，不然傳上工作坊時會出現大黑框。
- 使用 Chrome / Brave 瀏覽器上傳檔案，展示櫃上傳網址為：https://steamcommunity.com/sharedfiles/edititem/767/3/
- 要先在Browser console (按下F12後，在 console 頁) 輸入： $J('#ConsumerAppID').val(480),$J('[name=file_type]').val(0),$J('[name=visibility]').val(0);
- 有的瀏覽器有安全措施，例如要先輸入 allow paste 後，才能執行上述動作。
- 輸入後上傳檔案、檔名和名稱記得上編號、方便後續處理。
- 重覆上傳相關動作，沒問題的話檔案會上傳到工作坊。
- 在Steam個人頁面中，新增工作坊展示欄，依序把上傳的 GIF 佈置好即OK
麻煩點
至於為什麼要搞得這麼麻煩，是因為Steam個別檔案只接受最多5MB大小，如果GIF只用766px寬度單一個檔案，影片會5MB限制而要大量犧牲畫質、造成影片根本不能看。
另外整個過程、哪邊最花時間? 影片製作這部份就看個人，不過後續GIF切割和調整，常常用上不少時間，加上如果放到工作坊後、發覺某個GIF檔不對，又要整個調整；另外大部份的文章、都很剛好的教你切割成5等份時，要使用PS (沒人講使用GIMP的輔助線功能)；本人除了沒PS這套軟體外、就算用其它軟體、每次在那邊對準格線和切出剛好的大小也很花時間，而且一旦做出來的動畫檔不滿意，又要再玩一次，結果就是在那輪迴。工作坊重覆上傳太多次，小心Steam好友被動態吵到遠離你!
另外，大部份的文章也有教如果切出來的檔案太大，可使用EZGif網站來調整，這部份會視狀況會再花一些時間。
於是、自製了GIF切割工具
如果你不打算使用這工具，下面的部份可跳過了。
於是，我做了一個GIF切割工具，其功用大約包含了上面流程圖的綠色框框部份。由於是程式自動化，當然沒有使用如EZGif等來得如此可細部調整；工具功能如下：
- 將GIF影片縮成766px寬
- 將766px寬的GIF、切割成5等份、每等份150px寬、每個切割檔間間隔4px。
- 一次選多個GIF檔、將檔案最後位元改成0x21。
- 上傳工作坊前可先在瀏覽器預覽一下有沒有問題。
- 支援使用gifsicle做後段GIF減肥處理、但是要先設定好環境 (下有說明)。
程式目前只有我自己用過、完全是照我的想法寫的，如果不合用請放棄。
本工具執行環境需求：
- Windows 10/11：本人是使用Windows 11
- .Net Framework 4.8
- gifsicle：外部程式、用來做後段處理。如果不使用它做後段處理，可忽略之
gifsicle設定
在說明工具如何使用前，先講一下如何設定gifsicle。gifsicle是一個能將GIF檔更進一步壓縮的工具，在EZGif中就有內含，但是我的目標是在檔案畫質和大小還可接受的狀況下、懶惰的省下時間，於是大約只做了幾個gifsicle常用的功能、工具會自行呼叫gifsicle，不用手動介入。
- 首先，要先下載gifsicle、可以Google「Gifsicle for Windows」，找到gifsicle-[版本號]-win64.zip下載，然後將它放在某個地方，例如我是放在 E:\Tools\gifsicle
- 接著在Windows 11中：設定-->系統-->系統資訊，在該頁中間的地方，有個進階系統設定，點進去後，有個環境變數項：
- 修改使用者環境變數「Path」。把gifsicle的位置加進去後存檔：
GIF切割工具說明
下載下來後，解開並執行SteamGifCropper.exe (載點在最後面)：
說明：
- Split Gif file into 5 parts with gifsicle：將766px寬的GIF切割成等份，這是本程式的主要功能：
- 它會切成150px寬的檔案5個，跟原GIF在同一資料夾
- 如果有勾選「Enable gifsicle optimization」的話，切出來的GIF會依設定的參數、在背景叫出gifsicle做後段處理：
- Lossy：進行破壞形壓縮，愈大愈高；預設是20，如果拉200的話會很明顯的看出來畫質不佳。程式有設定上限200
- Palette：GIF只能保有256色資訊，將這個調低的話可以減少檔案大小，例如如果原本影片整個是藍色系，那可能就算用不到256色，肉眼也看不太出來。最低最好是到64。
- Optimize：最佳化；1是基本款、3是最大
- Dither：有時壓縮過量，會產生色塊，Dither會在顏色或亮度範圍受限的情況下，取代色塊部份、模擬出更多的顏色或層次。
- None：不執行Dither
- ro64：這個看來最自然，但是檔案也最大
- o8：檔案跟ro64比會小一些、但是也較不自然
- Default：預設Dither模式，如果不自然，可使用上述二種方法。
- Resize GIF file to 766px width：將GIF檔案縮放成766px寬，可以用這功能先縮成766px後，再用上面的功能切割。
- Write Gif files last byte as 0x21：將GIF檔案最後一個位元組改成0x21；可複選
注意：工具執行速度並不算快，要等它一下。還有程式防錯沒仔細處理，請一步一步執行。
上傳工作坊前可先預覽
解開的壓縮檔中，有一個arrange.html、雙點擊執行它後，可以先在電腦上先預覽動畫長什麼樣子；首先、使用Chrome或是Brave瀏覽器執行它 (Firefox似乎不正常)：
有五個「Upload GIF Part」按鈕，請分別由左至右分別選取Part1~Part5的GIF後，影片看起來會很亂，接著請按下「Replay all GIFs」可看一下滿不滿意：
工具下載點在此
附註筆記：個人主頁面背景+藝術作品展示欄貼合成自製畫面：
- steam design網站下載背景
- 於瀏覽器上付藝術作品 (GIF的話不用改檔尾位元)
- 檔案傳上去，送出前於Console輸入
var num= document.getElementsByName("image_width")[0].value;
document.getElementsByName("image_height")[0].value = num-(num-1);document.getElementsByName("image_width")[0].value= num*100;
- 藝術作品展示欄選擇剛的圖案
達人
