LV. 35
GP 5k

【心得】SVG製作教學,進階篇。

樓主 椎名竜希 z85122744
GP11 BP-

作者標示-非商業性

本授權條款允許使用者重製、散布、傳輸以及修改著作,但不得為商業目的之使用。使用時必須按照著作人指定的方式表彰其姓名。

各位好,我是龍威。
受到網友鼓吹,加上之前其實有想要過嘗試,所以寫了這篇文。
在看這篇文之前,我會先請各位去看我上一篇SVG教學文,那篇是使用影像描圖來繪製飾件的入門款,裡面有提到一些基本觀念。

而在開始教學前,先來談談為什麼要用手工繪製的。
會想使用手工繪製的各位不外乎就是遇到了瓶頸。
手工繪製出來的成品會比影像描圖乾淨了許多,檔案也小上數倍,這是最重要的一點。
再來就是構圖好修改、好整理,切圖也是方便許多。
不過影像描圖也是有它的好處的。在處理簡單構圖時,像是標誌、標題等,速度會快上許多。
而在顏色細膩度上,也是比手繪好上許多。
在此順便提一下影像描圖是多麼的反人類。
以下圖為例:

正常我們人類的思考,我們要將它做分解。
會是以這種形式來分解:邊框與底色。
但電腦做運行上,則是會將接觸面積最大的邊框作為底圖,而底色部分則像裝飾品的形式來蓋上。
而已檔案大小來說,後者少了四個錨點,所以檔案會比較小就是了。

離題了,開說正文了。在看正文前,我會希望各位先看以下的影片。
這次的繪製方法是使用鋼筆工具,俗稱貝茲曲線。
其實我覺得看完這影片就可以不用看我的內文了Orz

這次的主角是BNA的主角二人組。

新手我會建議找動畫截圖來下手,這跟以前的描圖不同,是要親自下來畫的,不要像我一樣當初直接搞死自己……

首先一樣去PS做初步調整,以方便作業上。
我把對比度與亮度調高,因為在遊戲內顯現,還是做的亮一點會比較好,不然成品可能會太暗沉。

再來將底圖上鎖,然後建立新圖層出來。

要好好運用隱藏、鎖定、圖層這幾個功能。
不想去選取到的圖層就給他鎖定,妨礙視線的圖層先給它隱藏,這幾個功能會常常交互使用!
至於圖層就是大範圍的分類用了。

之後就是要來做初步的腦中構圖了,要先將作品做好區塊切割來繪製。
一個區塊一個圖層,跟自動描圖不同,構圖的步驟從一開始就要開始考慮了。
我會建議以最上層的圖層開始畫起。

以影森滿為例,我會分成三大區塊。

分別是耳朵、頭髮、臉與身體;然後又可分成邊框區與底色區。
把邊框畫完,再用一個圖層專門上色。
在初步建好圖層分類,事後處理會方便很多

這三個月來練AI真的感觸很多,工具使用上我覺得點到為止,還是該讓大家親自接觸後才會慢慢知道問題點。
有問題直接問,我在做回答也比較方便。

基本上鋼筆的重點,有分為填色與筆畫。

填色:
顧名思義就是填滿區塊顏色,大家都用過小畫家吧?
鋼筆的使用上要將路徑畫完一圈才算完成,圈好的路徑內填滿顏色就是填色。

筆畫:
就是使你的路徑會以線條的方式顯現,可以加粗厚度。
所以我都拿來當邊框來使用。

開始動工就來先繪製邊框,然後邊框繪製完後再繪製同樣的圖層來當底色這就是我整體的流程。

邊框完成後大致上會像這樣。

另外視細心度不同,有時只有邊框或是底色會有截然不同的效果。
甚至可以直接拿來使用也沒問題!

無邊框的狀態就有種卡通效果的味道呢。

當然成品我還是會貼一下上來。

剩下最後就剩切圖壓縮了,上次課程我已經教過,就不多談了。
至於貝茲區線怎麼用比較好,說白了,只能多加練習,慢慢的會抓到他奧妙之處。

至於向量圖繪製完,可以丟到PS去轉成點陣圖,會變成一張超大的點陣圖。

最後貼上成品成果。

有問題歡迎提問,謝謝。
11
-
未登入的勇者,要加入討論嗎?
板務人員:

1243 筆精華,昨天 更新
一個月內新增 38
歡迎加入共同維護。


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

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