夢幻之星 系列

開啟巴哈姆特 APP

瀏覽體驗 Level up!

立即前往

【教學】Symbol Art首次作成即上手【選圖,作圖】含輔助程式及實用技巧【圖多】

【教學】Symbol Art首次作成即上手【選圖,作圖】含輔助程式及實用技巧【圖多】

b23andysf (乙姬蝦(′・ω・)ノシ)#12016-08-29 08:39:34

さあさあ、みなさん 教えてあげまーす!
みんなが気になっていること 疑問に思ってること
ぜーんぶ 教えてあげまーす!

廢話不多說!
讓我們開門見山的了解Symbol Art!

*閱讀小技巧
*請善用【Ctrl+F】搜尋章節標題
*文中有大量附圖
 網路還OK的朋友們可以點開啟圖片方便閱讀
*如果文中有【括號】表示強調
 不管那是什麼,通常就是有人會問的事
*如果文中提到【這張圖】或【這裡看到】的字眼
 我的圖片通常會先貼在上方,才在後面貼注釋
*差點忘了的目錄:
 重點1:外部輔助軟體
 重點2:選擇合適的圖片進行製作!
 重點3:認識戦場
 重點4:佈陣,準備開工
 重點5:正式開始製作
 重點六:補充篇
 重點七:補充釋疑區

關於Symbol Art 大家應該都不陌生
就是下圖的這個東西:


不過這邊可不只是講這樣的小事
我在介紹中會全面解析每一個小單元的設定

在那之前
我們必須先知道怎麼做Symbol Art

重點1:外部輔助軟體
要順利的製作出Symbol Art
你一定要準備好輔助軟體
正所謂工欲善其事,必先利其器

必備程式1:PhantsyStar Online2
好的一定有人覺得我在開玩笑
不過這點先保留
因為沒有PSO2是真的能做出Symbol Art
但是你要有過人的腦力
或是無雙的藝術天分

必備程式2:修圖軟體
修圖軟體指的比較廣,重點在於【裁切】與【縮放】
只要擁有這類功能的都可以使用
Adobe Photoshop、PhotoImpact亦或是小畫家都可以使用

必備程式3:透明視窗貼圖程式【Tracer】
Symbol Art的製作過程中
除非你是專業的藝術家
否則,是很難下筆的
但是有了透明貼圖以後
下筆如神,道道入魂
連腰也不痛了

必備程式4:Symbol Art外部製作軟體【Symbol Art Editor EN】
這是一個很不是重點的重點程式
主要的功用是可以用成是直接載入Symbol Art
可以在遊戲外部編輯再重新匯入
主要用於大量配色、備分、細部調整
但絕對不是拿來從零開始作圖的

在此提供兩項程式的載點
【Tracer】【Symbol Art Editor EN】
以防死點,已上傳到個人的GD
【Tracer】的部分只有提供日文介面
【Symbol Art Editor EN】則有英文或日文兩種

至此
如果你已經找到了適合自己的工具
我們就到下一步吧!

重點2:選擇合適的圖片進行製作!

首先提起Symbol Art的基本概念
基本上Symbol Art分成兩種格式
【一般發言用】192*96的長方型橫向大圖
基本保持長方型,尺寸不可縮減,不可旋轉
也就是說,發言用的圖,只有橫向長方型一種尺寸與下例小圖
【公會圖標用】32*32的正方形小圖
限定給公會當作LOGO圖標使用的Symbol Art
32*32 同樣沒有提供旋轉功能
這個尺寸的大小很微妙
雖然是32*32但可以容納的東西說多不多,說少也不少
另外可以用於發言
但是通常無法容納有效資訊[如:文字

知道了這樣子的概念後
我們就可以開始選擇想製作的圖片了

首先
這邊要先提一下
SEGA官方已經正式聲明不可發佈具不良內容的Symbol Art
違者可經由申訴管道揭發、檢舉、懲罰
所以挑選時
請多多注意

挑選圖時
我們可以注意底下一些小撇歩

1,想製作的圖,最好層次分明,太過模糊或是沒有明顯框架線的圖都不是合新手
例如:採用一般二次元圖會比三次元風景更加容易,因為相機拍出來的圖要多遠有多遠
不過還是要自己斟酌,但無視背景或一些無用的裝飾也不失為一好辦法
其次:一個碗跟一座山的差別,Symbol Art處理景深比起一般的會圖有著更高的困難,特別是物品沒有明顯輪廓的類型【例如:雲】也要有相當的構想再考慮是否做為題材

2,精細度也是一個很重要的點,因為Symbol Art能容納的大小實在不是很溫和,往往圖一縮,美顏都變沙皮狗了,另外值得一提的是,Symbol Art在頭髮的描繪上,比想像中的還要容易

3,明亮度,因為作圖時會淡化原圖作為透明效果,明亮度不足,會烏漆抹黑一片

4,內容物,如果一張Symbol Art裡塞太多東西 或稱為:【縮太小】
除非你作圖技巧高超,否則同第二點,一票人的臉會黏在一起變禍津神

如果混在一起有特殊美術效果我就不確定了,畢竟撒尿牛丸也是混著做的

以上,小知識

但是一般的圖片通常很難容納進Symbol Art的大小
所以我們要來預估裁切後的大小


以PhotoImpact為例
我先開啟一個192*96的框架


利用此框架
我們可以很輕鬆的做預覽
也可以移動位置
不需要考慮到比例問題,也可以隨心所欲的縮放
等調整到自己喜歡的位置
然後儲存
就是一張理想的Symbol Art預覽了

以此圖為例
選擇左上的角色,為比較鮮明的大圖
不選擇右邊是因為角色過多
如果壓縮,會失真
如果硬是要裁切他,就會有人真的剩半張臉

此外一例
並不是所有的物件都會在Symbol Art上一定要畫上
假設,如果某一物件【或人物】的消失並不會造成嚴重的缺角
這個物件是可以被無視的

並且
基於每張Symbol Art能容納的拼圖碎片有限
如例圖上的黃色光點也是可以完全無視的【如果物件不影響構圖的話】

重點3:認識戦場

沒想到上面打了那麼多,有美術基底的人可能都會覺得理所當然
可是我已經被問到不下數十次了,所以還是提出來分享了

首先
要做的工作很簡單
先打開PSO2
我們來了解一下製作Symbol Art的工作環境

開啟系統選單
找到Symbol Art選項,點選進入

接著
點選一個空白的格子
點選編輯

記得:
要在儲存清單才能編輯並儲存


基本的介紹一下Symbol Art製作介面的功能
精華區也有寫到
不過還是再提一下

覆蓋並保存:附蓋原本格子的內容,並保存
儲存到別的格子:另存新檔,點選後會回到儲存清單給你選擇要存到哪,或是覆蓋哪一格
改變名稱:重新命名
標準/小型格式:挑選使用【標準】192*96或【小型】32*32的舞台進行創作

選擇效果音:選擇發言時同時發出的效果音,使用於小型圖片時也有效,套用於公會圖片時無效

上一步/下一步:還原上一步的操作,與反還原,次數上限未知,但我還沒按到他不給我還原過

放大倍率:放大舞台顯示大小,可按介面上的【+】或【-】調整,也可以用選單調整
【標準】大小最大可供放大200%,【小型】格式則提供500%的倍率
可是放大了還是小到嚇死人

舞台:可供編輯區塊,與Flash和Powerpoint相同的概念,完成後只有舞台上的元件能被看見
超出去的部分不會顯示出來,也不會有影響,詳細容我後述
要注意的是,舞台預設的背景是【透明】

新增元件:這是Symbol Art介面的精華、主軸、重點
元件,是一大堆的不規則圖型,可以任意【扭曲】【縮放】【旋轉】【變型】【變色】
詳細資料庫如下

最基本的圖型元件庫
基本上很少用
大多用於大範圍填色
但受制於基本圖型扭曲變化較硬性
所以也很少狀況能完美使用

值得一提的是第四排紅框的兩個圖型
有時候可以繞過一些很神奇的角度而貼到想遮的地方
不過那個狀況還是很少

正常作Symbol Art最常用到的一頁
基本上角度和了
什麼都瞄得出來
特別一提

第二排第二組紅框4個元件
如果運用得當
幾乎可以只用這4個完成所有圖的輪廓

另外
藍框的那原件
是弧狀填色的好幫手,包含身體曲線及頭髮


墨水圖型
【瞄圖】時很少用
大部分用於填字或寫字
也可以用於血漬

通常會配合【透明度】做效果
值得一提的是
紅框處用於眼睛或身體做一些亮光效果還不錯


漸層是一個說重要不重要 說好用也不好用的小元件
漸層庫裡的元件都帶有一點點的【透明度】

平時會用到的 大概就是做為【霧面遮蓋效果】或是【漸層背景】
值得注意的是
第二排紅框元件組很適合做眼睛的描繪
但並不是那麼好調整

特效用元件
整個元件庫最雞肋的莫屬它了
除了直接拿去貼背景以外
大概就【透明度】效果全開拿去做特效


標誌圖型
簡單說明是,只要你覺得對了
貼上去就好了
除了縮放以外,幾乎不能變型
只要一旋轉幾乎也是馬上崩壞

主要用於替代文字的簡便標誌


用圖同上
也一樣
瞄圖時幾乎派不上用場
唯一與上面不同的是
這裡的圖片旋轉與縮放不容易壞掉

不能吃的一頁,比雞肋還不如
但也是有更新最明顯的一頁 ´_ゝˋ)

以上元件表
所有的元件理論上都可以隨心所欲
但紅框以外的實在難以利用
如果想嘗試那些元件的好碰油們,有勞

接著
試著新增一個元件到舞台
並且試著移動它
你會發現比小畫家還坑爹的UI


放置元件後
元件會出現再左側的列表
也會出現在舞台上
同時
無論如何新增的元件都會被編號成1
新增元件
無論舞台大小最多225個元件
理所當然,最後一個元件則是編號225

在【舞台】上
會看到9個定位點
紅圈作用於【旋轉】
藍圈作用於【縮放】
綠圈作用於【等比例縮放】
當游標沒有接觸定位點時,即可進行【移動】
但定位點的操作,無法做到【扭曲】
若要進行所有的動作
不能只用遊標控制
必須使用【元件工具列】
但只用鍵盤則可以順利完成所有動作

補充:
這是【扭曲】的效果
圖中也可以看到黑色圓的【顯示/隱藏】被關閉了,所以看不到那個元件

左側的列表
這邊我們稱呼它【元件表】
顯示的數字即是堆疊的順位
舉例來說
沒有任何元件能夠覆蓋編號1的元件
相對的,編號225的元件會被覆蓋到最下層

在【元件表】上
元件旁的黃圈是【顯示/隱藏】
控制元件是否要出現
點選元件
可以看到【元件工具列】

移動:點選後,配合鍵盤方向鍵↑↓←→進行移動,可以比游標更精細的微調

大小:點選後,配合鍵盤方向鍵縮放,效果同【藍圈】

旋轉:點選後,配合鍵盤方向鍵旋轉,效果同【紅圈】

扭曲:點選後,配合鍵盤方向鍵扭曲

透明度:點選後,叫出透明度控制BAR

反轉:左右或上下鏡像反轉

改變位置:更變元件排列順序
*快捷鍵:
【+】向下排列,數字增加
【-】向上排列,數字減少
【Ctrl+E】元件移動到最上或最下,二次使用會再次變動
編輯:
*快捷鍵:
【Ctrl+C】剪下(我不用說剪下的元件會消失這種事吧
【Ctrl+V】貼上
【Ctrl+D】複製
*附註:貼上時會貼到所選物件的上方

其他:
元件更變:直接替換成別的元件,保留大小、旋轉角度及扭曲程度
追加元件:增加一個元件到所選的元件上方
顯示:同【元件表】的【黃圈】
刪除:刪除,雖然沒有顯示,但快捷鍵是【Delete】
複製顏色:抽取元件顏色
貼上顏色:更換元件顏色成抽取的顏色

重要注意:
鍵盤是有快捷鍵的功能的
但是要小心
左側的元件列表
沒有【選取】的概念
遊標移到哪,目標就選到哪
很容易跳錯元件而悲劇

應該,就這樣了
如果有漏的我再補充

重點4:佈陣,準備開工

終於要進入重頭戲了
首先
把你的圖片準備好
打開【Tracer】工具
個人建議把PSO2暫時調整成視窗化
能顯示的空間比較寬敞

備註:圖片和圖片之間有著超營養小知識,不用錢盡量吃
把圖片拉到【Tracer】
【Tracer】就會把圖片一直覆蓋在所有視窗的最上方


右鍵點選【Tracer】叫出選單

分別開啟【Tracer】的放大鏡、操作台、配色表

右鍵放大鏡點選放大鏡有放大功能,最大500%

操作台可以調整視窗位置、透明度、和顯示格線

配色表在游標點選【Tracer】裡的圖片時,會顯示圖片用了什麼顏色

其次,當你選擇帶有透明效果的顏色時,它會認不出來

還有還有,有時候程式會直接爆掉...


設定完會變成這樣子
就是我們接下來會耗上幾小時的工作區域
圖中
我採用32*32的底圖進行製作
設定程式時因為PSO2上是放大500%的舞台
所以設定是32*5=160
160*160即可完美吻合貼上舞台大小

(此外192*96的大小放大200%後是384*192

話說完,我【Tracer】又炸掉了

重點5:正式開始製作


首先
我們來檢視一下這張圖的構成
我們可以大略看到交互疊起的部分
主要是身體>脖子>下巴>臉>瀏海>馬尾>頭飾
(正確來說,這張圖的分層非常清晰,非常適合教學

如此這般
我們從身體先下手

在此判定背後的輪廓是最底端的線條
於是在此先下一筆作為起始

這邊給一個小提醒:
不要害怕起筆,第一筆是最困難的
但是Symbol Art的作成非常有彈性
所以之後可以任意調節

接著,是脖子

脖子的飾品部分
完全的遮蓋了肉色
所以不須多加思考
只要蓋上去就好了

此外
下巴下面的部分
因為有陰影
所以用了第二塊元件以70%半透明的效果填色

至此有點陰暗

我們可以看到大概是這樣的三個元件組成身體的右半部
這三個元件現在什麼都不像
不過後面的疊加和修改會慢慢成形

然後
我注意到人物的左肩,是遮蓋住脖子的一部分的
同時左肩的位置也沒有遮蓋到下巴
所以我可以對左肩,安心的作瞄圖


左肩的部分
因為怎麼調也調不出適合的弧線
所以在這裡就直接用了三個元件的弧線來組成輪廓

這邊做個小提醒
如果你的圖片本身的色系較淡
可以斟酌自行加上輪廓

輪廓的部分
角度和弧線很重要
任何一個疏失都可能造成斜眼歪嘴
所以描弧線時,如果遇到了瓶頸,不要省元件,盡量把它描出來比較重要


作到這裏
我很直覺的想到元件庫裏的元件

紅圈中的元件剛好很適合保有弧線的大範圍填色
於是,很順利的
用了三個同樣的元件,便完成了身體的部分

小提醒:
這個身體的部分
原本可以作更多的光影效果
可是因為物件數量的關係
可以考慮先作其它的部分
有剩下多的元件
再考慮回來作細節

其次是
因為這張圖是32*32的成品
考量到就算眼睛塞到螢幕上也看不到的細節
所以還是無視了不少小東西



好的 我們完成了身體的部分之後

也可以大概看得出在畫什麼了
重新拉出一個概念
只有舞台上的才會被顯示出來
其實作圖時,有很多底下超出的部分都不在舞台上
我們都可以不理它

接著我們可以開始著手畫下巴

臉的輪廓一開始背脖子的裝飾品混淆了
讓我有點看不清楚

這時就可以用【顯示/隱藏】功能
把礙事的小元件處裡掉
等完成後再打開就可以了

另外:
把元件隱藏後,也有鎖定的功能
可以避免誤觸破壞元件本來的配置

紅圈處則是圖內明顯突出的線條
事實上,這條線不僅不存在,還會破壞美觀
但判定上,是可以用之後的頭髮作遮蓋的
所以我們可以安心的下這一筆

其次:
這一筆下得如此粗曠,存粹是為了方便
因為要調整到小弧度而不超出邊界
我寧可之後再來遮蓋

到這裡
臉型大概的描繪出來,主要是為了定位五官
五官上明顯的看到眼睛,嘴巴的部分都有為小的細節

所以,我們承上步的方法,先作【大膽】的打底,之後再【小心】的遮蓋
這裡值得注意的是眼睛的構成在圖片上是稍顯簡單的
有問題的會出現在瞳孔的部分
但瞳孔,通常不會被任何【實體】遮蓋,否則你就不用畫瞳孔了

特例的狀況下有些人設會有把瀏海半透明的蓋在眼前
不過那都在臉部的作成之後
所以我們也可以理所當然的把臉先作完,再考慮頭髮

眼睛的部分
最底部就是眼白了
但上還有很多細節,如:睫毛或裝飾等等
此圖可以看到
我先用白色的元件作大底
目的是眼白
之後再作細節



由上面兩張圖可以看到
我先作細節的部分
如果對自己細部的部分不好拿捏
可以先作瞳孔
再用細節作遮蓋

這邊我對眼睛的製作比較有把握
所以我真的打算把眼睛留到最後

眼睛的部分,有一套獨門技巧
如果有興趣,可以向下先搜尋【堆疊製眼】

右眼也仿製左眼的作法
同時
也開始作嘴巴的塑型和遮蓋

比較特別的是

因為先作了眼睛
要保留眼白的基底不能被遮蓋
所以嘴巴在製作時要很小心
以此圖例
假設黃圈是眼白的基底
黑線是描繪嘴巴用的元件
此時
黃圈不能再被其他元件附蓋的狀況下
黑線跑到黃圈裡是完全不行的
藍圈的部分也要小心的遮蓋

解決方案有兩種
其一是將黑線移動到別處,或是用其它有較大曲線的元件來繞過它
其二則簡單一些,先作嘴巴就好了
就這簡單
可是往往麻煩的點是在於忘了,不是沒有舊,只是要把元件一個一個排下去
這需要一點邏輯,或良好的記憶力


順利的話,我們可以得到一個還不錯的半成品

然後,我們就可以開始做頭髮了

在這裡分析一下頭髮的層次
大概歸類出:髮飾>左馬尾>前髮>右馬尾

到這裡會看到三個小問題
1,髮色有陰影、有深淺,髮飾有陰影、有層次,而且部分髮飾與頭髮交疊
2,前髮可以分類出兩個層次,還有一層頭髮附蓋在前髮上
3,我真的忘了有右馬尾這回事

所以,我們要來處理這些小步驟

處理完頭髮的輪廓後
我盡力開始補救消失的馬尾

值得慶幸的是,右馬尾的堆疊位置是在最下方
甚至是比身體還要下方的位置
所以可以利用元件的特性來讓這個工作輕鬆一點


暫時無視已經完成的部分
左側的角落補上馬尾
確定堆疊順序後
將這組元件移動到最下方
*因為是新增的元件,透過【Ctrl+E】可以輕鬆移動到最下層

成果大約是這個樣子

然後是 種草皮 作頭髮
可以暫時不用擔心深淺的問題
因為是堆疊的關係
只要留下深色區塊就好了
利用上面介紹的元件庫
有很多元件可以幫助你更快速完成種草皮


這裡稍微提一下
元件數量最多225個
所以該省的還是要省
紅圈的大型元件直接塞上去就填好色了

然後
就可以接著填上深色的頭髮了

小提醒:
如果是陰影
可以採用較深色的元件做堆疊
也可以用深色的透明元件堆疊
都有不錯的效果

此外
深色的弧線線條圖形也很適合配合透明度效果做紋理和細節
如果覺得用線條圖型元件搭配透明效果還是太明顯
漸層圖型元件庫也有提供相同的弧線圖形,但是顏色更淡,且附帶漸層


疊完以後,大概是這樣吧?
大致上就剩下髮飾了
剩下的技巧也多了
我直接把剩下的圖片一一PO上來

髮飾打底

髮飾填色&重新覆蓋上一層頭髮

再次覆蓋最後一層的髮飾

修飾細節後完成

最後,剩下眼睛
來講最後一步的【堆疊製眼】

完成以後大這上就是這樣
說到眼睛
眼睛的製程,如果角色的瞳孔夠大
或是比較好調整
建議用一般堆疊法

以此圖來解釋
任意拉出一個橢圓當做瞳孔的核心(最好是用漸層圖型的圓)
然後原地複製、貼上向上拉變性,不移動位置
再重新複製第二個圓,縮小,再垂直向下拉

如果眼睛夠大,還可以用墨水圖形做修飾
(白色,透明度50%左右)

就可以做出不會歪掉,而且稍帶有光澤的眼睛
*特注:不是每個眼睛都適合這麼做
特別是大顆大到水汪汪的那種

重點六:補充篇

看完文章大部分的各位
有沒有發現到
我一直沒有介紹到
【Symbol Art Editor EN】
這款工具,實際上,我覺得最好的用途不是用於創作

而是備分
特別在這講一下
Symbol Art的儲存位置
通常
SEGA的資料夾會放在【我的文件】中
打開資料夾會看到【SEGA】

我們從這裡開始
Symbol Art的儲存位置在【\\SEGA\\PHANTASYSTARONLINE2\\symbolarts】裡面
進去以後會看到三個資料夾
【cache】這裡有所有你看過的symbolarts都存在這裡
【import】用於匯入symbolarts
【user】用戶儲存symbolarts的資料夾
如果你有用過兩個使用者的帳號,裡面會有兩個子資料夾

【Symbol Art Editor EN】可以直接開啟symbolarts【.sar】的檔案
如果你在【cache】中看到喜歡的symbolarts就可以直接儲存起來到別的地方
之後無論是換電腦還是想要整包丟給朋友,就把【.sar】丟到【import】裡

在到遊戲中的進行載入就可以了

另外【Symbol Art Editor EN】有PSO2中所有製作Symbol Art的功能
但是
無法預覽原件形狀
也無法用滑鼠直接點選元件
但是
【Symbol Art Editor EN】的瀏覽模式下
比較不容易更變到其他物件
而且微調的細節更高
如果確定自己要調整的是哪些元件
使用【Symbol Art Editor EN】倒是也不錯



重點七:補充釋疑區

Q:沒有特別說明放大鏡的功能,那個有用處嗎?
A:沒有放大鏡會丁到眼睛脫窗,放大鏡只是讓自己輕鬆點

Q:定位點都糊在一起,太小了,我要怎麼知道我的滑鼠對到哪個點?
A:用放大鏡

Q:定位點糊在一起,元件動不了了
A:乖乖用鍵盤吧

Q:你的成品好像有點小?
A:我也這麼覺得,而且細節都看不到了,好慚愧阿...
A2:這就是塞太多細節的經典錯誤

Q:那你幹嘛挑小圖做?
A:因為突然發現放大鏡超級好用的w

Q:有些角度怎麼對也對不到,有些位置太小,不移動差一點,移動一次又爆增範圍
A:可以考慮換一個元件或是扭曲變形後再做旋轉

Q:承上,只差一點點的小缺塊沒補到也要重做嗎?
A:有一個小撇步,相同的元件重覆堆疊,會有稍微變大的效果,但元件用量大,不推薦

Q:Symbol Art滿了怎麼辦
A:參見補充篇

Q:看完這篇文章我還是不會畫,我該如何學起
A:永遠從仿畫開始,最簡單,也最好培養自信

Q:對於不想畫Symbol Art的人,這文章有用嗎?
A:你可以把Symbol Art上面的馬賽克或聖光撕下來,但是我會斜眼看你

Q:你很閒喔
A:我也這麼覺得

Q:可以幫我畫Symbol Art嗎?
A:如果我還是這麼閒的話...

Q:簡述Symbol Art的特色?
A:一疊色紙,不能剪不能折,無限種排列組合

補充說明:
*也許不是每個人都會覺得我畫得還OK,可能不適合教人,但我想我還是分享一下
*我沒有美術背景,只要有時間,什麼神畫都能做出來,我想讓大家知道
*我有提供一些軟體,沒有附上來源,不知道會不會被....?

收藏

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

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