作者sunrainworm ((破殼中))
看板C_Chat
標題[倫語格鬥] 基礎點圖教學(1)
時間Sun Mar 16 13:25:42 2008
雖然oldfool大和asleisureto大有提過在BBS上看長篇的附圖片教學文件很麻煩
不過在BBS上留一份是我的原則
與其說是教學，不如說是個人研究的結果
我比較希望有人可以針對這些文章做更深入的討論，或者修正補充
比起做一大堆點圖，我更希望技術可以保留下來
以供製作人員參考和交流，並且提供之後想加入的人一個管道
沒有什麼特別的問題的話，之後每一個教學都會留一份在BBS上
然後發佈在我的網誌上
http://blog.yam.com/sunrainworm
如果之後有什麼重大更新會直接修改網誌中的文章(如新方法)
BBS上則保留為討論的一部分
------------------------------------------------------------------------------
工欲善其事，必先利其器
首先介紹需要的硬體和軟體：
1.硬體：電腦(廢話)、繪圖板或滑鼠
用繪圖板的話會比較輕鬆，不過點圖本身就不要求太細的手感
所以用滑鼠也可以，不過要小心畫太久造成的肌肉傷害
本人是使用WACOM的Graphire4 6X8 (好像已經停產的樣子)
因為直接在上面作畫筆會滑，所以都會在上面墊一張圖畫紙
如果是單純畫點圖則不用太貴或太大的板子
重點是"
不管用繪圖板或滑鼠，最重要的是耐心"
你也許很快可以畫出一個人物大概的樣子，但是你大部分的時間都會花在修圖上面
連一張點圖都畫不好的話，更不要提點圖動畫
一張點圖花個半天設計、不斷修改到完美是有可能的
2.軟體：
(1) SAI：主要的點圖製作工具
官網有試用版
http://www.systemax.jp/sai/
中文化
http://xelloss.cn/sai
或著這個d43M6
主要是看中他基本功能齊全(圖層、匯出.psd、調色盤工具、開啟多檔案)
檔案小、速度快、選取工具方便、介面操作方便
而且開啟多個檔案時，介面是用按鍵切換的方式而不是多個視窗
(好像蠻多軟體都做成多視窗，要切換時很麻煩)
製作點圖時會需要很多圖參考(例如說配色、造型)
這一點蠻方便的
其他好用的功能還有直接開啟剪貼簿的圖片，資料夾書籤
(2) Photoshop：主要的轉圖工具、放大剪貼簿的圖2倍(Nearest Resample)
偏偏ImageReady就是沒辦法存bmp檔，而photoshop不能讀gif動畫
所以轉圖成bmp256還是要靠photoshop
最重要的是善用Action+Batch一次處理大量檔案
另一個功能是放大剪貼簿的圖2倍(Nearest Resample)
SAI中的放大縮小沒有提供Nearest Resample
簡單的說就是放大後會變模糊，這對點圖並不需要
所以在photoshop中使用action去設定，按一個鍵就自動完成
通常是在點圖做好後要放到測試場景時特別方便
唯一的缺點是透明度無法傳到SAI上，透明度為0的像素會變成白色
另外一提的是，CS3比CS2效能改善了許多，介面也更為方便
不過已經習慣舊版本的人可以繼續使用
基本上我們不會用到新版本的新功能
(3) ImageReady CS2：點圖動畫製作工具
實際上是先畫在SAI上，每個影格畫一個圖層
然後存在psd檔用ImageReady開啟，使用action快速製成gif動畫
如果是用其他軟體大概就沒辦法做到
不過這麼方便的工具CS3版竟然就沒有了，說是併入了fireworks
製作gif動畫還是ImageReady方便多了，至少介面很簡潔
除了製作gif動畫外，ImageReady也用來把影格一張一張匯出去
一般是存成單張的gif，再用photoshop轉
以上是本人常用的軟體，如果有更好的軟體歡迎提出
如果使用的不是這些軟體，請自行找出替代軟體的相關功能
3.萃夢想+萃夢想圖片擷取器：點圖參考資料
沒有萃夢想的自己去找找看
萃夢想圖片擷取器
http://0rz.tw/5f3NY
或者這裡提供萃夢想基本點圖
http://0rz.tw/473My
-----------------------------------------------------------------------------
那麼在進入點圖教學之前，先來討論一下畫風
一開始，個人其實覺得畫風不是那麼重要
只要畫面上能和其他人的點圖放在一起而不覺得古怪就可以了
不過這樣其實讓人無所適從
"什麼適合，什麼不適合"其實是很難解釋的東西
與其讓點圖繪師慢慢摸索，不如訂一個畫風
然而我們經驗不足，因此在這裡我們傾向以各方面都很成熟的格鬥遊戲-萃夢想當做參考
雖然asleisureto大希望可以有中國風，不過我們很難去創造出一種獨特的點圖畫風
這裡只能折衷為"用萃夢想的畫風，設計帶中國風獨特的服飾和招式"
例如本人有機會的話會去設計水墨的特效代替現有常見的光影特效
如果a大同意這點，就請把它加入計畫書的第三點：
"現有的能力(包括人員的技術)能做到什麼程度和品質"
好，那麼如何去定義一個畫風
畫風本身是一個抽象的詞，比起用文字敘述我們先來看下面這張圖
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1079895&p=5
這是把萃夢想全人物的臉拿來做比較，可以發現以下幾點
1.臉都是饅頭臉
2.臉高約13 pixel左右(通常臉高指眉毛到下巴)
3.人物正面臉寬約15 pixel左右，側面則一半約7~8 pixel
4.根據人物的不同，差距一般在0~2 pixel之間
綜合以上幾點，可以推出一個結論："臉的大小形狀大約一樣"
而這個就是所謂的畫風
當然也會有較瘦的人或較胖的人，但是那是相對於"標準身材"的人而言較胖較瘦
只考慮標準身材的話，同一個畫風都會一樣大
在倫語當中我們只會考慮到外表年齡，身材基本上都是標準身材
至於13 pixel什麼的基本上不需要特別記住和測量，後面我們會說明如何參考畫出
接下來就來列舉萃夢想畫風需要的處理的部份：
1.臉的大小形狀大約一樣：如前所述
2.眼睛要夠大：
再次參照前圖
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1079895&p=5
可以發現眼睛大小會隨臉的朝向有所變化，左眼右眼會一大一小
接近觀察者(玩家視角)的眼睛較大，遠離觀察者的眼睛較小
為了方便，不考慮左眼或右眼，以下稱之為大眼和小眼
單就大眼眼寬而言，幾乎是臉寬的一半甚至超過，大約7~9 pixel
大眼眼高則變化較大，最大可到約臉高的一半，大約6 pixel
最小可以像萃香一樣瞇著眼
但一般不做特別的眼神強調的話，會讓他開到最大
除了特別表情之外(如下)
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1079921&p=6
小眼的眼高會和大眼眼高一樣大或更小一點(通常1 pixel)
然後依照臉的朝向決定適當的小眼眼寬
基本上只要看起來正常且左右倒過來也正常就算ok
(遊戲中人物的左右朝向是先做一邊，另一邊再把點圖左右倒過來)
3.不考慮帽子的話，整個頭(包括頭髮)的大小大約一樣大：
正確來說是不會大得太誇張，也不會太小
這部分通常會比臉和眼睛的變化較大，但有一定限度
如何畫同樣放在之後來講
4.身材比例：3頭身到3.5頭身之間
這裡把之前的研究拿出來整理一下
3頭身
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202859&p=0
3頭身基本上腰部會再中間
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202854&p=1
3頭身的臉大約會在腰部以上三等分的中間，也就是胸腹高和髮高約和臉高相同
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=202857&p=2
3.5頭身
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1079952&p=7
3.5頭身腰部不會在身體中間，會加長腳的長度
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1079953&p=8
3.5頭身胸腹高大約佔了半個頭，膝蓋則約位在整隻腳二等分的中間
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1079954&p=9
3頭身的膝蓋位置沒找到明確資料，不過應該一樣是在整隻腳的中間
一般來說我們對外表年齡較大的角色(較成熟的角色，御姐、兄貴)
傾向於使用3.5頭身
如我畫的尹喜
http://album.blog.yam.com/show.php?a=sunrainworm&f=4081143&i=1062265&p=4
照原silia7大的原設定圖來看是比較男性化的角色，比較成熟
http://www.wretch.cc/album/show.php?i=donabear11&b=3&f=1269915165&p=4
反之對外表年齡較小的角色(蘿莉、正太)
傾向於使用3頭身
如周天子
http://album.blog.yam.com/show.php?a=sunrainworm&f=4081143&i=1062260&p=1
雖然說silia7大的原設定圖沒有那麼嬌小
http://www.wretch.cc/album/show.php?i=donabear11&b=3&f=1269915168&p=7
個人覺得周天子是周朝積弱不振的象徵，所以把她當作小孩來畫
不過一個人物要做3頭身或3.5頭身可以不用考慮那麼多
如果有時間可以多加嘗試比較看看
底下算是一個特殊的例子，大約只有3頭身再多一點點
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1079973&p=10
作法是把身材比例調到和3.5頭身相同，加長了腳的長度，腰部上提
同樣表現出成熟的氣質
缺點大概是頭顯得有點大，胸腹變小
不過基本上把它當作特例就可以了
5.四肢的長度和寬度：
決定好身材比例，就可以來決定四肢的長度和寬度
手長一般大約和頭高相同，不過些許的誤差是可以容許
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1080116&p=11
嚴格來說我之前做的四個點圖不是處理的很好，稍微昌促了一點
沒有修得很完美，不過畫面上是可以容忍的
相對於手長，手寬只要差一點點就很容易覺得太粗或太細
實際測量的結果，手臂寬約4~5 pixel之間在變化，手掌粗一點約6~7 pixel或更大一點
不過只要多修改，試出最佳的寬度應該沒問題
腳長在之前決定身材比例就已經決定好了
這裡要決定的是腳寬，大約在6~7 pixel之間變化
手寬和腳寬可以參考底下這張咲夜，大概就像這個樣子寬度
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1080117&p=12
以上皆是標準身材下的數據，我們沒有過胖或過瘦的人物，不需要擔心
6.各個部份的畫法：
頭髮有頭髮的畫法，我們不會畫成一根一根的，而會畫成一條一條的
雖然會有所變化，如捲髮、辮子，但基本上遵守上面的原則
可以先參考下面的萃夢想全人物
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1080119&p=13
同樣的，每個地方都會有陰影，陰影的顏色層次數目、陰影的位置形狀
也都是畫風的重點，這裡我們留待實作階段再來詳細解說會比較清楚
7.配色：
先來看這張全人物
http://album.blog.yam.com/show.php?a=sunrainworm&f=3775651&i=1080119&p=13
基本上可以看出每個人物都不會顯的太突兀，感覺不會太暗也不會亮
至少不會覺得配色很奇怪
一張圖畫得好不好，配色佔了很大的因素
但是這方面的理論我想可以寫成厚厚的一本書
因此我盡可能用最簡單的方法去說明
這部份我們在第二篇教學再來詳細解說
以上我還要再整理一下才會放到網誌中
--
合抱之木，生於毫末。
九層之臺，起於累土。
千里之行，始於足下。
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 118.166.8.124
→ sunrainworm:網誌版 03/16 13:35
推 hatter:推 03/16 13:41
推 asleisureto:推! 03/16 13:44
推 popololos:推 03/16 13:45
推 claredie:推! 03/16 13:58
推 AntaresX:太有心了!不推不行阿!!~~~ 03/16 14:45
推 nobitakun:推 03/16 15:34
推 kaouiway:專業推! 03/16 18:37
推 FriNa1130:推! 03/16 19:17