創作內容

10 GP

GT SPORT痛車教學,SVG製作。

作者:椎名竜希│跑車浪漫旅 競速│2020-03-19 21:33:39│巴幣:23│人氣:3015
大家好,我是龍威。
偶爾.非常偶爾會看到有人在問GTS怎麼痛車,雖然每次回答後對方通常都是不了了之(攤
因為SVG飾件製作繁雜,所以網上的教學資源也少得可憐,GT專版的那篇也是杯水車薪。
今天正好完成了新的痛車飾件,正好可以拿來做個簡易教學。

在這邊提幾個懶人包重點,首先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的基本教學就到此為止,感謝各位的觀看,附上個還沒完成的曉。
引用網址:https://home.gamer.com.tw/TrackBack.php?sn=4722286
All rights reserved. 版權所有,保留一切權利

相關創作

同標籤作品搜尋:跑車浪漫旅 競速|痛車|SVG

留言共 11 篇留言

指引明路
我覺得大多數人大概就是問了然後聽到一堆要用軟體直接:喔 算了好麻煩喔xDD

03-27 11:04

椎名竜希
可是起碼也說一下:「好麻煩喔」
每次都是已讀甚至未讀,好討厭喔03-27 11:08
指引明路
很多東西其實沒有想像中的難,只看自己有沒有心學罷了

03-27 11:12

椎名竜希
因為很多人本來就沒有想學(o03-27 11:26
指引明路
沒有人天生就會做SVG 痛車吧(笑

03-27 11:13

椎名竜希
覺得是正常要求也不會這麼機掰,所以就沒什麼其他領域的提相關教學了03-27 11:27
チイ
賢太的豐田86也想要有奈亞子的痛車因為頭文字D要有,參加拉力賽拿冠軍,日子更精彩。

02-19 10:35

椎名竜希
賢太不是開日產S14嗎?02-19 10:44
チイ
回覆椎名竜希:今日我要解說汽車的狀況,您的疑問先聽我解釋,現在PS4的賽車遊戲「跑車浪漫旅SPORT 」沒有日產S14(SILVIA)要等更新過後才有日產S14(SILVIA),今天我只是提供參考方面,因為日產S14是老車1993年生產,車體過於老舊排氣管容易噴煙造成空氣汙染的嚴重現象,至於日產S14(SILVIA)想修更修不好排氣管還是容易噴煙,日本政府緊急把排氣管噴煙的老車報廢要求車主買新款的汽車,中村賢太要買豐田86(2014年版)想在道路上行駛,之後住在日本保養車輛時也要有車檢證給監理單位檢查車輛狀況以便安全行駛,在日本走左側駕駛汽車的人坐在右邊也給車主一個方便,未來我在日本那邊看一看交通安全的便利性就可以。

02-19 11:18

椎名竜希
科普了解了,不過這和這篇教學文有什麼關聯嗎?
我現在腦袋打結中02-19 12:06
大頭阿翔
謝謝您的教學

07-21 19:06

椎名竜希
不客氣,有幫助到就好
最近有要玩痛車?07-21 19:11
大頭阿翔
對啊~入手GT SPORT也一段時間了,想把喜歡的圖案放到車體上

07-21 19:14

椎名竜希
有問題了話,歡迎提問
不過我很久沒畫AI了,會盡量回答07-21 19:18
大頭阿翔
好的~感謝

07-21 19:39

大頭阿翔
請問~
Adobe Photoshop

Adobe Illustrator

這兩個軟體,是付費軟體嗎?
以及 除了這兩個軟體以外,有無其他的?

謝謝

07-25 04:40

椎名竜希
這兩個我是找O解版的(小聲
我覺得Photoshop可以用別家出的photoImpact代替,不過同樣是付費軟體
至於AI我不清楚,你得找找有沒有可以繪製向量圖的軟體,然後要輸出成SVG的格式07-25 08:07
椎名竜希
有查到個Inkscape,你可以研究看看07-25 11:53
大頭阿翔
好的 感謝~

08-14 08:28

snmmer
大大好,小弟本身稍微會用ps去背問題不大,可是大大的(將檔案輸出成網頁用格式)是指輸出成甚麼檔案,我的理解是輸出html檔,可是我用A1打開是程式亂碼?請問我哪裡理解錯誤QQ

04-06 22:32

椎名竜希
我記得還是PNG04-06 22:35
椎名竜希
那個步驟映像中就是會壓縮,更適合在網頁上放置而已
不使用了話其實沒關係
只是我映像之後匯入AI後,沒經過這一手的圖比例看起來會小很多(但不是每次都這樣),所以我還是會習慣這一手動作04-06 22:38
我要留言提醒:您尚未登入,請先登入再留言

10喜歡★z85122744 可決定是否刪除您的留言,請勿發表違反站規文字。

前一篇:跑車浪漫旅 競速 180... 後一篇:看膩了熊貓86?那來點黑...

追蹤私訊切換新版閱覽

作品資料夾

joy55559阿彌陀佛
南無一切如來心祕密全身舍利寶篋印陀羅尼經咒塔梭哈看更多我要大聲說8小時前


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

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