我们在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.
1.样式方向
在保持引领潮流的街头时尚作为主方向的同时,我们分析十几到二十几岁用户的口味以确定主要用户喜欢的主题,并将这些主题应用于角色的服饰以及房间设计中。每次主题设计秉承的原则都是时尚和年轻感。
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.
服装主题分为两个方向:当代主题,即设计最新流行的日常可以穿的服装;特殊主题,即应用于特殊节日或特殊概念的服装,比如圣诞节和情人节。每个服装主题以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.
设计当代主题时,我们通过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.
特殊主题稍有不慎就会显得幼稚或夸张,我们通过在设计中加入现代时尚元素以保持时尚感。另外,对于喜欢日本漫画或游戏等幻想作品的用户,我们也尝试将幻想元素应用到适合的主题中。
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.
每次设计服装前,我们都会分析最新的时尚趋势以反映年轻用户的品味。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. 设计过程
角色设计可以分为四步。首先,做一些研究和构思来确定风格方向;然后通过创意草图决定详细的设计;大致确定设计方向后,进行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.
复活节主题用时尚商品搭配可爱的兔子服装。具有日漫感的,夸张的兔子耳朵和尾巴可以直观地反映主题 ,渔网袜、长靴子和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.
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.
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.
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.
<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.
<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.
雕刻完成后,网格会变得非常大,因此我们将建模数据更改为图像并应用于法线贴图中。这种方法允许将褶皱应用于纹理,所以人们可能会觉得像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.
2) Hairstyle 发型
通过扁平的形状结构,不规则的头发表现以及反光效果,我们将发型设计得之前更有质量。
By applying flat shape structure, irregular hair expression and reflection effect, we can design the hairstyle in better quality than before.
< 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.
<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.
<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.
为让用户可以创建并享受能彰显他们身份的各种角色样式,卡噗将继续设计反映不同主题的作品。通过使用时尚潮流的样式和技术以扩大表达范围,我们尝试将卡噗角色设计得更加年轻和生动有活力。我们希望用户能够在卡噗世界中继续度过美好的时光。
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.
扫码体验卡噗APP
PS:ISUX 开通粉丝QQ群啦!
欢迎各大设计师加入和我们一起聊设计~
添加QQ群:764345161
或长按以下二维码
以下ISUX文章,你可能也感兴趣
▽
2020-2021 设计趋势ISUX报告 · 用户体验篇
Q语言 | 有生机的设计
【IP设计秘笈】 爆! 噗噗星人来袭!
有内味儿了 | QQ黄脸表情进化日记
静水流深 | QQ闪屏设定
感谢阅读,以上内容均由腾讯ISUX团队原创设计,以及腾讯ISUX版权所有,转载请注明出处,违者必究,谢谢您的合作。注明出处格式:
文章来自公众号:
腾讯ISUX
(https://isux.tencent.com/articles/kapu-avatar)