Photo Shop 之電流流動動圖製作流程

【以下所有圖片點擊後便可還原成大圖】
所謂的電流流動動圖，如下圖右半邊所示：

這招筆者最早應用在東方 -霊烏路空這款佈景上，
但因當時尚在實驗階段，故沒有全佈景都用這樣的效果。
未來等巴哈改版後，筆者應該會挑一個適合的主題，
將這效果普遍應用在該主題上。


而整個製作過程，筆者認為有兩點要注意：
一、底圖與佈線所需的各個圖層要分開且清楚地標示。
二、影格編號所對到的圖層，該層透明度增為１００％，其餘維持５０％。
至於為什麼，各位往下看便知道了。


【第一動】：

筆者建議製作過程中將圖像放大到能看見各個像素為佳。
而此次的示範過程，筆者全程是放大至１６００倍來做的。
如前所述，佈線所需的各個圖層要跟底圖分開且清楚地標示，
筆者的習慣是會替底圖的各層零件取個名字，如：花紋、邊框及特效等。
而線路所需的圖層就依圖層一、二、三......來區分。
就如上圖右邊的圖層欄裡所示。


另外，筆者的習慣是在佈線的圖層裡，各線路只延伸４個像素。
換句話說，不管你線路往哪個方向走，每個圖層裡各線路最多只走４格。
如上圖左半邊紅色線路所示。
會這麼做是因為筆者認為用這方式跑出來的動畫效果會比較好看，
當然若各位先進們有更好的想法也不訪試試看，說不定會有異想不到的結果。


【第二動】：

接著就開始佈線。如前所述，每個圖層裡各線路只走４格。
因此目前佈線的圖層（右邊圖層欄）指到圖層五，那每條線路就應當有２０格。
筆者建議在製作過程中可以逐一關閉圖層來檢查看看，
因為若到很後面才發現出錯的地方的話，修改起來可能要花費不小的功夫。


【第三動】：

此次示範筆者打算弄到此等規模即可。
習慣上筆者會利用一個較大的節點來表示線路的終端。
當然這只是個人習慣，不見得非得這麼做不可。


【第四動】：

接下來就是調各圖層的透明度。
理論上，透明度調得越低其所跑出來的反差效果會越大。
而筆者是將各層的透明度降至５０％。


【第五動】：

接著點選圖層一，也就是線路一開始的所在圖層，
然後開啟動畫選項，開始複製影格，延遲時間為 0.1 秒。
這邊要注意的是，你有幾個佈線圖層，就開幾個影格。
如上圖所示，因筆者的佈線圖層有１０個（圖層１～圖層１０），
所以影格也只有１０個。


接下來是重頭戲，影格編號所對到的圖層，該層透明度增為１００％，其餘維持５０％。
如你點到影格１，那圖層１的透明度就調成１００％，其餘為５０％。
又如你點到影格６，那圖層６的透明度就調成１００％，其餘維持５０％。


要隨時檢查圖層一，因為往往圖層一的透明度就定在１００％。
所以實際上這步是最為繁雜的。
如上述提到 "點到影格６，那圖層６的透明度就調成１００％，其餘維持５０％" 這句，
各位先進們改完圖層６的透明度後也要回過頭看看圖層一的透明度。
總之，謹記：影格編號所對到的圖層，該層透明度增為１００％，其餘維持５０％。


【第六動】：

都改完後，筆者建議先跑跑看動畫效果來檢查一下，
若都沒問題的話，就選檔案選項裡的 "儲存為網頁與裝置用" 這一選項，然後...


選擇gif檔，如上圖所示。按儲存後便大功告成。


【第七動】：
以下為此次示範的成品。因為維度只有５０＊５０，
故畫面會比較小，這點還請見諒。
成品：



【後記】：
跟前面的佈景製作一樣，大部分的效果是筆者投入大量時間慢慢摸出來的，
因此在摸索的過程中，難免會有出錯或是有不好的地方；
亦即各位先進們認為再簡單不過的作法或流程筆者仍可能會有所疏漏，
就這點還望各位先進們鞭的小力點，而對於此次的製作流程，
還望各位先進們不吝指教，謝謝。