臉譜製作指引
請參考此說明，來使用臉譜編輯器，製作您專屬的臉譜。
使用臉譜編輯器製作臉譜的方式目前分成兩種：
方法 1：直接修改範本上的圖案內容，並反覆於機器人上測試效果。
方法 2：重新設計臉譜，再將各個臉譜部位，依照欄位放入貼圖中。
方法 2 的製程相對繁瑣，但靈活度與自由度較高。本篇教學主要會著重在方法 2 的使用方法，
臉譜範本說明
在此段落，會：
- 介紹預設角色的特點
- 說明範本內容、下載方式
- 說明貼圖（UV）內容
💪 認識角色
臉譜編輯器提供三個角色範本（Bongo、Cat、Husky），讓使用者作為參考，或是用以修改。
由於每個角色的五官結構與適用風格皆不相同，請參考既有的樣式、圖案切分方式，來判斷您的設計適合使用哪一個角色的範本來修改，以達到較佳的呈現效果。
以下將逐一說明每個角色的範本特性。
BONGO｜調皮愛玩的機器人，講話有時會讓人又愛又恨！
BONGO 為凱比的預設臉部造型，既簡單可愛又具科技感，擁有豐富的表情變化。適合套用以色塊、線段等簡單風格的角色設計。
⚠️️注意事項：不適合過於複雜的臉部造型。
CAT｜360 度無死角的可愛貓咪，十分討人喜愛！
CAT 的造型為花貓。擁有一雙又大又圓的眼睛、斑點、以及柔軟的鬚鬚。在特效的加持之下簡直可愛到犯規。
CAT 適合套用至稍為複雜的角色設計，有非常多的特效表現，可以很好地用表情呈現戲劇效果。
⚠️️注意事項：眼睛周圍不建議有圖樣造型。
HUSKY｜看起來一臉正經的狗狗，一不小心就會露出笨笨的表情！
HUSKY 的造型為哈士奇。垂垂的眼皮、毛茸茸的臉部毛髮以及讓人感覺酷酷的異色瞳孔！適合套用在有大面積臉部造型的角色上，也提供與 CAT（花貓）不一樣風格的角色性格。
⚠️️注意事項：眼睛、鼻子、嘴巴等的位置會比 BONGO 和 CAT 低一些，眼皮也是斜的。
現在您已經對我們內建的角色有所認識，接下我們來下載範本並開始繪製臉譜吧！
📔 下載範本
若您是第一次使用臉譜編輯器，且尚未取得 NUWA 提供的原生素材，請先點擊左側欄的「原生素材」，以進入下載素材的視窗。
每個角色資料夾中又個別包含：
- 欄位範圍參考（0_Align_Ref）
- 貼圖格線 ×1（0_CleanGrid）
- 表情預覽參考 ×1（0_Illustrator_Ref）
- 角色貼圖 ×4（UV_F1、UV_M1、UV_M2、UV_VFX01）
✨ 貼圖（UV）說明
臉譜是由貼圖內容（UV）組成。您可以將貼圖視為有複數個欄位的圖檔，系統會從貼圖欄位中截取五官內容，組合成完整的角色臉。每一個角色都由 4 張貼圖內容組成：
- UV_F1
- UV_M1
- UV_M2
- UV_VFX01
接下來會解釋每張貼圖的內容，以及各個欄位的對應意義。說明將會以 CAT（花貓）臉譜作為素材範例。
⚠️️並非每個角色都會使用到所有的欄位。詳細的欄位使用情況，請參考該角色的貼圖範本。
⚠️️貼圖欄位的內容以及位置，都經過系統定義，無法更改、調整位置或是範圍大小。
UV_F1（臉）
．Hair：頭髮
．Snot：流鼻水
．Nose：鼻子
．Facial Features：臉部造型
．Cheek：臉頰
．Face：臉型
．Eyebrow：眉毛
．Eye Closed：閉眼、眨眼
．Eye：眼球
．Eye pupil：瞳孔
．Eye pupil – wide open：瞳孔（吃驚）
UV_M1（嘴型 1）
一個嘴型會以 4 張圖從左至右來做成動畫。因此每種嘴型都有從左到右張開的過程。從左邊嘴巴閉上的狀態，補間到最右方嘴巴張開的狀態。
．Talking 1 – Normal：對話 1（普通）
．Talking 2 – Other：對話 2（其他）
．Talking – Happy：嘴型（開心）
．Talking – Displeased：嘴型（不滿）
⚠ ️請在對話 1（普通）和對話2（其他）中，填入同樣的內容
UV_M2（嘴型 2）
．Talking – Angry：嘴型（生氣）
．Talking – Uncomfortable：嘴型（不舒服）
．Talking – Unplatable：嘴型（不好吃）
．Talking – Excited：嘴型（Wow）
👉 說明範例所使用的「CAT」剛好沒有使用到嘴型（不舒服）、嘴型（不好吃）和嘴型（Wow）。
⚠️️ 建議不要在有「🚫」符號的欄位填寫內容，因為在該欄位中填入的內容，不會被顯示出來。
UV_VFX01（特效）
．Loved ①：喜愛的特效（眼睛，左右共用）
．Sad_A：想哭的特效（眼睛）
．Sad_B：想哭的特效（正中間）
．Angry_A：憤怒的特效（正中間）
．Angry_B：憤怒的特效（左上方）
．Angry_C：憤怒的特效（右下方）
．Sick_A：噁心/不舒服的特效（正中間）
．Sick_B：噁心/不舒服的特效（臉頰）
．Loved ②：喜愛的特效（正中間，BONGO 和 CAT 特有特效）
．Scared：害怕（正中間，HUSKY 特有特效）
．Blushing：臉紅的特效（正中間）
．EyeLid：眼皮（此區域會被拉大，請填滿顏色並使用單一色塊，建議與臉部的顏色相同）
．Background：背景色（此區域會被拉大，請填滿顏色並使用單一色塊）
#️⃣ 欄位範圍參考說明（0_Align_Ref）
在欄位範圍參考「0_Align_Ref」資料夾中，提供了標示了欄位範圍的檔案，以及每個欄位範圍在臉譜與貼圖上的對應位置（提供 .ai、.svg、.psd、.pdf 檔）。
您可以使用此欄位範圍參考，來進行設計臉譜後的後續貼圖編輯。
⚠ 欄位範圍參考為「大致對應」的參考範圍，最終仍需派發至機器人，並對照機器人上的實際臉譜，來調整貼圖內容與位置。
🔲 貼圖格線（0_CleanGrid）
在貼圖格線資料夾「0_CleanGrid」中，為乾淨的「黑色格線 & 欄位名稱」檔。
您可以使用此檔案，來輔助製作臉譜最終的貼圖（UV）成品。
臉譜製作方法
目前製作臉譜的方式大致分成兩種：
- 塗改創作
- 使用圖像編輯軟體設計。
本篇教學主要會著重在方法 2 的使用方法。
方法 1｜塗改創作
方法 2｜使用圖像編輯軟體
使用圖像編輯軟體創作設計臉譜，再將各個臉譜部位，依照欄位放入貼圖中。
此作法的製程相對繁瑣，但靈活度與自由度較高。
📔 圖像編輯軟體｜功能需求
在開始設計臉譜之前，我們建議您使用具備以下功能的圖像編輯軟體，並將每個物件（臉、眼睛、鼻子、嘴巴、情緒特效等）分開繪製。
- 區分圖層
- 製作剪裁遮色片 / 遮罩
- 輸出透明圖檔
eg. Adobe Illustrator、Adobe XD、Sketch 等。
⚠ 由於物件較多，較不建議使用 Photoshop 等類似的圖像編輯軟體。
此外，也建議您將原生素材中的：「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」分別放置於不同的圖層中。
📔 圖像編輯概念
📔 什麼是圖層？
圖層（Layer）的概念，就像是將一張張透明片疊在一起。可以透過圖層的透明區域，看到下面的圖層。每個圖層與下一個圖層（在套用特殊效果前）並不會互相影響。
通常會建議將需要分開編輯，或是最後需要分開存出圖檔的部分，畫在不同的圖層上，以利操作與修改。
像是如上方敘述，我們會建議您在編輯臉譜編輯器所使用到的圖檔時，將範本所提供的「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」放置於不同的圖層中。
如此一來，您在最後輸出圖檔時，可以直接將「欄位範圍參考」以及「黑色格線 & 欄位名稱」的圖層關閉，不需要再使用橡皮擦清除該內容，減少編輯出錯的可能性。
📔 什麼是剪裁遮色片 / 遮罩？
剪裁遮色片 / 遮罩（Creat Clipping Mask / Mask）的用途，是讓您可以控制某個圖層的顯示範圍。這個概念經常被運用於上傳照片來製作個人頭像時。
舉例來說，假如今天需要以花貓的臉來製作一個圓形的大頭貼，就可以替花貓上一個圓形的剪裁遮色片，用以控制只顯示圓形範圍內的內容。
剪裁遮色片與遮罩在臉譜編輯器的圖檔製作中，主要會用來限制各個欄位的顯示、取用範圍（然而此功能非必要項目，只是有這個功能編輯時會比較方便）。
p.s. 請參考您的繪圖軟體的使用說明，來製作剪裁遮色片或遮罩
📔 為什麼要輸出透明圖檔？
機器人在取用貼圖圖檔時，會以矩形為單位取用圖檔中的內容，再疊加在臉譜上。
假如圖檔的背景不是透明的，就會有項目被蓋住無法顯示，因此請務必輸出透明背景的 .png 圖檔。
開始製作臉譜
臉譜製作與貼圖的關係相對複雜，我們會建議您跟循以下步驟，來製作您的專屬臉譜。
👉本篇說明會以機器人的 CAT（花貓）臉譜作為素材範例。
Step 1：設計臉譜
首先，請開啟您習慣使用的圖像編輯軟體，並建立一個1024 × 567px 的工作區域，用以繪製您的專屬臉譜。
繪製完成後如下圖：
📔繪製與拆解物件時，假如需參考圖層順序，各欄位在機器人上的圖層順序為：
Nose > Mouth > Eyebrow > Hair > Facial > Cheek > Eyelid > Pupil > Eye > Face > Background
（如果您使用較舊版本的原生素材，順序為：
noseA > mouthA_01 > eye_RefA > hairA > Stripe > cheek > eyelid > pupilA > eyeball > faceA > background）
Step 2：拆解臉譜（切圖）
在開始拆解臉譜前，請先決定好您的臉譜要使用哪一個範本（BONGO、CAT、HUSKY）。相關說明可以參考此頁上方的「臉譜範本說明 > 認識角色」。
請將範例中給予的欄位範圍參考（工作區域名稱：Face_Position Ref），置中對齊至您的臉譜上，對齊完之後會如下圖所示。
接著，請執行以下步驟：
- 解開切圖範圍的群組，解放各欄位的方框
- 參考上述的貼圖欄位說明，將您的物件（眉毛、眼睛、鼻子、嘴巴等）與各自對應的方框進行群組 / 遮罩 / 剪裁遮色片。
- 將 CAT（花貓）的右邊眉毛與 Eyebrow 群組；額頭左上的花紋與 Hair 群組。如下圖：
⚠⚠⚠ 請注意 ⚠⚠⚠
⛔物件的範圍不能超出方框範圍，假如超出範圍，需調整您的設計以符合規範。
⚠️方框的範圍為「大致對應」的參考範圍，最終仍需派發至機器人，並對照機器人上的實際臉譜，來調整貼圖內容與位置。
Step 3：將物件放至對應位置（拼 UV）
將臉譜拆解完成後，要將拆解完的物件放到貼圖（UV）的對應位置上。
對應位置大致如下圖：
此步驟做完後應如下圖：
接下來，請打開範本，將您的貼圖對照角色（BONGO、CAT、HUSKY）的原有貼圖，並補上缺漏的項目。 都補上後，就可以清除欄位範圍參考的矩形了！
全部完成後應如下圖：
👉 p.s. 請比照以上作法，製作 UV_VFX01 的特效內容，詳細的欄位參考範圍皆已附在範本之中（工作區域：Ref_VFX01）。
Step 4：輸出貼圖
在完成切圖後，需要將完成的貼圖輸出，才能上傳至《臉譜編輯器》。
每張貼圖應為 2048 × 2048px 尺寸的 .png，共四張。
⚠️ 範本匯入不同的繪圖軟體時，工作區域的尺寸有可能發生誤差，請確認檔案的工作區域尺寸為 2048 × 2048px。
⚠️ 請注意，除了貼圖內容本身外，其他不想要顯示的部分「必須」為透明狀態，否則會遮蓋其他內容。
我們會建議您在輸出貼圖時，「不要輸出」用來對位的黑色格線 & 欄位名稱，以免黑色格線不小心被切入使用範圍。
清除黑色格線 & 欄位名稱的模樣應如下圖：
接下來，就可以帶著製作好的 png，上傳至《臉譜編輯器》啦！
附加：表情預覽
在資料夾「0_Illustrator_Ref」中，有用來預覽表情的檔案。
若您可以使用 Adobe Illustrator 的話，請使用此文件來預覽您的臉譜角色表情，來輔助製作臉譜。
請把剛才輸出的四個圖檔複製至資料夾「0_Illustrator_Ref」中，並檢查檔案命名是否為「UV_F1.png」、「UV_M1.png」、「UV_M2.png」跟「UV_VFX01.png」。
複製並檢查完畢後，就可以跟據原本參考的角色，打開對應的預覽文件。此時即可看到該角色的表情預覽。
