3D角色設定全析百圖斬

ISUX設計發表於2020-07-08
1.jpg

我們在3D角色模型與動畫設定上積累厚實,在卡噗角色設定中,我們做了很多的風格嘗試以及整體配飾穿搭,去達到新銳時尚的品牌目標。回看角色設定已超過100體,在此分享整體設計思路過程與百圖斬。

早期卡噗設計,我們專注於確定角色的整體比例與樣式,並在設計優化後將所有內容穩定地應用到系統中。卡噗服務啟動後的一年,我們花更多時間來確定角色的時尚風格。本文將詳細分享卡噗角色樣式的設計過程。
In the early design stage of 3D avatar service Kapu, we focused on determining the overall ratio and style of the avatar, and applying everything in the system stably by optimizing the designs. But during the first year after the service launch, we spent more time on deciding the avatar fashion style. In this article, we will share the process of  character styling for Kapu in detail.

2.png

1.樣式方向

3.png

在保持引領潮流的街頭時尚作為主方向的同時,我們分析十幾到二十幾歲使用者的口味以確定主要使用者喜歡的主題,並將這些主題應用於角色的服飾以及房間設計中。每次主題設計秉承的原則都是時尚和年輕感。
While maintaining the street fashion as a main direction which is leading the current fashion trend, we analyzed the taste of the 10-20s to determine the themes preferred by the main users. We apply these themes to character costumes along with room design. Every time we design for various themes,  the principle of applying trendy and young feeling is common to all designs.

4.png

服裝主題分為兩個方向:當代主題,即設計最新流行的日常可以穿的服裝;特殊主題,即應用於特殊節日或特殊概念的服裝,比如聖誕節和情人節。每個服裝主題以7:3的比例來設計。為擴大使用者的選擇範圍,設計各種樣式的服裝是很重要的,我們儘量不在整體上失去時尚感。
The theme for the costumes can be divided into two main directions: contemporary theme, which designs the latest fashionable clothes that can be worn on a daily basis, and special theme, which applies special events such as Christmas and Valentine's Day or specific concepts. We design each theme at a ratio of 7:3 for the costume designs. It is important to design various styles of clothes to broaden the choice of users, but we try not to lose the trendy feeling as a whole.

5.png

設計當代主題時,我們通過ins或時尚潮流網站分析時尚趨勢,並將它們應用到角色中。將“潮流”、“現代”和“時尚”定義為當代主題的關鍵詞,在設計服裝時賦予潮流感。
When designing contemporary theme, we analyze the latest fashion trends through Instagram or fashion trend sites and apply them to avatar fashion. We defined 'trendy', 'modern' and 'stylish' as keywords for contemporary theme and try to give a trendy impression when designing the costumes.

6.png

特殊主題稍有不慎就會顯得幼稚或誇張,我們通過在設計中加入現代時尚元素以保持時尚感。另外,對於喜歡日本漫畫或遊戲等幻想作品的使用者,我們也嘗試將幻想元素應用到適合的主題中。
In the case of special theme, it can become too childish or exaggerated but we try to maintain trendy style by adding modern fashion elements on designs. Also, for the users who prefer fantasy feeling in Japanese manga or games, we try to apply the fantasy elements to the themes which fits.

9.png

每次設計服裝前,我們都會分析最新的時尚趨勢以反映年輕使用者的品味。2020年,“復古”,“柔和色彩”和“超大號”服裝是主要趨勢,我們經常將其應用於服裝設計中。
We analyze the latest fashion trends every time before we design the costumes to reflect the taste of young users. In 2020, ‘retro’, ‘pastel color’ and ‘over-sized’ costumes emerged as a major trend in fashion which we often apply to costume designs.

2. 設計過程

8.png

角色設計可以分為四步。首先,做一些研究和構思來確定風格方向;然後通過創意草圖決定詳細的設計;大致確定設計方向後,進行3D建模和對映。本節將詳細解釋每一個過程。
The character design process can be divided into four steps. First, we do some research and ideation to define style direction then decide on detailed design through idea sketches. When the design direction is roughly decided, 3D modeling and mapping processes can be carried out. In this section, we will explain each process in detail.

1) Research and Ideation  研究與構思

為了找到適合每個主題的方向,從而確定總體風格方向,在設計之前要進行研究。比如,都市性主題中,'Minimal', 'Cool' 和 'Sexy'是關鍵詞,根據這個方向,房間被設計成時尚沙龍的樣式。我們根據整個主題和關鍵詞搜尋適當的參考,再對它們進行分析以找到適用的樣式。
Before we start to design, research is conducted to find directions that fit each theme which will determine the overall style direction. For example, in the case of Metrosexual themes, 'Minimal', 'Cool' and 'Sexy' were the keywords so styling salon was designed for the room, following this direction. Based on the entire theme and keywords, we search for appropriate references and analyze them to find applicable style.


都市性主題緊跟時尚趨勢,用扎染、柔和色以及超大號等樣式反映無性別感和表達主題。
In Metrosexual theme, styles such as ‘tie-die', ‘pastel color' and ‘over-sized' were applied following the fashion trend and also reflected the gender-less feeling to express the theme.

10.png

復活節主題用時尚商品搭配可愛的兔子服裝。具有日漫感的,誇張的兔子耳朵和尾巴可以直觀地反映主題 ,漁網襪、長靴子和chokers則反映了時尚趨勢。
For Easter theme, some trendy fashion items were applied with cute rabbit costumes. The exaggerated rabbit ears and tails that feel like Japanese cartoon elements intuitively reflect the theme, while mesh stockings, long boots and chokers are points that reflect fashion trends.

2) Idea Sketch 概念草圖

總體風格方向確定後,需要思考特定的服裝和髮型。我們嘗試用拼貼參考影像,或畫素描的方式來確定特定的設計。概念草圖不僅可以作為3D建模的嚮導,還決定了服裝的主要方向,因此繪製和輸出清晰的影像特別重要。對整體設計比如服裝、合身性、 髮型,細節元素、色彩組合等進行想象也很重要。
When overall style direction is set, we need to think about specific costume designs and hairstyles. We try collage or sketch using reference images to decide specific designs. The idea sketches not only guide 3D modeling work but also determine the main direction of the costume, so it is important to draw a clear image about the output. It is important to imagine the overall design such as costume, fit, hair style, detail element, color combination.

11.png

12.png

3) 3D Modeling 3D建模

實際3D建模我們要考慮角色比例找到合適的服裝比例和服裝契合度。儘管實際上是很漂亮的服裝,應用到角色可能也會不好看,所以在進行3D建模時,優化細節很重要。
During the actual 3D modeling process, we try to find the appropriate ratio and fit of the costume considering the proportion of the avatar. Although it is a pretty costume in real, they may not look nice when applied to avatars so it is important to optimize the details of the avatar when we work on the 3D modeling.

13.png

4) Mapping 對映

在設計的最後一步對映中,衣服材質和細節的應用可以提高設計的完整性。
In the mapping progress which is the last step of design, the material and details of the costume are applied which can enhance the completeness of design.

14.png

UV是對映最重要的部分,因為它可以產生褶皺,並且可以用法線貼圖表達材質。UV的建立取決於服裝設計。要根據服裝的切割線,比如肩線和褲子的切割線去建立UV,這樣當紋理集中在一起時才不會出錯。
UV is the most important part in mapping progress because it can make wrinkles and express materials using normal map. The way to make UVs depends on the costume design and it is important to make UVs following the cutting line of the costume such as shoulder lines or pants cutting line so that where textures meet together does not go wrong.

3. 細節呈現

新近設計的服裝與早期相比,細節上有了很多的改進,褶皺和頭髮的改進最為明顯。
Recently, the design of character costumes has improved on the detail compared to the early ones, especially the expression of wrinkles and hair is the most noticeable improvement.

1) Clothes Wrinkles 衣服褶皺

通過呈現衣服褶皺,我們可以更好地展示材質並使角色的衣服更加逼真。呈現衣服褶皺的主要方法有兩種,通過模型本身或使用雕刻。
By expressing wrinkles on clothes, we can show the materials better and make more realistic avatar costumes. There are two main ways to express wrinkles in clothes: the way to express wrinkles in the modeling itself and the way to use the sculpting method.

15.png

<Modeling Method>  模型

通過模型本身表現褶皺的方法更直觀,由於模型可以直接應用於系統,也更容易檢查整體的形狀。
The method to express wrinkles by modeling itself is more intuitive and since modeling can be applied directly to the system, it is easier to check the overall shape.

16.gif

<Sculpting Method> 雕刻

雕刻是指在法線貼圖中進行雕刻工作。因為“雕刻”是一種使模型看起來像是真正的雕刻的方法,它更容易表達複雜的形式,也可以更詳細地表現褶皺和紋理。
The sculpting method is to apply the sculpting work to the normal map. Because 'sculpting' is a method of making the modeling as if it is literally sculpting, it is easier to express complex forms and also can make wrinkles and textures in detail.

17.gif

雕刻完成後,網格會變得非常大,因此我們將建模資料更改為影像並應用於法線貼圖中。這種方法允許將褶皺應用於紋理,所以人們可能會覺得像2D影像。但因為它可以顯示褶皺和材質的細節,上述兩種方法都可用於建立逼真的褶皺。
Mesh can become very large when sculpting is completed so we change modeling data into an image and apply to the normal map. This method allows wrinkles to be applied to textures, so people might feel like a 2D images. However, this method can express the details of wrinkles and materials, so both method above can be used to create realistic wrinkles.

18.png

2) Hairstyle 髮型

通過扁平的形狀結構,不規則的頭發表現以及反光效果,我們將髮型設計得之前更有質量。
By applying flat shape structure, irregular hair expression and reflection effect, we can design the hairstyle in better quality than before.

19.png

< Use flat shape on the modeling > 在建模中使用扁平形狀

早期設計,我們將頭發表現為圓柱形,但當這種圓柱形應用到系統中時,頭髮看起來會有點不自然,有時會形成一層,或者劉海的發線變得凹凸不平。使用扁平的形狀結構後,最近這個問題得到了解決。
In the early design stage we expressed the hair in cylindrical form but when this cylinder type was applied to the system, it looked a bit unnatural and sometimes a layer was made or the hair line of the bangs became bumpy. Recently, this problem has been supplemented by using a flat shape structure on the hair.

20.png

<Apply random modeling shape>  隨機形狀

呈現頭髮時,寬和窄的形狀都要表現出來。如果僅用相似的形狀,頭髮看起來可能會過於的簡單,這不是一個有效的方法。隨機應用寬和窄的形狀,頭髮看起來更自然,細節也更好。
When expressing hair, it is important to express the wide and narrow shape together. If you express hair only in a similar shape, the hair may look to simple which is not an effective way to express the hair. Therefore, if wide and narrow shapes are applied randomly, the hair will look much more natural and the details will be better.

21.png

<Apply Shiny Material> 明亮材料

頭髮的顏色會根據反射顏色和反射值產生很大的變化,如果不用反射值,髮色會很粗糙並且沒有光澤。在頭髮上應用反射,實際的頭髮顏色和反射的顏色混合在一起,呈現出豐富而又有吸引力的色彩。此外反射光可以使頭髮看起來更加生動。
The hair color can vary a lot according to the reflection color and value, so if he reflection value is not applied, the hair color can become stronger and matte. By applying the reflection on the hair, the actual hair color and the reflected color can be mixed together so rich and attractive color can be embodied on the hair. Moreover, the hair will look more vivid through the part in which the light is reflected.  

22.png

為讓使用者可以建立並享受能彰顯他們身份的各種角色樣式,卡噗將繼續設計反映不同主題的作品。通過使用時尚潮流的樣式和技術以擴大表達範圍,我們嘗試將卡噗角色設計得更加年輕和生動有活力。我們希望使用者能夠在卡噗世界中繼續度過美好的時光。
Kapu will continue to strive to design that reflect various themes so that users can create and enjoy various avatar styles that express their identity. We try to design Kapu characters more young and lively by expanding the range of expressions with trendy styling and technics. I hope that many users will be able to keep enjoy their time in Kapu world.

32.jpg

作者: ISUX設計  
來源:騰訊ISUX
原地址:https://mp.weixin.qq.com/s/EZLDLtcFJCMBUFoP3yr1sQ






相關文章