从概设流程、审美、设计思路几个方面，漫谈游戏美术设计的思维方式

作者：Leona 腾讯游戏学院 2021-03-25

首发腾讯游戏学院《真经阁》栏目，GameRes获授权发布
讲师介绍 Leona
腾讯互娱 北极光工作室群 游戏美术2D设计

导语

本文主要从项目中的概设流程、审美、设计思路这几个方面，漫谈设计时的思维方式。

一、项目流水线

先来看下研发项目的流水线。


一个角色从需求提出到角色诞生可能会经历这些步骤：

大量方向图：在一个角色需求出来后，找这个题材的相关参考；或者连角色方向也没有，就找各种主题的方向参考。

快速出设计/细化设计：可能是只确定了职业属性的角色，服装风格还没有确定，就需要出不同方向的设计稿；可能是服装风格已经有明确参考方向的角色，需要出不同于参考图但风格类似的设计稿。

3D制作：协调3D落实到模型。

效果壁垒：3D制作或动画蒙皮过程遇到的各种问题，需要在设计上做调整或返工的。

然而实际研发可能经历以下过程：

1、前期还不了解游戏引擎的短板和视觉效果的禁区时，重新推翻设计回到参考图方向，调整角色方向。


2、之后避开方向禁区后，继续披荆斩棘，会碰到游戏中效果不好的问题（比如身材比例显腿短，需要在着装上做显腿长的设计规避裸模缺陷）。



3、在项目中后期，基本经历过所有的效果壁垒，最后可以在设计起始就规避掉制作返工的风险。



4、当然，项目前期不可避免的会存在以下过程：找大量方向图，或者快速出概念图，揣摩角色方向。

二、概念设计流程


再来看下传说中的概设，可能是特别奔放洒脱的剪影图，线稿图，或者黑白色块。


也可能是特别写实的项目，最后呈现是以3D效果为主导，着装风格已经很确切，给原画的发挥空间就很小了。


看了一些外部项目概设图，我们可以对比以下几个方面来看研发项目流程。

1.必不可少的都需要做方向调研：


可以是角色灵感图，或者限制一个外星种族的人形兽化程度。


2.需要有足够多的设计可能性，也就是设计方向：


3.需要了解下游工种，了解技术团队的可行性：

在设计阶段就了解效果壁垒，规避掉不能避免的坑，有规划的督促技术团队填坑。


4. 根据重要度分配精力（不同的细节/配色版本）：


根据项目流程时间宽裕程度，把精力放在需要的步骤上。比如Fallout4的这个武器设定，就有时间可以出多种方向的概念。


ROE项目这个类似武器，因为是作为角色的一个背后装饰，并无实际功能，于是只一稿一个方案就过了。

三、审美

1、说到审美老生常谈最基础的就是点线面。


出自Yaroslav Iakovlev 在behance上的作品平面海报是最能直观的感受点线面规划的作品。会有点构成的线，线构成的面，点与点之间有大小对比，面与面之间有疏密对比。我们看到即使被我这么框框画画了一通，这张图整体也没垮掉，因为它一开始的点线面分布就是美观的。

纹身风格里，个人最喜欢trash polka这种风格，好比把平面设计做到立体的人体表面，需要结合表皮的平视面积和人体的转向做设计。


也会有点线面，线的趋势（辐射的视觉导向），弱对比的面和强对比的面，来确定视觉重心是强对比的面。此外还需避免在关节位放图案，因为会有弯肘拉伸。

ROE项目——滑翔翼皮肤设计

再来看下项目实例，ROE的滑翔翼皮肤设计。


大体上套路是先有一个主体图或者logo，滑翔翼一边放完整的主体图，另一边放放大版的主体图。之后总结了一套模板套用：一边是主体图作为高对比度的面，加少量高对比的点线，和低对比度的元素（文字）用来填充空白处；另一边是放大版主图做低对比度的面衬在后面，加上高对比的点线丰富版面，加高对比度的元素（文字）做这一边的视觉重心。

2、平衡：它可以指画面的平衡也可以指一个物体的平衡。这里我们看下单个物体的平衡。

首先形状的不同，会直接影响人的平衡感受。对称——平衡；不对称——不平衡，需要调和来使之平衡。



角色的不对称设计，能突出特色，但需要平衡重量感，但有时适度的重量失衡能增加角色身上的冲力。图示这个单手加农炮就是重量失衡的不对称设计，所以pose上需要它迈开小腿儿。脚边的烟尘也是有支撑作用的，我们看到，去掉后明显感觉脚撑得很累了。所以，视觉上的平衡，跟物理上的质量是不对等的。

其次颜色的不同也会影响人的平衡感受。浅色感觉轻；深色感觉重。


这组时装图我们可以感受到，（图左）一个白人模特，如果全身亮色（没有黑发和纹身的话）整个人是很轻的。（图中）上下身截断式深浅色，如果没有头顶的那抹黑，整个人下身是偏重的。（图右）一个黑人模特搭配大面积中性色和一些亮色，上半身有深色头发皮肤，下半身有皮肤平衡，所以即使衣物亮色居多但很平衡。

3、对比：它不仅能衬托出视觉重心，也能丰富画面节奏。对比无所不在，可以是形状上的，大/小，整/碎；颜色上的，明/暗，艳/灰，冷/暖；质感上的，光滑/毛躁，柔和/刚硬；位置上的，高/低，远/近。甚至可以是词义上的反义词，老/幼，新/旧。对比的东西太多，不多赘言。

4、画面里的节奏：好似音乐里的节奏。音乐的可视化效果就是音乐节奏的视觉化。


画面里的节奏可以大体分为重复和渐变。重复，即单一个体的简单复制排列。


比如渐变，可以分为大小/间隔/方向/位置渐变。


对于角色上节奏的塑造，个人总结下来就是几种元素有次序的交替重复，而比较理想的组合节奏就是：2种主要+1种辅助节奏。

我们看下面这个画师Carlyn Lim的组合角色，每组角色都风格统一，我们把一组角色看成一段旋律的话，能看到贯穿始终的2种主要乐器和1种到2种辅助音色。



5、角色整体的配色：按美术风格的不同可以有不同的方案，以下分类是更偏向写实角色的配色方案。


中心这个饼图是大体角色身上会出现的颜色属性，四周是各种配色方案。

我们以品牌服装为例，Pucci是亮色+浅粉色，McQueen是亮色+浅粉色+深色，Armani是浅粉色+深色，Gucci是亮色+中性色，Vivienne是亮色+中性色+深色，CK是中性色+深色。品牌的配色方案，决定了这一季发布会的服装是不是成一个体系，决定了品牌基调。


再看一些常服配色，从2色配色到3色配色。





在这些排排站式的角色配色图上，我们也可以看到之前说的对比和节奏。亮色作为浅色和黑色对比，亮色作为深色和白色对比，亮色和中性色作为主要配色，白色作为辅助色，粉色中性色作为主要色，黑色作为辅助色。

我们把单个女生拿出来看，会觉得她穿得很普通，但放在整体里成一个体系后，就变得赏心悦目。这跟草书书法有点类似。如果把草书里的单一个字拿出来，有的甚至很丑，比如这个“作”字，你感觉自己用脚写都比他好看，但它放在整体下就是有道理的。

5、每张画面都需要视觉中心：这是遵循人的视觉成像原理，人在看东西时，注视的焦点只能是中心一块区域，这是中央凹成像的关系——眼球后部中心位置的中央凹视锥细胞更集中，色彩和成像信息更丰富。于是任何平面图像最好也只有一个视觉中心，如果有好几个，人就会分散注意力。

视觉中心有哪些我整理为以下几个：

色彩饱和度、明度、细节量的突出点


四周的深色衬托中心的白衣女，两张城堡图都是用云隙光照亮来突出重点，格子西装女的亮色胸衣，石膏头像的红色牙齿，最后张图里的橘色灯。

产生运动趋势的发力点


感觉下一秒就要闭上的大嘴，感觉已经直插你胸口的剑。

画面视觉引导线下的中心点


血迹，沙丘的棱角，道路都作为视觉引导线，来导向视觉中心——中远景的未知物体，人，和建筑。

引起本能关注的信号点

本能关注就涉及到视觉的首要目的，无非就是为了生存：战或逃反应(Fight-or-flight response)。追溯到远古人类，石器时代的人日常需要防范的就是眼睛和牙齿，食肉动物的眼睛通常双目向前，食肉动物会露一排白牙，于是人对两个眼睛形状和一排点形状会本能的敏感。


以Carlyn Lim这个图为例，左图门襟的布和两边兽类的眼睛会特别显现，右图上宝座上那排围绕的甲片会特别显眼（像一口牙）。

四、设计思路


许久之前，我在看了一个仰慕的画师所出的教程之后，就很气，因为心心念念指着他讲些设计思路，但他没讲，在教程中你只见他行云流水地就出了几个很有趣的方案，画外音好似在说：“咦，我也不知道我怎么想出来的，反正我就是思如泉涌”。于是我整理了下为什么有的人就是能“思如泉涌”。

先从创作的两种开启模式讲起，可以是感性、随性、不假思索地“乱涂乱画”，也可以是理性、有逻辑、有规划地“码图”。

1.感性随涂时，不用去考虑它是什么东西，只管外形视觉上自己满意。



比如这组抽象图形，画完后再去思考怎么用它，它可以是生物植物飞船等等，于是只需在这些形体大轮廓内，把不同的区域用功能性的结构替换就行。


再来看下一个悬浮小店的设计，草图只看侧面剪影和简单的黑白对比，可能带有一丝理性，知道有些广告牌/幕布，灯笼气球旗帜之类的东西。之后选定一个草图后，细化时再去思考这个剪影下有些什么细节。



比如个人项目鬼九仔，在当时我的脑力下，出草图时也是只用本能反应，不假思索就“思如泉涌”了。

再来看看另一种打开方式，理性分析。我把它分为元素拆分和元素替换两个步骤。

先来看一组枪械实例。我把枪械拆分成了这些方面，基础结构、传动方式、操作方式、手持方式以及变形。元素替换上，又从这几个方面切入替换点：原理、生物、拟态、替换物。

替换元素是个庞大的不受限的信息库，可以是任何东西：

枪→枪械原理→物理攻击→向外/向内→吸过来→磁铁/吸尘器；

拟态→龟→部分可收缩/坚硬外壳保护脆弱部分→易碎品→化学制剂→枪械上弹出内置化学制剂。

那些跟枪完全不相关的元素，是通过一系列联想推导串通起来的。



接下来看一些枪械实例。



制动原理上的替换，弩枪以及蓄能制动，微薄枪声波枪，吸入式武器，双手手持加肩带式枪械。


比较有趣的几个替换例子是《Sunset Overdrive》的几款枪，枪膛替换成水管，枪托替换成鞋子，手柄替换成吹风机手柄，等等。有的几乎完全不是枪，只是武器，是可以攻击的东西，虽然压根打不死人（保龄球，唱片），但这些武器很有趣味性，那就够了。

角色的拆分可以从很多方面，外形（男/女/老/幼）（形体 ：高/矮/胖/瘦，苹果形/梨形/倒梯形），职业属性（世界观：写实/科幻/魔幻/幻想）（医生/运动员/暴徒，法师/兽人/剑士），服化道风格（世界观）（中世纪/暗黑/神族），个性特征（阳光/阴暗/奸邪/好战），个人习惯（邋遢/念旧/酗酒/爱好读书）等等，涉及方面太多，得先有个世界观背景才能有个联想依托。


需要强调一个在设计角色时的分析视角——用卷福的眼睛看人。现实细节的信息量，可以是材质表面干湿程度来判断有没有淋雨，甚至小到一个戒指的内外侧新旧程度就能推断出佩戴习惯。也许你会觉得，游戏设计的细节不至于如此细致入微，但我们用代入角色式的表演方式来设计角色的话，角色会更立体，更有说服力。


刚才提到了一个词，游戏设计的细节。这里细节可以是指单位面积里的像素点丰富度，比如这张CCAG的得奖作品，龙头上每片鳞片都画出来了。另外，细节指的也可以是信息量，从使用痕迹看使用习惯。比如下图这个废土世界观下的脚踏车助力洗衣机。


下面看一些角色实例。



这张图是Fallout4里的一个角色设定，以移动方式来拆分，有轮椅、坦克履带、多足机甲，先做了有代步工具这一属性的拆分，随后从角色身份背景、民族信仰、生活习惯、偏好武器等，用反向侦探思维，从各方面构建这个角色的个性。



这里拿Lee InHyuk的角色作品做元素替换的范例，他拿了两个熟识的动画角色形象做魔改，虽然整个衣服款式变成潮服了，但仍然一眼还是能认出原角色，因为他保留了原来的色块颜色和位置，只做了剪裁方式替换，每张图右边我放了些时装潮服可以找到对应的替换元素。


元素替换的案例还有A站上Box of mystery的两个竞赛作品，左边这个用了些水母的元素，给衣服和身体做了替换，右边用了龟壳元素，这些都先在外轮廓上破了传统的人形，立刻就抓住了眼球。


豆三先的作品里充斥了各种奇妙的元素替换，用贝壳替换刀刃，女体替换刀柄上的装饰，哪吒的腿用莲藕替换，裙子用荷叶替换。

这些设计可能给一些人看来，会有种已经突破常识太奇怪了的感觉，但创意可能就体现在超出常识那一点点新意里。我建议在一开始思考设计的时候可以把“怪”这个方向做到自己的极致。

回溯这个观点的起因，要从刚入行时一个多手角色说起。我当时提了一个问题：“为什么不设计背脊长一排手臂（竖向排列）呢”，当时被给到的回复是“没人这么做”。现在我可以这样回答，因为黑格尔说“存在即合理”，这样的存在不合理所以不能竖向排列，但可以成对竖向排列，这样在人体解剖上更合理，你感觉那对手臂是长在多出的那两片肩胛骨上，它们也能在肋骨上滑动，总之它们是能被使用的。




比如以上这三张图，黑章的这个人偶，Metal Gear的角色和Martian Stickfighter一个外星生物设定。


再看一个哪吒的模型，严格还原了中式古典画作里的三头六臂形象，这个模型真的做得已经很棒了，但古代的这个设定本身，用现代的科学，我们可能可以理解为一种突破空间和视觉上的错觉让我们看到了三头六臂，但在解剖学上是不现实的。我们可以看到一些现实存在的身体部分相连的连体婴，他们的行动都是很受限的。而近年的哪吒动画里的哪吒形象，则取用了遵循解剖学的背后长手的方式。



这里推一个宝藏画师，Simon Dubuc，脑回路清奇，在作“怪”的路上走位风骚。我们能从他设计里看到很多“没人会这么做”的设计。

再看一组武士主题的设计，作品均取自A站。


常规的我们看到这样中规中矩的武士盔甲：


也有这样用装饰画画风做出自己特色的：


和开始作“怪”的一些设计，肩甲替换成两半撞钟，躯干替换成鬼头，真正的头悬浮成鬼头。


再来看看我们的宝藏男孩Simon Dubuc，正常脑回路切入点可能是武士服，头盔面具，但他的切入点是武士的仪式感，坐等斩首，对宝刀的锻造。

学会用侦探思维构建角色个性，在合理的范畴内把作“怪”做到极致后，我们来总览下，设计的感性思维和理性思维是如何协同运作的。


可以是先从剪影形态，点线面切分等一些无关功能意义的美学基础出发，或只带有本能和常识的理性开启，后期深入设计时再做理性的功能意义填充。


也可以是一开始就用理性思维，把要设计的东西拆分归类，想好替换元素，再在落实到画面上的时候规划它的美感。这两种开启方式上面有实例了。


可以是前期查阅大量资料，理性的整理归纳思考之后，抛开所有参考，任凭这些临时抱佛脚的信息在脑中变成游离的潜意识，此时用感性思维出设计，但并不是只考虑美感的，此时游离的想法会自己渗入到这些本能的设计里。




比如做这个赛博朋克日本妹子时，先大量查阅资料，再抛开资料在面前展开张白纸，从剪影出发，色块填充功能和意义，细化，最后再出不同头部方案。


当上一种过程走多了之后，大脑里已经有大量的资料，大量的方案，大量的前期思考，就能省掉上面第一步理性思维步骤，直接上头就搞了。就是传说中的“我也不知我怎么想出来的”就是“思如泉涌”。

于是回过去我们再看看豆三先的设计，他已经做了成百上千个圆形躯体的拆分替换练习，确实就能信手拈来了。

五、头脑风暴

最后一部分，我们来一场头脑风暴，练习一下理性拆分和元素替换，以及联想想象力。在我准备课程时，我随手抓了桌子上两个东西，我们拿这两个东西来构建下世界观。

1、魔方

用魔方构建的世界观，在影视作品里已经有几个知名的设计了，比如《心慌方》三部曲，《林中小屋》等。




开始进行拆分：式样→正方体，6个面6个色，6个中心块12个棱块8个角块，中心块1个面，棱块2个面，角块3个面……，功能→可旋转，打乱排齐。

然后进行替换：块面替换→房间，街区，小镇……，贴面替换→主题，信仰，帮派……，旋转替换→重力切换，日照切换……，同色贴面→块面连通，不同色贴面→不通。

综合成世界观：一个正方体的星球/空间站，受一个恒星照射有日夜变化，星球上有3x3x12个地表区域，可以是有界限的领地，不同领地的主题/信仰/帮派不同，世界受到地心作用力控制，会有规律/无规律的拧动滑块旋转变化，转动后每个领地就能跟不同的地域交界/运输，但转动的同时日照情况也会迅速转变。

2)键盘

拆分：式样→ 面板,按键,有固定位置,不同大小…，功能→ 可按下,有含义和功能,可组合键,可拆卸重组…

替换：按键替换→ 房间,街区,小镇……，含义替换→ 主题,信仰,……，功能替换→ 能力,技能……，可按下替换/组合键→ 可寻规律的机关触发,可寻规律的灾害……

世界观：一个实验厂房，被切分成规则的房间，每个房间有不同的功能/有不同的住客，当房间机关被触发时/人被唤醒时，会为这个实验厂服务的终端设备触发不同的反应，触发顺序有一定的规律，处于其中的人需要找到这个规律，才能逃出房间。



最后，我们做一个开放性习题。办一场虚拟双年展。我们知道双年展的作品可以有各种表现方式，平面设计、雕塑、装置艺术、影像、行为艺术等等。所以不做任何形式限制，我们以椅子和时间为主题，先做一个拆分练习。


随后左右两两结合我们列的元素，结合些想象，就能有作品了。


来源：腾讯游戏学院
原文：https://mp.weixin.qq.com/s/YSgt8oUvCYrI9BCS0hvUCQ

参与评论