菜单

二次元探索 | 卡噗3D角色设定

来自:腾讯ISUX kay Jin 阅读数:52 2019/10/16

二次元探索 | 卡噗3D角色设定

         

DESIGN




随着3D 角色成为一种趋势,QQ的厘米秀也从原来的2D升级为3D风格。为了设计出与众不同的3D 角色,同时又能体现QQ用户的品味,我们经过了大量的调研和测试。在本文中,我们将详细介绍厘米秀设计的整个过程。

As app/game using 3D avatar became a trend, QQ’s avatar service CMshow(厘米秀) has been renovated from the existing 2D to 3D style. To design a new style of 3D avatar which can be different from the other 3D avatars and also applying the QQ users’ tastes, it has undergone a lot of investigation and test processes. In this article, we will introduce the whole process of CMshow design in detail.

3D 아바타를 이용한 앱/게임이 트렌드로 자리 잡게 되면서 QQ의 아바타 서비스인 厘米秀(CMshow)는 기존의 2D 형태에서 3D 스타일로 리뉴얼 작업을 진행하게 되었다. 기존에 이미 볼 수 있었던 3D 아바타 형태들과 차별화되면서도, QQ 사용자들의 취향에 맞는 디자인을 하기 위하여 내부에서는 많은 조사와 테스트 과정을 거쳤다. 이번 기사에서는 厘米秀 디자인을 진행했던 전체 과정에 대하여 상세히 소개하려고 한다. 


STEP 1

                       

风格研究 Research about 3D avatar style

在开始设计之前,我们对市场上各种类型的3D 角色风格进行了整体调查。虽然已经有各种各样的avatar风格,但我们专注10-20岁QQ主要用户的品味,设定了一个方向。大的方向被确定为略微夸张和有特色的样式,而不是成熟的过于逼真的,从而使年轻用户获得可爱而友好的感觉。

Before we started the design progress, we conducted a survey on various types of 3D avatar styles in the market as a whole. Although there have already been a variety of avatar styles, we have set a direction to focus on the tastes of QQ's main users, which are 10-20s. The big direction was decided to a slightly exaggerated and characterized style rather than an overly realistic description that can give mature feeling so that young users can get cute and friendly feeling.

본격적으로 디자인을 하기에 앞서 전반적으로 시장에 나와있는 다양한 형태의 3D 아바타 스타일에 대한 조사를 진행했다. 이미 다양한 아바타 스타일이 존재했지만 우리는 QQ의 주요 사용자인 10-20대 사용자들의 취향에 집중하기 위한 방향성을 정했다. 어린 사용자들이 귀엽고 친근한 느낌을 받을 수 있도록 자칫 성숙한 느낌을 자아낼 수 있는 지나치게 사실적인 묘사보다는 조금은 과장되고 캐릭터화 된 스타일로 큰 방향성을 정하였다. 


STEP 2

                          

确定比例 Decide the body ratio of avatar

首先,角色的身体比例设定为1:4.5。我们进行了几项测试,目的是找出一种比例,让脸型略大一些,既不影响整体造型,又给人一种可爱的印象。为了使各种动作在小屏幕上清晰可见,手和脚被设计得很大,并且手臂和腿部被延长,以便可以应用各种姿势和动画。此外,男性和女性的关节厚度相同,所以不同的服装可以自由交换。

First, the avatar body ratio was set at 1:4.5. Several tests were conducted to find a ratio that did not hurt the overall style while giving a cute impression by making the face slightly big. In order to make the movement visible on a small screen, the hands and feet were designed to be large, and the arms and legs were extended so that various poses and animations could be applied. In addition, the thickness of the joints are identical between men and women so different costumes can be freely exchangeable.

우선 아바타 신체 비율은 1:4.5로 설정하였다. 실제보다 얼굴을 크게 하여 귀여운 인상을 주면서도 전체적인 스타일을 해치지 않는 비율을 찾기 위해 여러번의 테스트 과정을 거쳤다. 작은 화면에서 동작이 잘 보이게 하기 위하여 손 발을 크게 디자인 하였고, 팔과 다리는 길게 하여 다양한 포즈와 애니메이션을 소화할 수 있도록 하였다. 또한 남녀 구분 없이 결합부위의 두께는 동일하게 맞추어 서로 다른 의상이 자유롭게 호환될 수 있는 구조를 반영하였다.


STEP 3

                    

设计人脸 Design the face

1) 漫画风格的脸 Manga style face

在设计对角色有重要影响的人脸上,项目早期我们做了许多实验。主要分为三大方向进行 :被认为是迪士尼角色的西方风格,体现亚洲特色的东方风格,日漫常见的漫画风格。

西方风格和已经非常流行的3D 角色 Zepeto很接近;参照了中国艺人和中国动画设计的东方风格缺乏新鲜感,似乎没有什么吸引力;最后的日漫风格给人可爱亲切之感,满足许多人的品味,同时也区别于其他3D角色的设计。

There were many experimental processes in the early stage to design the face which most greatly influenced the impression of the avatar. The test was conducted by dividing into three major directions: western style that can be thought of as reminiscent of Disney characters, oriental style reflecting asian characteristics, and comic style that can be seen frequently in Japanese comics.

Western styles gave a similar impression to Zepeto, a 3D avatar service that has already become very popular, and oriental styles designed with reference to Chinese entertainers and Chinese animations did not seem attractive as they look old. The last Japanese comic style that we reviewed gave a cute and friendly feeling, and also satisfy the taste of many people while differentiated from other 3D avatar designs.

아바타의 인상을 가장 크게 좌우하는 얼굴 디자인을 하기 위하여 초반에 많은 실험 과정이 있었다. 흔히 디즈니 캐릭터들을 연상하면 생각할 수 있는 서구적인 스타일, 아시아인들의 특징을 반영한 동양적인 스타일, 마지막으로 일본 만화에서 자주 볼 수 있는 만화 스타일 세 가지로 큰 방향을 나누어 테스트를 진행하였다. 

서구적인 스타일은 이미 큰 인기를 끌고 있는 유사한 서비스인 제페토(Zepeto)와 비슷한 인상을 주었고, 중국 연예인과 중국 애니메이션을 참고로 하여 디자인된 동양적인 스타일은 나이가 들어보여 매력적으로 보이지 않았다. 마지막으로 검토했던 일본 만화 스타일은 귀엽고 친근한 느낌을 주면서도 기존의 다른 3D 아바타 디자인과 차별화된 느낌을 전달하면서 많은 사람들의 취향을 만족시킬 수 있었다.

2) 可修改的结构 Modifiable structure

在基本的人脸设计中我们应用了Blend系统,使用户能够优化自己的avatar,该系统允许用户切换眼睛、鼻子、嘴巴、下巴线等形状。因为在系统上可以详细地调整形状,所以能够设计出各种类型的人脸。

In the basic face design, the blend system is applied to enable the users to optimize their avatars. The blend system allows the user to transform the shape of eyes, nose, mouth, jaw line, etc. It is possible to adjust the shapes in detail on the system, so various types of faces can be designed.

기본 얼굴 디자인에서 사용자가 원하는대로 최적화가 가능하도록 블렌드 시스템을 적용하였다. 블렌드 시스템을 통해서 사용자는 눈, 코, 입, 턱선 등을 원하는대로 변형할 수 있게된다. 미세한 형태 조정이 시스템상에서 가능하여 다양한 형태의 얼굴을 표현할 수 있다.

3) 各式妆容风格 Various make-up style

除了脸型,我们还根据用户的品味提供了眉毛、眼影、唇膏、腮红、纹身等各种选项与效果。用户可以在角色上选用一些大胆的妆容,呈现他们在现实生活中难以尝试的个性。根据用户的自定义,不同风格的角色将会被创建。

In addition to face shape, various eyebrow style, eye shadows, lipstick, blushers, tattoos and other options were provided to apply various effects according to user's taste. Users can apply some bold makeup style on the avatars to express their the personality which they might feel difficult to try in real life. A different style of avatars will be created depending on how users customize it.

얼굴 형태 뿐 아니라 다양한 눈썹 형태, 아이쉐도우, 립스틱, 블러셔, 타투 등 사용자의 취향에 따라 다양한 효과를 적용해 볼 수 있도록 옵션들을 제공하였다. 현실에서는 시도하기 어려운 화장도 자신의 아바타에는 과감하게 적용하여 개성을 표현할 수 있다. 사용자가 어떻게 커스터마이징을 하느냐에 따서 색다른 아바타가 탄생하게 된다. 


STEP 4

                      

设计服装 Design various costume styles

服装款式的设计以主题为基础,主题根据分析现有厘米秀用户的品味数据而确定。新的3D风格设计是经过重新诠释提出来的,不仅仅是将流行的2D风格转变而成。例如,如果主题是中世纪的斗士,我们会顺应潮流,以更现代的形式诠释他们,而非设计典型的服装。此外,还观察与系统其他服装兼容的可能性,避免过于复杂的形式,使其在系统中能以较小的尺寸实现。

The costume style design is based on the theme which is decided based on the data that analyzed the taste of the existing CMshow users. The new 3D style design is proposed through reinterpretation, not just changing the popular 2D design to 3D style. For example, if the theme is a medieval fighter, we reinterpret them in a more modern form to follow the trend instead of designing typical costume styles. In addition, the guide was observed for the possibility of compatibility with other costumes in the system, and the excessively complex form was avoided so that it could be implemented in the system as a small size.

기존 厘米秀 사용자의 취향을 분석한 데이터를 바탕으로 정한 테마를 기본으로 의상 스타일 디자인을 하는데, 기존 인기가 있던 2D 디자인을 그대로 3D로 만들어내는 것이 아니라 재해석을 통하여 새로운 3D 스타일 디자인을 제안하였다. 예를 들어 주제가 중세시대 전투사라고 하면 전통적인 스타일을 디자인을 하는 것이 아니라 조금 더 모던한 형태로 트렌드에 맞게 재해석하여 디자인하였다. 또한 시스템에서 다른 의상과의 호환 가능성을 위하여 가이드를 준수하고, 작은 형태로 적용됐을 때 시스템에 구현이 가능하도록 지나치게 복잡한 형태는 지양하였다.


STEP 5

                       

使角色移动 Make avatars move

角色设计完成后,必须进行优化以应用于系统。要应用于系统,必须调整多边形的数量。因此,有必要删除和简化不必要的部分。当角色被依次植入作为运动参考点的骨骼,以及决定运动范围的皮肤重量时,将拥有一个可以移动的基本结构。已经完成基本移动结构的角色可以应用于各种各样的动画之中。

After completing the avatar design, it must be optimized be applied to the system. To apply to the system, it is necessary to adjust the number of polygons. So it is necessary to erase and simplify unnecessary parts. When the avatars are sequentially performed to plant bones that will be the reference point of movement, and skin weight work that determines the range of movement, the avatars will have a basic structure to move. Avatars that have completed the moving-based work can be applied with various animations.

디자인이 완료된 아바타는 시스템에 적용하기 위한 최적화 작업을 거쳐야 한다. 시스템에 적용되기 위해서는 수용 가능한 폴리곤 수를 맞춰야 하는데 불필요한 부분들을 지우고 단순화 하는 작업이 필요하다. 이렇게 정리된 아바타에 움직임의 기준점이 될 뼈를 심는 리깅(rigging) 작업, 움직임의 범위를 결정하는 스킨 웨이트(skin weight) 작업을 순차적으로 진행하게 되면 비로소 아바타는 움직일 수 있는 기본 구조를 갖추게 된다. 움직일 수 있는 기반 작업을 마무리한 아바타에는 다양한 애니메이션을 적용할 수 있다.  


STEP 6

                     

设计房间 Design the rooms for the avatars

角色的房间设计也使用了3D风格,这样用户可以使用物品来装饰。

The avatar room design was also proposed in a 3D style, so that users can decorate the room using items.

아바타의 방 디자인도 3D 스타일로 새롭게 제안하였다. 사용자들이 각자의 취향에 맞는 아이템들을 이용해 방을 꾸밀 수 있다. 


STEP 7

                    

应用系统 Apply to the system

设计好的角色和房间被应用于名为卡噗的个人APP和QQ之中。在卡噗,用户可以进行人脸和服装定制、房间装饰以及拍摄各种概念照片等。这些定制好的角色也适用于QQ,所以,当用户在聊天时,可以使用emoji功能与朋友进行有趣的互动。

The designed avatar and room are applied to individual app called Kapu and also on QQ services. In Kapu, face and costume customization, room decorating, and taking various concept photographs can be done. Customized avatars are also applied to users’ QQ, so when talking on a messenger, users can have interesting interactions with friends using emoji functions.

디자인이 완료된 아바타와 방은 Kapu라는 개별앱과 QQ 서비스에 적용된다. Kapu에서는 아바타의 얼굴 및 의상 커스터마이징, 방 꾸미기, 다양한 컨셉 사진 찍기 등 아바타를 이용해 다양한 놀이를 할 수 있도록 구성되어 있다. 커스터마이징 된 아바타는 사용자의 QQ서비스에도 적용되어 메신저 상에서 대화를 나눌때 친구들과 emoji 기능을 사용하여 재미있는 인터렉션이 가능하다. 


                   

后记 Epilogue

这是一个以厘米秀为概念,反映用户可以根据他们的喜好来装扮角色的视频。角色自由舞蹈的服装会随着流行音乐而改变表达了该项服务的特征。另外,通过在3D动画中添加适用舞蹈动作的2D效果, 显现卡噗品牌独有的卡通风格元素。

The viral video was created by reflecting the concept of 厘米秀 that users can decorate the avatar according to their preference. The costumes of the avatars dancing freestyle with the trendy music were changed to express the characteristics of the service. In addition, by adding a 2D effect which suitable with the dance movement on the 3D avatar animation, the unique cartoon style elements of Kapu brand were visualized.

언제 어디서나 사용자의 취향대로 자신의 아바타를 꾸밀 수 있는 厘米秀의 컨셉을 반영하여 viral 영상을 제작 하였다. 트렌디한 음악에 맞춰 프리스타일의 춤을 추는 아바타의 의상이 중간중간 바뀌게 하여 서비스의 특징을 표현하려 했다. 또한 3D 아바타 애니메이션 위에 춤 동작에 맞는 2D Effect를 추가하여서, Kapu 브랜드 특유의 만화적인 요소를 표현하였다. 

3D厘米秀是一个反映QQ愿意根据用户模式、喜好和新趋势来改变现有服务的项目。在创建新IP,进一步发展QQ品牌形象,使其更年轻,更时尚上,也有着同样的意义。厘米秀和卡噗将继续开发可满足用户口味的时尚与交互设计。

CMshow 3D Avatar is a project that reflects QQ service's willingness to change existing services considering user patterns, tastes and new trends. It is also meaningful in that a new IP has been created that can further develop QQ's brand image younger and more trendy. CMshow and Kapu services will continue to develop trendy designs and interactions that applies users' tastes.

厘米秀 3D 아바타는 QQ 서비스가 기존의 서비스를 사용자들의 이용 패턴과 취향, 새로운 트렌드를 고려하여 변화해 나가려는 의지를 반영한 프로젝트이다. 또한 QQ의 브랜드 이미지를 한층 더 젊고 트렌디하게 발전시킬 수 있는 새로운 IP가 탄생했다는 측면에서도 새로운 의미가 있다. 厘米秀와 Kapu 서비스는 지속적으로 사용자의 취향에 맞는 트렌디한 디자인과 인터렉션을 고안하여 발전해 나갈 예정이다.



文章转自腾讯ISUX: 二次元探索 | 卡噗3D角色设定

花火公众号

关注花火公众号

回到顶部