LV. 34
GP 4k

【心得】SVG製作教學

樓主 椎名竜希 z85122744
GP16 BP-
大家好,我是龍威。
玩了痛車八個多月了,前前後後也找了許多資料,不過網上關於SVG製作的資源也是少得可憐,照之前版上的前輩教學也是遇到很多無法突破的瓶頸,所以在此我也來盡一份力。

在這邊提幾個懶人包重點,首先GTS的飾件只支援SVG檔,就是所謂的向量圖,並不是我們常見的點陣圖,另外單檔大小不能超過15 kb,這就是最大的罩門,但是你只要檔案小於15 kb就上傳的了了,不用擔心甚麼14.X kb不給傳。

需要工具:
Adobe Photoshop - 個人使用CS6,簡稱PS,作為點陣圖初步處理工具。可以使用PhotoImpact代替,但是在輸出網頁格式是否與PS輸出一樣,我不確定。
Adobe Illustrator - 個人使用CS6,簡稱AI,核心工具,點陣轉向量(詳細請自行GOOGLE,這個網上很多說明)。
SVGOMG - 線上SMG壓縮網站,只要成品還在的狀況下,壓縮直接開到最高。
GTS 飾件上傳工具 - GTS官網,登入PSN帳號後,將檔案拖曳進來上傳成功就能在遊戲內看到了。

製作流程:
選圖→PS初步處理,並輸出成網頁用→AI描圖並且初步自動簡化→手動簡化(顏色刪減、圖層合併、多於圖層刪除)→飾件裁切→雲端壓縮→上傳完畢。

本篇開始前,提供個網上資源,Bilbili這篇影片交的蠻詳細的,我也是受到他很大的啟發。

選圖
首先先挑選想要製作的素材。
素材挑選條件上,以顏色越少越好,圖層分割越明顯越好,白話點看起來構圖越簡單的越好就是了,這裡不多說,做多了自然就懂了,另外也避免找漸層色的,最後你也是會給它弄成一塊顏色......

這次的主角就是記錄地平線的女主角-曉。

PS初步處理
在這裡使用PS做初步處理,把背景去背,並且調高對比度以方便後續的處理。

白底、綠底、透明底都沒關係,之後轉向量通通會變成白底或顏色底,只要跟你本體顏色差很多,都很好處理。

因為PS不是本次的教學目標,所以這裡請自行處理。完成後將檔案輸出成網頁用格式。

至於為什麼需要這麼做我不清楚,之前查到的資料有這步驟,所以就是我使用上的習慣了。

AI描圖
將剛剛輸出成網頁格式的圖檔打開。
打開「視窗」將「圖層」、「影像描圖」、「路徑管理員」都打開,這三個是製作的核心。

將「影像描圖」開啟,然後將以下功能照我的設定開啟。

參數的各項說明:
首先這是作為各項參數都達最高值,理論上最接近原圖的狀態,但容量也是最大的。

顏色:
此向量圖當中使用的顏色數,顏色越多,檔案當然就是越大,但我們的肉眼可分辨的程度並沒那麼廣,而給系統大範圍的削減顏色,對整體的構圖也是會有明顯的改善。

路徑:
這些不是我的領域,我就結論來說,路徑百分比越高,各個圖層就會越貼齊,後去手工部分就會越輕鬆,但相對的檔案就大,但百分比越低,就會變成毛毛蟲的邊,該怎麼拿捏得自行捉摸,我通常都會用70~85%。

轉角:
如同路徑,百分比越多檔案就是越大,主要影響的是錨點數量,錨點越多,圖形曲面就會越圓滑,錨點越少,圖形就會越接近方形。
由於我剛剛跑圖都看不出差異,所以我就沒貼比較了,實際製作是會有影響的。

雜訊:
過濾圖形的好幫手,但也是個兩難。過濾效果越高,檔案就會越小,但是圖案的小細節都會消失,適合處理乾淨簡單的構圖,但都不過濾又會有很多不必要的垃圾圖層在。

當完成描圖後,點選工具列最上欄展開就可以了。
上述描圖步驟是決定整體成品最重要的部分,成品好不好看都是看這裡了,但是也不必太計較檔案大小而在這裡捨棄畫面,畢竟最主要的壓縮還是在切圖,這裡的步驟大概就是少個10幾kb而已(我亂說的,我不知道)

手動簡化
當描圖展開完後就會像這樣。

這裡做個介面的簡單說明,會用到的功能大概只有這些。

直接選取工具:
可以直接對單圖層進行操作,修改錨點等作用。不要使有它左邊的「選取工具」,選取工具一次選擇的單位是圖層裡的群組,換言之,一點就是全部圖層都被選了。
直接選取工具狀態下,「Shift」+點擊圖層 可以連續選取圖層。
(後續的內文我會直接簡化成選取工具來講)
矩形工具:
可以拉出一個長方形,長方形的顏色是取自於你目前選取到的顏色,用於消除錨點或是將圖層多餘的破洞給合併掉,可以使用「直接選取工具」來對錨點進行調整,因應各種需求、或是多個矩形來組合。
檢色滴管工具:
就是選取顏色的工具,當你點選其中一個圖層時,只要用滴管點選另外一個顏色,圖層的顏色就會被後來選取的顏色取代。
滴管狀態下,「Ctrl」+點擊圖層 可以切換選取的圖層,「Alt」+點擊圖層 可以將目前選取的顏色取代點擊的圖層。

工作區域:
為當前輸出後實際顯示的區域,區域外的圖層還是會佔容量。

圖層:
目前檔案裡所有的圖層,可以進行「隱藏」、「鎖定」、「移動」、「刪除」等。
路徑管理員:
對圖層做合併與修剪。
聯集-將兩個相鄰的圖層合併成一個圖層,並且下面的圖層會變成上面圖層的顏色,並且圖層的排序會移至上圖層的位置,實際影響到的層面,原先蓋在下圖層上面的圖層會被下圖層蓋掉,解決方法就是先把上圖層排序移至最下層。
減去上層-將上圖層刪除,並刪除掉上下圖層相鄰的區塊,一樣會將下圖層的排序移至上圖層,這個遇到問題很麻煩,只能靠經驗解決了,另外因為圖層會被刪除,所以建議多複製幾個來依序減,另外複製出來的圖層不會蓋在原先的位置,所以要繼續微調。

展開好後,用選取工具對畫面隨便一點,讓狀態成為沒有選取的狀態。
之後為了方便,打開「檢視」開啟「顯示透明度格點」。

這樣就可以分辨白底還是透明底的差別了,若你沒有白底了話可以不用開,畢竟白底就等於透明底了。

接著將綠底刪除後,「物件」→「工作區域」→「符合圖稿邊界」。

之後就是開始用運我上面教的功能來簡化圖了,盡可能減少使用的顏色、多個圖層合併成一個等等。

錨點的部分建議看我上面分享的bilibili影片,它有實際操作。
我這裡就簡單說明,可以靠選取工具移動、刪除,通常錨點都要附加把手,把手可以調整錨點旁的邊的弧度,這個請自行摸索比較快。

像是下面手甲部分,可以看出下面凹陷的部分。

使用矩形工具後就可以填補了。

記得先把新拉出來的矩形移至最下層,然後聯集起來,可以發現這樣就少了11個錨點了!

當然也可以直接把現有圖的圖層合併,和直接把內部的錨點刪除,簡化到最後大概會像這樣。

各自圖層構築出來後,就會像是個大群組一樣,底部陰影的紫髮為基底,而亮度較高的地方則像是裝飾品一樣修飾。

扎扎實實的把可以簡化的地方都簡化。
當然你有自信,現在就可以做另存新擋成SVG了,然後得到結果是147 kb,然後暴力壓縮。

得到39.3 kb(網站顯示的通常很不準,所以僅供參考),由此得知大概離標準的15 kb還是多了兩倍以上,所以來做最討厭的切圖吧!(倒

飾件裁切
看檔案壓縮後大概還有兩倍多,所以就保守估計切個二到四等分。
檔案大小通常圖形越不規則檔案越大、顏色越多檔案越大,所以切圖最好讓顏色相近的丟在一起,並且要有清楚的圖層概念,什麼部位在上面,什麼部位在下面,其實這裡只能給各位自行捉摸了,我這裡也是常常遇到瓶頸,所以我在這裡只是提供一個我自己的方法而已。

一開始我會先備份成品,那個是不使用的,然後將全圖層合併。

把裡面的錨點清掉,壓縮,這個是作為面板的底圖,以利於你在GTS構圖編輯上的方便。

再來選擇你要保留的部分,把不保留的全部砍掉,然後備份→輸出SVG→壓縮→檔案過大再繼續切。
之後再開備檔,把剛剛保留的全部砍掉,留剛剛砍掉的,然後再照上述步驟。

我的成品分開來說是接近這樣。

另外不建議每個成品都重新修改工作區域,用GTS飾件貼是可以偷吃步。
將一個飾件複製多個,然後再用取代的會直接幫你好好地貼在一起。

雲端壓縮
直接將SVG丟到SVGOMG:https://xerocho.github.io/svgomg/,進行壓縮後丟到飾件上傳工具成功就可以啦!

SVG的基本教學就到此為止,感謝各位的觀看,附上個還沒完成的曉。
16
-
未登入的勇者,要加入討論嗎?
板務人員:

1187 筆精華,05/08 更新
一個月內新增 2
歡迎加入共同維護。


face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準,可能無法使用新的應用程式來呈現網站內容,在瀏覽器支援度及網站安全性的雙重考量下,為了讓巴友們有更好的使用體驗,巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特:
。Google Chrome(推薦)
。Mozilla Firefox
。Microsoft Edge(Windows10以上的作業系統版本才可使用)

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營,請將 gamer.com.tw 加入廣告阻擋工具的白名單中,謝謝 !【教學】