臉譜製作指引

995 views

請參考此說明,來使用臉譜編輯器,製作您專屬的臉譜。

使用臉譜編輯器製作臉譜的方式目前分成兩種:

方法 1:直接修改範本上的圖案內容,並反覆於機器人上測試效果。
方法 2:重新設計臉譜,再將各個臉譜部位,依照欄位放入貼圖中。

方法 2 的製程相對繁瑣,但靈活度與自由度較高。本篇教學主要會著重在方法 2 的使用方法,

在開始設計臉譜之前,我們會建議您使用能:

1. 區分圖層
2. 製作剪裁遮色片 / 遮罩
3. 輸出透明圖檔

的編輯軟體,eg. Adobe Illustrator、Adobe XD、Sketch。(由於物件較多,較不建議使用 Photoshop 等類似的編輯軟體。)

並將每個物件(臉、眼睛、鼻子、嘴巴、情緒特效等)分開繪製。
此外,也建議您將範本中的:「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」分別放置於不同的圖層中(範本內容將於下一段落詳細介紹)。

👉 本篇說明會以機器人的 CAT(花貓)臉譜作為素材範例。

📔 什麼是圖層?

圖層(Layer)的概念,就像是將一張張透明片疊在一起。可以透過圖層的透明區域,看到下面的圖層。每個圖層與下一個圖層(在套用特殊效果前)並不會互相影響。

通常會建議將需要分開編輯,或是最後需要分開存出圖檔的部分,畫在不同的圖層上,以利操作與修改。

像是如上方敘述,我們會建議您在編輯臉譜編輯器所使用到的圖檔時,將範本所提供的「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」放置於不同的圖層中。

如此一來,您在最後輸出圖檔時,可以直接將「欄位範圍參考」以及「黑色格線 & 欄位名稱」的圖層關閉,不需要再使用橡皮擦清除該內容,減少編輯出錯的可能性。

將內容放置於不同圖層
將不需要的圖層「關閉」
📔 什麼是剪裁遮色片 / 遮罩?

剪裁遮色片 / 遮罩(Creat Clipping Mask / Mask)的用途,是讓您可以控制某個圖層的顯示範圍。這個概念經常被運用於上傳照片來製作個人頭像時。

舉例來說,假如今天需要以花貓的臉來製作一個圓形的大頭貼,就可以替花貓上一個圓形的剪裁遮色片,用以控制只顯示圓形範圍內的內容。

剪裁遮色片與遮罩在臉譜編輯器的圖檔製作中,主要會用來限制各個欄位的顯示、取用範圍(然而此功能非必要項目,只是有這個功能編輯時會比較方便)。

p.s. 請參考您的繪圖軟體的使用說明,來製作剪裁遮色片或遮罩

只想要顯示圓形的部分
套用剪裁遮色片後的效果
📔 為什麼要輸出透明圖檔?

機器人在取用貼圖圖檔時,會以矩形為單位取用圖檔中的內容,再疊加在臉譜上。
假如圖檔的背景不是透明的,就會有項目被蓋住無法顯示,因此請務必輸出透明背景的圖檔。

背景非透明的情況,可能會變成的模樣

臉譜範本說明

在此段落,會說明範本的下載方式,與介紹範本的內容。

下載範本

若您是第一次使用臉譜編輯器,且尚未取得臉譜範本,請點擊下圖左上角的「下載範本」來取得範本。

下載後您會得到一份名為「face-editor-sample」的資料夾,內含:

.欄位範圍參考(0_Align_Ref)
.貼圖格線 ×1(0_CleanGrid)
.角色貼圖範本 ×3(Bongo、Cat、Husky)

範本說明

臉譜編輯器提供三個角色骨架(Bongo、Cat、Husky),讓使用者作為範本與修改。

由於每個角色的動畫特性與骨架稍有不同,會需要大家在製作時,因應不同的需求,選擇不同角色,並參考該角色的貼圖範本來進行修改。

1. 認識角色

BONGO 凱比的預設表情,特色是簡單可愛的造型,擁有豐富的表情變化,如果您的臉譜角色想要擁有多種表情,且以情緒表現為主,能以 BONGO 做為您的臉譜範本。

CAT 的造型為花貓,特色是擁有一張又大又圓的眼睛,以及長長的鬍鬚,若您的臉譜設計需要運用到類似的元素,能以 CAT 作為您的使用範本喔。

HUSKY 的造型為哈士奇,特色是可以針對臉部造型製作更大範圍的斑紋與造型變化,若您的臉譜設計是擁有較多花色的角色,能以 HUSKY 作為您的角色設計範本。

2. 貼圖(UV)說明

每一個角色都需要四張貼圖(UV),您可以將貼圖視為有複數個欄位的圖檔,每個欄位中都需要放置與欄位對應的內容。

系統會截取欄位中的內容,並放到角色的臉上呈現。貼圖總共有以下幾張:
.UV_F1
.UV_M1
.UV_M2
.UV_VFX01

接下來會解釋每張貼圖的內容,以及各個欄位的對應意義。
⚠ 並非每個角色都會使用到所有的欄位,詳細的欄位使用狀況,請參考該角色的貼圖範本。
⚠ 貼圖欄位的內容以及位置,都經過系統定義,無法更改、調整位置或是範圍大小。

UV_F1(臉)

.hairA & stripe:花紋
.faceA:臉
.noseB:聞東西 or 哭的鼻子
.noseA:鼻子
.cheekL/R:鬍鬚
.eyeR_L/R_RefA、eyeR_L/R_RefB:眉毛(擇一或皆會用到,請參考該臉譜範例)
.eyeline_L/R:閉眼、眨眼
.eveball_L/R:眼球
.pupilA_L/R、pupilB_L/R:瞳孔(擇一或皆會用到,請參考該臉譜範例)

UV_M1(嘴型 1)

一個嘴型會以 4 張圖來做成動畫,因此每種嘴型都有 01~04 的編號。01 為閉嘴時,04 為嘴巴最大時,中間的 02、03 為補間影格。

.mouthA:一般嘴巴
.mouthB:一般說話(偏正面情緒)
.mouthC:說話(很高興或驚喜)
.mouthD:說話(負面情緒)

UV_M2(嘴型 2)

.mouthE:生氣或不悅
.mouthF:厭惡或害怕的情緒
.mouthG:飢餓或想吃
.mouthH:吃驚、驚喜

👉 說明範例所使用的「CAT」剛好沒有使用到 mouthF~H。

UV_VFX01(特效)

.surprise_VFX:驚喜的特效(左右共用)
.sadA_VFX_L/R:難過的特效
.sadB_VFX:難過的特效(中間)
.angerB_VFX:生氣的特效(左上)
.angerA_VFX:生氣的特效(中間)
.disgustA_VFX:噁心的特效
.eyebrow、cover、background、eyelid:眼皮、眨眼用圖層,請參考範本填滿顏色
.joy_VFX:開心的特效
.cheek_VFX:臉紅的特效
.disgustB_VFX_L/R:噁心的特效(臉頰)
.angerC_VFX:生氣的特效(右下)

3. 欄位範圍參考說明(0_Align_Ref)

在欄位範圍參考「0_Align_Ref」資料夾中,提供了標示了欄位範圍的檔案,以及每個欄位範圍在臉譜與貼圖上的對應位置(提供 .ai、.svg、.psd、.pdf 檔)。
您可以使用此欄位範圍參考,來進行設計臉譜後的後續貼圖編輯。

⚠ 欄位範圍參考為「大致對應」的參考範圍,最終仍需派發至機器人,並對照機器人上的實際臉譜,來調整貼圖內容與位置。

欄位範圍、臉譜與貼圖之間的對應關係
0_Align_Ref 資料夾內的內容
4. 貼圖格線(0_CleanGrid)

在貼圖格線資料夾「0_CleanGrid」中,為乾淨的「黑色格線 & 欄位名稱」檔。
您可以使用此檔案,來輔助製作臉譜最終的貼圖(UV)成品。

開始製作臉譜

臉譜製作與貼圖的關係相對繁複,我們會建議您跟循以下步驟,來製作您的專屬臉譜。

Step 1:設計臉譜

請先暫時無視以上所有的範例檔(範例內容將會在後續的步驟中才用到),用您使用的軟體,開啟一個 1024 × 576px 的工作範圍,用以繪製您的專屬臉譜。

繪製完成後如下圖:

📔 繪製與拆解物件時,假如需參考圖層順序,各欄位在機器人上的圖層順序為:
noseA > mouthA_01 > Stripe > eye_RefA > hairA > cheek > pupilA > eyeball > faceA

Step 2:拆解臉譜(切圖)

在開始拆解臉譜前,請先決定好您的臉譜要使用哪一個角色的骨架(Bongo、Cat、Husky)。相關說明可以參考此頁上方的「範本說明 > 1. 認識角色」。

請將範例中給予的欄位範圍參考(工作區域名稱:Ref_01),「垂直置中」與「水平置中」對齊您的臉譜,對齊完之後會如下圖所示。

接著,請執行以下步驟:

1. 解開切圖範圍的群組
2. 刪除背景(背景為對齊用)
3. 再次解開群組,解放各欄位的方框
4. 參考上述的貼圖欄位說明,將您的物件(眉毛、眼睛、鼻子、嘴巴等)與各自對應的方框進行群組 / 遮罩 / 剪裁遮色片。

eg. 將花貓的右邊眉毛與 eyeR_RefA 群組;額頭左上的花紋與 hairA 群組。
如下圖:

⚠⚠⚠ 請注意 ⚠⚠⚠
⛔  物件的範圍不能超出方框範圍,假如超出範圍,需調整臉譜以符合規範。
⚠ 貼圖上所標註的「L(Left 左邊)/R(Right 右邊)」為角色本身的「L(Left 左邊)/R(Right 右邊)」,請注意不要放反。
⚠ 方框的範圍為「大致對應」的參考範圍,最終仍需派發至機器人,並對照機器人上的實際臉譜,來調整貼圖內容與位置。

Step 3:將物件放至對應位置(拼 UV)

將臉譜拆解完成後,要將拆解完的物件放到貼圖(UV)的對應位置上。
對應位置大致如下圖:

此步驟做完後應如下圖:

接下來,請打開範本,將您的貼圖對照角色(Bongo、Cat、Husky)的原有貼圖,並補上缺漏的項目。
都補上後,就可以清除欄位範圍參考的矩形了!

全部完成後應如下圖:

👉 p.s. 請比照以上作法,製作 UV_VFX01 的特效內容,詳細的欄位參考範圍皆已附在範本之中(工作區域:Ref_VFX01)。

Step 4:輸出貼圖

在完成切圖後,需要將完成的貼圖輸出,才能上傳至《臉譜編輯器》。
每張貼圖應為 2048 × 2048px 尺寸的 .png,共四張。

⚠ 有可能會因為使用軟體的不同,導致匯入範本時,工作區域的範圍不是 2048×2048,此情況發生時,請手動調整貼圖尺寸。
⚠ 請注意,除了貼圖內容本身外,其他不想要顯示的部分「必須」為透明狀態,否則會遮蓋其他內容。

我們會建議您在輸出貼圖時,「不要輸出」用來對位的黑色格線 & 欄位名稱,以免黑色格線不小心被切入使用範圍。

清除黑色格線 & 欄位名稱的模樣應如下圖:

接下來,就可以帶著製作好的 png,上傳至《臉譜編輯器》啦!

CONTENTS