臉譜製作指引 請參考此說明,來使用臉譜編輯器,製作您專屬的臉譜。 使用臉譜編輯器製作臉譜的方式目前分成兩種:方法 1:直接修改範本上的圖案內容,並反覆於機器人上測試效果。方法 2:重新設計臉譜,再將各個臉譜部位,依照欄位放入貼圖中。方法 2 的製程相對繁瑣,但靈活度與自由度較高。本篇教學主要會著重在方法 2 的使用方法, 在開始設計臉譜之前,我們會建議您使用能:1. 區分圖層2. 製作剪裁遮色片 / 遮罩3. 輸出透明圖檔的編輯軟體,eg. Adobe Illustrator、Adobe XD、Sketch。(由於物件較多,較不建議使用 Photoshop 等類似的編輯軟體。)並將每個物件(臉、眼睛、鼻子、嘴巴、情緒特效等)分開繪製。此外,也建議您將範本中的:「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」分別放置於不同的圖層中(範本內容將於下一段落詳細介紹)。 👉 本篇說明會以機器人的 CAT(花貓)臉譜作為素材範例。 📔 什麼是圖層? 圖層(Layer)的概念,就像是將一張張透明片疊在一起。可以透過圖層的透明區域,看到下面的圖層。每個圖層與下一個圖層(在套用特殊效果前)並不會互相影響。 通常會建議將需要分開編輯,或是最後需要分開存出圖檔的部分,畫在不同的圖層上,以利操作與修改。像是如上方敘述,我們會建議您在編輯臉譜編輯器所使用到的圖檔時,將範本所提供的「欄位範圍參考」、「黑色格線 & 欄位名稱」、「臉譜」放置於不同的圖層中。如此一來,您在最後輸出圖檔時,可以直接將「欄位範圍參考」以及「黑色格線 & 欄位名稱」的圖層關閉,不需要再使用橡皮擦清除該內容,減少編輯出錯的可能性。 將內容放置於不同圖層 將不需要的圖層「關閉」 📔 什麼是剪裁遮色片 / 遮罩? 剪裁遮色片 / 遮罩(Creat Clipping Mask / Mask)的用途,是讓您可以控制某個圖層的顯示範圍。這個概念經常被運用於上傳照片來製作個人頭像時。舉例來說,假如今天需要以花貓的臉來製作一個圓形的大頭貼,就可以替花貓上一個圓形的剪裁遮色片,用以控制只顯示圓形範圍內的內容。剪裁遮色片與遮罩在臉譜編輯器的圖檔製作中,主要會用來限制各個欄位的顯示、取用範圍(然而此功能非必要項目,只是有這個功能編輯時會比較方便)。p.s. 請參考您的繪圖軟體的使用說明,來製作剪裁遮色片或遮罩 只想要顯示圓形的部分 套用剪裁遮色片後的效果 📔 為什麼要輸出透明圖檔? 機器人在取用貼圖圖檔時,會以矩形為單位取用圖檔中的內容,再疊加在臉譜上。假如圖檔的背景不是透明的,就會有項目被蓋住無法顯示,因此請務必輸出透明背景的圖檔。 背景非透明的情況,可能會變成的模樣 臉譜範本說明 在此段落,會說明範本的下載方式,與介紹範本的內容。 下載範本 若您是第一次使用臉譜編輯器,且尚未取得 NUWA 所提供的任何素材,請先點擊左列側邊欄的「原生素材」,來進入下載素材的視窗。 在「原生素材」的頁面中,您可以點擊「下載全部」,來一次取得所有臉譜的素材檔。也可以點選各角色下方的「下載」,來取得單一角色的臉譜素材。 下載後您會得到一份名為「OriginalSkin_Materials」的資料夾,內含3 個角色的資料夾: 每個資料夾中又個別包含:.欄位範圍參考(0_Align_Ref).貼圖格線 ×1(0_CleanGrid).角色貼圖 ×4(UV_F1、UV_M1、UV_M2、UV_VFX01) 範本說明 臉譜編輯器提供三個角色骨架(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:聞東西/流鼻水.noseA:鼻子.cheekL/R:臉頰特徵(eg. 鬍鬚/臉紅).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、brow、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 > eye_RefA > hairA > Stripe > cheek > eyelid > pupilA > eyeball > faceA > background 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,上傳至《臉譜編輯器》啦! ← 上一篇:使用前準備與須知 前往閱讀:新增臉譜