腾讯漫画设计告诉你如何制作Banner小图

AAA教育，助你从小白到大师

UI设计师每天要做的工作，无非是我们的界面设计，Banner等等。今天，AAA教育小编来带你盘点一下，我们的“腾讯漫画”设计师zhong是如何设计我们的Banner小图的。总共可以分成四部，分别是我们的选材、北京、文案设计、营造氛围这四部，大家快来看看吧。

选材（25）+背景（25）+文案设计（40）+营造氛围（10）=100分（满分）

（注意：积分在此是层层递进关系，其中三个必选项内即便有减分项按照下面的做法实施也能将自己的设计稿维持在及格分数线以上，最后的可选项则会成为加分项。）

二、4步打造高品质banner

1. 素材选取（25分）

以日常动漫轮播需求为例，建立相应尺寸的画布，将需求所涉及到的人物文案摆放到里面，选择所需人物素材，首先一张 banner 图内的人物素材需要做到色彩、光影统一；半身人物需要至少露出胸以上位置，切记不要直接放置一两个大头，不同场景内拉出的人物务必要视角统一（例如不能一个顶视图一个底视图），不同环境色下的人物在最后一定要统一色调。

下面案例均为正确示范：

2. 背景打造（25分）

选材拖进画布后，将需求文案统统写进我们的 banner 中，在这同时我们将画布填充一个颜色，具体的颜色我们吸取素材中较多的色相，从中调试一个较为舒服的颜色铺满整个背景。适当在背景里来几块高光色块铺在人物下方或者文案下方，在这第二步的操作同时，我们需要将全部文案，做出大概的排版样式。

写到这里，有些控制不住自己了，再加一点进阶版本，在我们做好的背景中加入一些其他的素材，例如有景深的背景元素，可爱的人物元素，或者一些不错的环境画面。我们看下图将一目了然，可以说是巧妙的丰富了我们的画面，加入了剧情。

这种做法比较简单易出效果，下面列出两种惯用的方式。

3. 字体设计（40分）

第三步字体设计亦为我们整个 banenr设计中最关键的环节。

下面我们加一个知识点来辅助完成不同类型的字体设计，在此讲述的方式方法适合于没有太多经验的初学者。

字体设计中存在的自检法——田字四维自检攻略：

• 识别，首先尤为重要的是识别性，当字体失去了他的识别性那么一切都将是徒劳。
• 贯穿，把将要设计的几个字体视为一个组合，那么具有风格性的设计样式将要贯穿到我们整个组合当中。
• 统一，所谓的统一性就是规范我们的横与竖，例如横的高度为十个像素，竖的宽度为20个像素，即为字体组合中的每个横竖的规范。
• 回顾，万变不离其宗，这个主要强调的是对字体原型的回顾，在字体设计过程中不断的回顾字体原型，回顾原本字体结构，是否在原来基础上做的加法，以及在设计变形的过程中是否错误的改变了字体的本质。

接下来，看下我们的方法论如何应用。

在开始做这个 banner 之前的思考过程也包括我们对于字体设计方向的选择，需要一并在一切开始之前进行，前面我们已经提到暂且略过对思考过程的讲解，在思考有结果之后我们所做的每一步都是围绕着我们的重心来展开的，下面以恋爱类题材为案例进行细致讲解。

此款恋爱型的字体设计我们直接采用原字形的倾斜体（方正大标宋简体），男女恋爱项体现出的浪漫氛围，思考后将这种带有曲线的艺术英文案例作为参考。

从我们的参考中快速勾选出大概笔画，放置我们的字体中看是否符合我们的预期，然后用「钢笔工具」绘制出比较符合我们使用的笔画。从图中可以看出放置什么样式后依旧可以清晰的看出我们的原本字形（应用到的是识别）；几乎每个字体中添加类似的笔画（应用到的是贯穿）。

大致的样式摆放完毕后，开始进行字形的优化。首先开始简化原本字体结构，每个「横」设置为3PX，每个「竖」为14PX的圆形直径。（应用到的是统一）

然后开始将我们绘制的笔画安放到简化的字体结构中，在放置的过程中我们需要不断的（应用到的是回顾）看我们的过程中是不是脱离了字形本身结构，不断以一个旁观者的角度来审视我们的文案是否具备较高的识别度（应用到的是识别），在这一步的过程中我们增加了几个笔画的变形样式，但是依旧属于同一风格的样式，这就回归到最开始的（应用到的是贯穿）。

接下来我们将文案放置到我们的画面中，根据人物色彩调整文案颜色

4. 营造氛围10分

通过前面简单的三步画面到此属于一个及格分数线了，如何通过简短的几分钟再来一点小突破就看我们接下来的这一步了。

营造氛围，让画面更加饱满，气氛更足。

到这里可以看到拆分开来，简单的几步就能打造一个高质量的 banner，在这里总结的几点方法论是贯穿我们整个设计过程的，整个图的设计过程也是不断优化这四步的过程，下面的一些案例，均按照上面的方法论进行设计，希望能给有缘看到的小伙伴一些启发与帮助。