北大毕业设计总监手把手教你做《英雄联盟》MV风格PPT | 之马工场设计分享会

01

分析《英雄联盟》MV

先分析（甲方发来让借鉴的）视频里的内容是什么。

有一个设计的铁律：动态的图像永远比静态的要吸引人，无论在什么情况下都是如此。

所以如果你要做一个静态的 PPT 的话，它的视觉冲击力和吸引人的点肯定远远不及这个 MV 。所以一开始我就首先跟甲方确认的第一个点是说，你们要做的这个 PPT 是不是确定是静态的、不要酷炫的动效。

对方说是的。而当他说是的的时候你就要给他一个预期：静态的话肯定就没有动态这么吸引人。

要先把这一点明确下来。这是我看完之后第一个要跟对方沟通的点。其次，就是我自己去消化这样的一个视觉风格。

02. MV 视觉风格分析

这个视觉风格最开始给我的是两个大的方向：第一个是它是一个以西文字符为主要设计元素、偏扁平的视觉风格。

很明显，因为他本身是一个歌曲 MV，你就会发现他的大部分画面，比如下面这帧：

我们先不管其他元素和背景，他是一个比较简洁的内容，是以英文的歌词为主角去做的画面设计。再比如这一帧：

讲平面之前我先讲一下什么不是平面的。比如刚刚这几帧有个钻石（因图太多该图从略请脑补之），

钻石它就不太平面。你可以理解为 3D 的视觉风格。他虽然有这个一个大钻石，但他两分多钟的素材里面，像这样的3D的元素（是很少的）。

包括游戏本身或者说虚拟偶像本身他可能做了一个 3D 渲染，他也有静态的立绘。

他也有很多几何图形，几何图形也是平面设计的元素。

有的时候我会引申一下，发散一下思维，大的概念平面设计他不仅讲的是一种视觉风格，还指你怎么在你的一个媒介上、你的画布上，去组织你的图形。

我现在讲的这个平面和 3D 是指一种视觉风格，是扁平化的一个概念。就是把三维的东西拍平，拍成 2D 的。

还有这些剪影，也都是扁平的：

以及剪影后面的几何形的纹理（也是扁平的）：

这是我看过视频后的第一个感受，就是它是一个扁平化的、以字母为主角的视觉风格。

我第二个感受是他的色彩风格。除了他后面这个炫彩的流体，他更多的是黑白灰。

我随便这么一截，大概有八成的概率都是黑底的。也有紫色和红色背景，但是可以忽略不计。我们看的是一个大体的感觉，抓大放小。一个最大的特点就是黑底白字。

而且他有一个（字体）实心和描边的组合会交替出现。这也算一个小特点。具体地去刻画图形。

那我们再回到配色上，除了黑白的组合，他更多的是这种流体的背景：

给大家分享一个找素材的网站：unsplash.com，这里面都是免费可商用的。比如我们搜 MV 中出现出现的镭射的素材：

还有一个搜图片很好的地方就是淘宝。我大部分情况也会在淘宝上用关键词找素材。在中文互联网上我几乎不用搜索引擎。我要么就是在淘宝上用中文关键词搜素材，要么就是在英文图片网站上用英文关键词搜素材。

这是我的一个习惯，因为这样搜出来的素材会比较好看、比较高级一些。

好我们再回到 MV 上，总结一下那两个特点：

03. MV 字体分析

此外还有第三个小特点，就是他对文字的处理。

首先他的文字的字重是比较重的。也就是说他是一个粗体字。第二点是他是一个非衬线字体。不知道大家对字体设计有没有学习过。字体从衬线角度上讲是两种形式：一个是衬线字体，一个是非衬线字体。

像上面这种就是非常典型的非衬线字体。就是他每个笔画上他是横平竖直不带那种起承转合、那种小拐弯的。比如说英文报纸上他的字体大部分是衬线字体，带小弯的。那种字体是比较复古的。 而这种是现代流。

第二个字体特点是他是一个偏长的字体。可以理解成瘦高。这个是字体的大的形状。（上图）还有一个扁款的字体的显示，但他只是一个点缀。画面的主角，也是画面的重心他都是又瘦又高的字。

虽然有一些帧他是有一个斜体的。但是他占比较少，就可以不太用考虑。但是想做的丰富一点的话，加入这种斜体的设计也是 ok 的。是一种思路，因为其实做设计细节的设计思路有很多，但是总体思路一定要统一。如果要做高级的设计的话，一致性是非常重要的。

一致性的意思是，你从头到位看上去是一个系列的，是一个人做出来的。这么说比较浅显一点。

接着说字体，他也有很多对字的描线的处理，比如下面截图的“BREAK”：

还有每次字体变换的时候，他在每个节奏点上会有一个字体的实心和边缘线的变换。他前一帧还是实心字体，在下一个鼓点就变成了空心的带描边的字体：

他的描边的设计还是很多的变换穿插，为什么这么做是为了配他的节奏感。我再延展一下就是怎么去体现节奏感。

04. 如何体现节奏

节奏感是通过变化体现的，只要你对比得够强烈。

对比有很多种对比，我先浅聊几个。比如说，虚实对比、大小对比、颜色对比等。他这个也不能说是虚实，可以理解成颜色上的对比。一个实和一个空——空就是没有颜色——去做一个对比，去卡他的节奏，这样节奏感就出来了。

且画面的丰富度，每一帧和音乐的配合也就出来了。

05. 中英文字设计浅析

（画面播到韩文字）

讲到韩文字体我再插一句。很多人都说中文设计没有英文设计那么简单，其实是对的。他就是会比较难。所以想偷懒的话你就多加英文，但如果你想提升自己、给自己更多练习的机会的话，你就要尽量少放英文。

这是两种我们做设计的思路。就是说大家不要一味地把那么多英文加在自己的设计里，（虽然）这是很好的一个方法。但是要看你怎么看你要做的这个东西。

如果是你的个人练习的话我觉得没有必要。而如果是一个商业性质的东西，你就是为了好看，为了让甲方一眼选中，那就多加英文。

这是两种不同的设计场景下的思路。

而像韩文呢，他本质上是脱胎于中文的，中文是表意的，韩文是表音的。他这个音也是从中文的笔画里面借鉴的。相当于你可以理解为这些韩文都是汉语拼音。只不过是我们的拼音是阿啵呲嘚，而他们写成这种曲流拐弯的形式了。

他就是一个拼音字母，因为是从中文借鉴过去的所以他也写成了方块字的样子。他在图形上的感觉和中文比较接近。所以不是说搭起来就好看。

但人家搭起来就比较好看：

为什么呢？第一他的字没有很多，比较简洁，是以歌词的形式出现的；第二他这个字的形态和前面英文的字形是接近的。

如果说前面用了这样的英文字体：

那后面假设是中文，我们就不可能再去用什么手写体或者毛笔字体或者宋体这样的字体。

以及就算是选了黑体，也不能选字重很轻的、笔画细的字体，像普通的微软雅黑就不行。你就得微软雅黑加粗。让他和前面是一个和谐一致的状态去组合字体，以及这个字呢尽可能的不要多。

即便刚刚那一屏是满屏的字，他也是五六个字符作为一组进行复制。就是把他作为一个图形化的处理，而不是作为正文内容去做排版的。

整体的 MV 就带大家过完了。他的一致性就很强，他都是一样的视觉风格，一样的设计手法。

我个人还是挺喜欢这个 MV 的，纯粹从个人审美的角度上来说。

06. 关于字体气质

（有人提问长窄和短宽表现的气质不一样）

对，他是不一样。但是这气质呢他不能给一个很明确的形容词。比如说，一定是文艺向的用长窄，硬核的东西用短宽，没有这个界定。

长窄和短宽没有在气质方面有一个区分，主要还是自己的喜好。气质上比较重要的一个区分是粗和细，粗和细是能够区分出来字体给人的感觉，越细的字体给人的感觉是越优雅，越粗的字体给人的感觉是越 tech，就是比较科技、科幻或者说硬核。

就是粗和细会有这种气质上的区分，但是长窄和短宽没有，你可以理解为他只是一个视觉符号。

比如说，——太好了这个问题非常好！——回到（MV）这里：

因为他整体用的是窄长，我为了去 copy 他，相当于仿妆嘛，比如说杨幂和范冰冰都是长得很好看的人，但是她们明显是长得不一样的。那你仿杨幂，你就要找杨幂的特点去化杨幂的妆；你要仿范冰冰就要仿范冰冰的妆。

那我们仿这个 MV 怎么仿他呢，就是抓住他的核心，就是窄长字体。他短宽其实也是有应用的。为什么要提到这个短宽呢，是因为这首单曲 MV 用的是窄长，他还有另一首单曲名字我忘记了，那首单曲他的主视觉他的字体用的就是短宽字体。

他是不一样的风格，但是这个风格你也没办法用一个形容词去概括他。只能说是不一样，但是它们统一都是用的粗体，所以说它们的统一风格都是偏游戏、科幻、二次元，偏 tech 风格的这个气质。

这是我的一个想法，看看大家有什么不同的看法都可以交流一下……

我总结一下，就是长窄和短宽他很难用一个概括性的形容词去形容他的气质，但是可以用别的形式去区分气质，就是用粗细。长窄和短宽就是为了形成他的一个特色、特点。因为，你去做一个设计还有一个重要的点就是说你能不能够做出自己的特色。

比如说网红千篇一律，那为什么范冰冰就长得不一样呢，她就是有特色。我不是范冰冰的粉丝，我只是举一个大家都认识的明星而已。

（半仙儿说“气质搭配其他元素”）对，气质跟其他元素的搭配也是很关键的。他这个特点就是强化加深记忆点。非常对。

行，那我们就继续。第一个点就讲完了，就是带大家看了一下这个 MV。第二个点就是说怎么去“仿妆”，怎么去 copy 它。

02

如何借鉴设计风格

01. 不能完全照搬

首先不能完全照搬。那什么叫完全照搬，就是他这个 MV 里他有几帧这个图，你要完全照搬就是，最简单录屏然后转 GIF 就完事了对吧。但是不能这样做，我们得做一个和他很像但是又得是自己做的一个东西。

我再插一句，虽然我跟甲方说我做的这个 PPT 设计是个静态的，但是我为了仿他，这是第一个动机；第二个动机是做得更高级，所以我还是希望让这个背景动起来的。

他动的不是这个字，而是这个背景，因为这个 MV 是字和背景一起动。但是静态的 PPT 呢，他字动不起来，但是背景可以动起来。所以我还是希望能做一个动态的背景。

而且最开始我们也说了，设计的铁律：动态的图像永远比静态的图像更抓眼。所以结论就是我要想做一个这种镭射风格的紫蓝梦幻、霓虹（动态）背景。

那为啥要先做背景呢，因为你会发现，无论（MV）中背景上面加黑字，还是黑色底上面有蒙版或者说镂空出来，你都要先有这个一个底，就是图层的概念。我这帧截的就很好：

这一帧就是底下……他有两层嘛，一层是底下的这个镭射素材，上面这一层是黑色背景，黑色背景上面会有一些蒙版或镂空，也可以理解为是布尔运算减掉的这个负空间，通过字型把背景透出来。

所以说无论是直接在背景上面打黑字，还是还是加一个黑色字的遮罩，我们都是需要有这么一个背景。

我们下面就直接实战，看看如果是你们的话怎么做。就是仅做这么一个 GIF 图。

再讲一下，这个东西它的载体只能是一个 GIF 图。你要做一个视频也行，但是视频肯定没有 GIF 图应用性更高。而且视频和 GIF 只是两种格式，都是可以相互转换的。

我提个问题。大家平时动态设计的经验多不多，以及有多少人是会用 AE 的？

（有人提到视频转 GIF）OK，但是一般这种视频转 GIF 你是直接用视频素材吗，比如说航拍那样的大的航拍背景还是这种抽象的背景。（该MV背景）这肯定不是实拍的我就这么说吧。

是怎么做的呢，以及有多少人平时会有用到 AE 的需求的。就是业务场景，有用 AE 去做动画的以及如果你们有做动效但是不用 AE 你们用什么。都可以交流一下分享一下……

02. 浅谈动效

反正我是用 AE。我先浅谈一下动效吧。动效应该是分两种，一种是纯动画，就是跟交互没关系，你不用点来点去他就自个儿在那动，比如一个小兔子在那跑来跑去。可以理解成那种动画片。

我一边聊大家可以一边码字，都是并行的不用等我说完大家再交流，如果码字的话就随意码。如果聊天的话也可以随意打断我。

第二种是交互动效。比如说一个 banner 的切换，banner 切换正常的话就是轮播嘛，你可以做一个速度不一样、有一个视差效果的交互动效。轮播切换或者说变形，大家可以理解为需要交互才能动的动效。

就是这两种动效。这两种动效前者我会用 AE，后者我会用 Figma 或 XD 这种交互专用的软件去做交互动效。看看大家用什么软件呢？

（有人说用插件）对，插件也非常好用。

那我就来讲一下我对这个东西是怎么拆解的。我先换一下我的屏幕共享。共享到我的 AE 软件上。

03

AE 实战演示

我切到我的 AE 上来了。

不知道大家用不用它。不管用不用我先浅聊一下，如果用得少或者不感兴趣的话我就讲快点，如果用得多大家比较感兴趣的话我就讲慢一点。

刚刚讲的那个（MV）背景很明显他不是一个交互，你什么都不动他就自动播放就跟 MV 一样。他自己在那块动，像这种动画的话我肯定是用 AE 去做的。

01. 如何做镭射动态背景

其他的软件应该也能做，但是很麻烦。像 PS 或者 Figma 这种也行。我先简单拆解一下，他相当于你可以做几个不同颜色的色块然后给他做模糊处理过渡一下。然后移动它们的位置，打上关键帧。这样它们不就动起来了吗？但是这样比较生硬。

那还是用 AE 做比较好一些。

第一种思路你也可以用它的预设（右边栏的 Effects&Presets），这个可好用了，它里面有各种各样的就跟插件一样的东西，你把它拖到你的素材、脚本、图层上面，通过控制器它就能动起来。有一个好像叫“湍流置换”就能让你的静态的图像水波一样动起来。

但是呢我觉得，这个思路没有很好。于是我就想了第二个思路，第二个思路就是“偷懒”思路，这个是小白思路，非常好使。

就是先去网上找一段动态的素材，然后把素材进行调色和模糊化处理。我换一下共享屏幕吧，我发现共享错了还是要先看浏览器。

02. 推荐开源素材

先给大家推荐一个开源的素材吧。国外有一个图像视觉的工程师，他做的一个基于前端展示的小的 demo：

你们做 UI 也懂吧，就是我们做出来的这个图最后是以 HTML 或 CSS 的这种语言去把一个图像变成浏览器上面能渲染出来的这个东西。这个东西的本质不是图，它就是一堆代码。

但是我们可以把他渲染出来这个拿去应用，链接我发给大家，大家可以去体验一下，挺好玩儿的。

他就是自己就动起来了，你看这个的形态，他动起来的感觉是不是就很像那个镭射的背景？

这个可以调，我们调一个和那个镭射背景相似的背景，我们要做的是那种感觉，不要做成一模一样的效果。弄好了以后我就把它录屏，录了一段。

他这个字（指上方网页截图左下角的白字）也可以抹掉，抹掉的方法就是你得去 inspect 一下。就是把这上面对应的前端代码先给他隐去。

前端代码我也可以单开一个小教程给大家科普一下简单的代码理论，他不是很高深，不用你实际会，我到现在都不会写，但是你得明白这些东西怎么样能让他在浏览器上显示，（以及）怎么能让他不显示。

就是这么简单，没有大家想的那么复杂。

（有人发言）对，日升说得很对，就是 CSS 生成动态动画。

有了这个素材后我们先导到 AE 里面去做一个模糊化的处理。一个很简单的 AE 的操作，给大家看一下。

我讲细一点，如果是没有接触过 AE 的，这个是你打开的主界面：

他会有两个选项，一个是新建合成，一个是从脚本新建合成。

03. 什么是 AE 里的合成

先讲一下什么是合成。PS 大家都知道吧，合成呢你就可以理解为是一个画板。但是它又不完全是一个画板， 因为在老版的 PS 里你只能有一块画板，20 年更新后的他不是可以有多个画板吗？（是）更偏 UI 方向 PS 的更新版本。

同理，一个 AE 的工程文件，我们最后做出来的东西是一个工程文件。就跟 psd 文件一样，AE 的工程文件也是只有 AE 能够打开。

一个工程文件里面可以有多个合成，多个合成里面他会有一些脚本，和他实际的素材。对应到 PS 里面呢，就是合成可以理解成画板，图层就是图层，脚本是另外一个概念，就是素材。备用的一个素材可以这么理解。

04. 新建合成的宽和高

那我们就新建一个合成。新建合成比较关键的是宽和高，宽和高你就可以理解为是你这个画板的宽和高。

大家还要有一个概念，就是文件大小是很重要的，你不要动不动就搞一个非常大的文件，除非是你自己用。如果你给甲方或团队其他人发了一个非常大的文件，这会给他们造成困扰。而且你最后做出来的东西效果也不会好，因为还要加载，加载要加载好久。

因为他本身这个背景不是重点，他只是一个氛围，只是一个气氛，或者说他没有细节。他只是一个色块一个流动，所以它的分辨率它的清晰度都不重要，不重要怎么办呢，不重要就直接砍半，就是 1920 的一半，和 1080 的一半。甚至你可以再砍半。

05. 新建合成的帧速率

还有一个设置是帧速率，如果你要做非常高清的动画的话，应该要选到比较高。他一般默认的话是 30 左右。我目前还没有遇到过要求这么高的，我一般都是自降帧速率，有的时候图太大了，我用 8 的情况都会有。但一般情况我个人会选择 24。

这个就尽量选低点吧，因为大部分人感知不出帧速率的区别。

帧速率我再讲得细一点，帧速率 24 的意思就是说 1 秒有 24 张图。就这么简单，一帧就是一张图。

无论是视频还是 GIF，它本质都是图片序列。图片就是 N 张图，序列就是按顺序播放。

我会讲得比较细，如果不是基础学习的话就可以先走会儿神。

这就是我们新建的合成，这个面板（左侧蓝色框选处）是我们脚本，脚本就是说会把你所有的素材和合成都放在这个视窗里进行展示。

那我们就先把刚刚那个用 CSS 生成的动画录的屏拖进来。怎么拖呢，一个是可以直接拽进来，另一个双击面板就会出来文件选择器然后选择。

（把素材拖进合成后），我当时录了好长啊，我当时录了 3 秒，但是我又不需要这么长，那我就找一段紫色和蓝色都有的，然后只使用那一段。

然后你就可以播放一下，他这个动起来不是比较慢吗，如果你觉得慢可以调快，觉得快的话可以调慢。

在拉伸这里可以调，它本质是图片序列，你把图片序列挤压的话那是不是说就快了，而拉伸是不是就慢了。这么理解，挤压的话我每一帧之间的间隔就变短了，那我跳到下一帧的时间变短是不是就意味着我的变化更快。也就是速度更快了。

我们挤压到原来的 20%，它这不就变快了吗？有点糊没关系因为我刚才录屏的软件有问题，是那个软件的 bug。

06. 苹果自带录屏工具的 bug

这里我再讲一下我的新发现，因为我用苹果系统嘛，苹果自带的那个录屏的工具它不是很好用。反正我再平时用的过程中经常出现像素扭曲、缺失的情况。我也不知道为什么，但是我换了一个录屏的工具就会变好。这里给大家提个醒。

07. 高斯模糊

然后你在效果和预设里面搜高斯模糊（下方截图右侧白色条框即为搜索框）：

我习惯只搜模糊，因为他会联想出高斯模糊来。AE 上我好像没有装过任何插件，因为它本身的就够用了。或者我就会去淘宝上买那种效果插件，我以前买过的一个变形的还挺好用的，后面有机会给大家推荐一下，今天就不讲了。

在搜索显示的列表中双击高斯模糊，把它拖过来。然后在脚本这里就会显示它的参数，第一个是模糊值，第二个是模糊维度，第三个是边缘像素模糊。

（演示效果中…）

模糊完了之后大概的这个“味儿”就已经出来了。但是它还有点可以优化的点是什么呢。是它现在的明度有点低，也就是说也就是它没有 MV 里的背景那么的亮。

这个时候你就给它添加一个色相饱和度就行了。跟 PS 里面的调整图层一样，他这个效果和预设，我这个人比较喜欢类比，因为它们都是 Adobe 公司出的产品，你就可以（类比）。

AE 我也是纯自学，那自学你就需要联想，因为它们是一个公司出的，（在 AE 里）做动图的时候和在 PS 里做静图的时候有哪些是可以类比过来的？

（这样）我们就可以自学了，就不需要看教程了。

它的效果和预设就很像 PS 里的调整图层和滤镜这样的功能，去对你的图层进行一些特定参数的调整。或者预设化的调整。

预设化的意思是我给他做一系列的变化。把这一段变化记录起来，也有点像 PS 动作，但 PS 动作是自定义的，我可以自己设置一堆 PS 动作并把它记录下来，然后不停地应用到我后面的图片素材上。

PS 本身也有所谓的滤镜，他的本质也是一个 PS 动作。然后我们就找一个色相饱和度，用这个亮度和对比度就行。总之就是要把它调亮。

你把它调亮这不就有那味儿了吗：

我们不是说要一模一样，往那方面靠就行，不能太像，我们要抓住精髓。就是要那味儿就行了，不是要一毛一样、copy 出一个范冰冰出来。给他一个仿妆的感觉（就行）。

然后这样的一个背景呢，你就可以把它导出了。因为这是一个基础课，我也讲一下怎么导出吧。

08. AE 如何导出 GIF

AE 本身的渲染不支持 GIF 格式的。这点我完全不能自学，当时我在网上搜了好久：怎么把 AE 里做的东西变成 GIF。

目前我找的最好的方法就是你就得下这个 ME。这也是 Adobe 自己出的软件。下软件的好处是你能够直接导出成 GIF。

不下软件的话你就只能是（导出）MP4 啊、mov 啊，然后你要想转到（成）GIF，你就可以用 PS。因为 PS 是可以存成 GIF 的嘛。你就把视频拖到 PS 里面，然后转存成 GIF。比较麻烦。或者是用网络在线的工具转成 GIF。

09. 再次推荐好工具

网络在线工具我也推荐一个，那个是收费的，但是很好用，那个钱绝对是让你花得心服口服。这个网站：

我虽然可以用 ME 把它渲染成 GIF 图，但是会很大。我最后渲染出来后他大概有 22 M，那也是一个很可怕的数字，然后我就用那个在线压缩工具（压缩）。

这个工具大家可以试一试，我不知道免费版好不好用。这个就是很好压，能把你 22 M 的 GIF 压缩成 2 M。

04

Figma 操作

我换一下我的共享。（共享到 Figma 页面）这是 Figma，我比较喜欢用 Figma 的原因是快，效率高。我所有的 UI 软件都会用，它们功能上大同小异，但是个人感觉（录屏音质损坏未听清）就很好用。

Figma 也是可以播放 GIF 的，方法是你直接把 GIF 复制粘贴进来就好了。你在编辑的状态它是动不了的，你只有在播放的时候才能看到它动。

第二部分就讲完了了，第三部分们来看怎么实际排这个东西。

01. 如何排版素材

一开始他给我的需求是这些，这些是他 PPT 里的内容，是脱过敏的，就是他里面的信息不是他的真实信息。到时候他拿到文档他再进行一个替换。

你可以看到他都是展示性的比较简洁的内容。他不会放那种大段大段的演示词。他更贴近于像苹果发布会呀、罗永浩发布会呀这种比较简洁的演示文稿的内容。

这些呢是对方给出的素材，说必须用且只能用：

你大概看一下就能体会出赛璐璐风格的日漫的感觉。偏科幻，但是画法还是日式的。就像《阴阳师》那种，不过《阴阳师》是偏和氏传统的，而这个是偏科幻，偏幻想，光线比较现代的这么一种画风。

这些是我上课前给大家截的一些 K/DA 的主视觉。首先第一步他的这种镭射背景我们已经完成了。

那下一步做什么呢。首先是做这个遮罩，二是把这些人怎么和这个风格和谐地融合在一起。

02. 什么叫融合

我先简单讲一下什么叫融合，你要拿到一个参考和手里面的素材（比较），你要去分析它们的共同点和差异点。

（那我们的素材和所参考的素材的）共同点是什么呢，共同点是漫画小人、立绘。差异点是人家这个是专门做的，这光效、人物的环境光，我放大一点，你们看到了吗？

我这图有点糊啊，但是你们能理解我说的那个意思吧。人物的环境光，这个反光，这个光效，这个衣服的材质，都是和他的主视觉匹配的。

就是说虽然这个人五花八门：

她们身上穿的不全都是镭射材质的衣服，但是整体给人的感觉都能融在这个背景里。这是为什么呢，因为他的色调上面，他的光效是匹配的。

但是甲方找的这个是网图，五花八门什么都有，你直接抠下来贴上面就不是很和谐。

当然也可以，初级设计师就没有想到这一点。但是你要做得再深一步，再进一步，再稍微和谐一点。

我们做设计还有一个目标，就是让他做得更和谐、更匹配。而不是像拼贴（一样）。当然拼贴也是一种风格，但那就是另外一个话题了。

这个就是第三点，所以到时候我们会——图的选择也很有讲究——，再去选哪些图是要和这个背景色融起来的。

那还有一个偷懒的方法是，如果你不想融图，你就可以把它抠成一个剪影啊，比如说这个（光标指向一张平面风格的图）我就觉得它跟整体的画风就特别不像，它没有什么光影的点，更平面一点，更赛璐璐一点的。

其他的这些光影就对比很强。比如这个（下方蓝色框选图）他身上的光是偏中性的。

虽然主色是橙色，但是他的光——大家要会看光——是一个中性光。就是没有颜色上的区分。（所以）这个就适配性很强，你放哪都行。

03. 学会判断图形轮廓

大家也需要练习自己的一个特点，就是说你看到一个形象，或者说人物、立绘，你要想象出他的轮廓，就是先把他这个轮廓提炼出来。比如说这个轮廓就很无聊（下图中间）：

因为他就是一个头，一个肩膀，啥都没了。虽然他的衣服有细节，饰品有细节，手势很妖娆，但是他整个的轮廓是很无聊的。

但是这个（此位置倒数第二张图中性光人物）轮廓就非常的丰富，说明这个图的好用程度就大于这个（无聊）图。

你在选图的时候这个（无聊图）就尽可能把它作为一个整体的图去做，但是这个（轮廓丰富图）你就可以把它抠下来，（当然）也可以把它作为整体。但是这个（无聊图）你抠下来就会很无聊。

这就是选图上的一个技巧。你都不用把每一个都抠下来再一个一个去试，你（要）有一个预判断。大家要对图形的轮廓有一个判断，训练自己判断图形的轮廓。

04. 开始 PPT 制作

这个讲完之后我再讲一下蒙版的操作吧。他其实就是在这个背景上面做了一个蒙版。

我简单讲一下怎么做。首先我为什么要做这个版式呢？

因为他一开始要的是这一页和这一页（光标指向原素材），先出两页效果看一看，然后再把其他的给做出来。

这两页我就希望尽可能的丰富一点。

什么叫丰富呢，就是一是把他的字体的特色放上去，就是粗体、瘦长的这个字体，以及镂空的感觉。

第二点是要把他这个中文（做成实心和线描的搭配）。中国不是也是方块字吗？中间不是我截了几帧韩文字体的设计嘛，他就是线描的和实心的搭配这么一种感觉。

然后把带剪影的和图本身（并排摆上），因为 MV 不停重复的那个副歌部分有一帧是这样的四个图，他这个不是虚拟女子偶像团体嘛，（他就）把那四个小姐姐的立绘咔咔咔往那一摆，那你这里也可以完全地去学他的这种形式。但是又不是（一模一样），相似度你可以理解为 80% 的这样一种感觉。

相似度的点在哪儿呢，就是他的立绘的形式并排地摆在那。他当时这（里）是两句歌词，我们就可以把歌词变成（甲方）他们这个章节的标题。

那章节标题前面的这个装饰，就是有一个特点，为什么说这个西文（设计上）简单呢，我前面也提到，就是这个西文他的字符更像几何图形，他更有图形形式上的美感，能让人下意识地联想到他是一个图形而不是字。他比中文更容易让人联想到他的几何线条。

所以这边会有一个图形的展示，然后再加几个镂空。这个镂空没有什么道理，你就是看着怎么好看怎么来。当然也有一定的道理，比如说章节的标题肯定不会特别的长。

我是不会在这上面直接打字的，因为太麻烦了。最后是要形成一个 PPT 的，我会直接在 PPT 上打字。这也是 PPT 设计的一个难点，可能大部分设计师很少用 PPT 这个软件，它不太好用说实话，因为它不是一个设计软件，它是给小白去用的。

越不专业的软件，当你需要做一些专业的事情时，它的效率就越低。

但是你最后是要让客户用的，而不是你自己给他一个静态的图，他上面的字是要改的。所以我就不在上面敲字了。就直接在 PPT 上码字，但是你脑海中要有一个想象，想象这里有四个字：核心特色：

然后再给他加一个英文的装饰，这个就纯是为了仿妆，去仿 MV 的感觉。然后如果不加这个条的话（指上方 PPT demo 右下方蓝紫色长条），就会显得整个画面的重心有点往左下角倒，就是画面重心会不均衡，所以我就会选择在右下角加一个镂空，这样就平衡他整个画面的重心，让他看起来更和谐。

然后第一页是这么一个思路，具体的操作就很简单，我就简单弄一下。布尔运算大家要熟练运用，因为很好用。

（演示布尔运算中）

这样我们就可以做出章节页，那同样的道理，第二、三、四页就都能够做出来了。

还有一个点，忘了说了，就是刚刚还有一个同学说，动效设计里面有一个拉伸的动作，就他本来是一个瘦高的字体把他横向地拉长。那我这边也仿了一下这种拉长的动效，把他换成平面设计语言是什么呢，就是这个 0 你可以想象成往那边拉。

（演示拉伸中）

这个是章节页，具体的操作就是这样。然后后面是这一页：

这一页的话前面这个中文排版，其实他本身看这个原稿他是没有英文的。但是咱不是为了让他好看一点，装饰性更强一点嘛，就加了特色的英文。

后面拖尾的这种设计也是他 MV 里面用过的一个操作。我就不回顾了。

后面这三个文字的重点就不用给他做新的排版了，因为目前我们这个画面我的想象就是一个左右结构。左边是这一页的标题，右边是这一页的具体内容，然后再加一个（剪影）的点缀。

右边的（指客户提供的原稿）的排版其实就已经很好了，我就没有给他换。

只是给他换了一下配色和 icon。这个 icon 也要尽可能地不要找这种具象的，要找一些抽象的。为什么呢？

还是因为 MV 的启发，你们还有印象吗他有一些抽象的图腾化的 icon 作为点缀。但你不一定跟人家那种一样，他是比较偏钝形的抽象的 icon，你就可以找一些这种螺旋形的、圆形的，随便，只要他是抽象的。

能理解抽象和具象吧，这就是很明显的具象：

什么放大镜、麦克风这就叫具象的。（像上面我们用的）这种命名不出来的，比较偏几何的就是抽象的。

这样工作量很小，你就不用重新排版了。然后再加一个这样的剪影。

这就是前两页，先把前两页发给甲方以后甲方觉得挺好。

这一部分就是这些，然后讲下部分。

05

介绍终版 PPT

我先给打家看一下整个这七页我最后是怎么做的。然后挑最后一页讲一下我们为什么要给他做一个色调的修整，也就是之前说的要跟整体的一个大的色调去做一个融合。讲完这个马上就结束了。

我现在换到 PPT 这个共享，

先带大家整体过一下思路，第一屏：

我希望肯定还是黑底的，因为你看那个 MV 它大部分时长还是一个黑底的设计，所以我就选择把这样一个视觉风格作为首页去奠定他整体的这个风格。

然后选了两个他给的素材里的形象去进行一个抠图处理。然后摆放。

因为如果你只放一个的话，就还是那个画面重心的问题，他会比较空。且如果只放这一个的话其实它右边的形状不是很好，所以我就做了一个组合。

另外它颜色也得调一下，因为它是背光的。

还有一个点，大家要学会去用好这个图片素材里面的引导。这个引导是什么呢？就是人物的眼睛看的方向；看的方向是什么呢？就是我们的这个标题。

他就有一个互动感了，就比较生动了。

下一页是直接在镭射的背景上做的目录：

当时有个想法是想让目录页和其他这个黑底形成一个反差。

这样的话会有节奏。就是说大的配色是不变的，但是在小的这种，尤其是目录页这种，我要开始讲我的产品了，大家要对 PPT 里面的内容和节奏有一个了解，有一个设计。

比如说开头有一个封面一个主视觉，那接下来是有一个开场，一个引导，说接下来我们要讲什么。那这一页就会说有点强调感。

那这个强调感就是希望能跟这个黑底会有一个不一样的感觉。所以哪怕我出了三版，也都是以浅色作为背景的设计。其中一个做了一张剪影：

你看这个剪影也是很丰富、很好看的。比较适合做剪影。

然后是章节页，章节页就是直接把这 4 页贴上去了：

因为他们以后是要调字的，这都是可以编辑的。以及 PPT 里面的 GIF 他都是可以在编辑页直接自动播放的。所见即所得。

然后是下一个。就刚刚讲的那一页。其实这些我都是用 PPT 做的，没用 Figma。其实用 Figma 会更快，而且效果会更好。

PPT 限制比较多，但是考虑到对方要自己编辑嘛，所以我就用 PPT 做的。

其实 PPT 在设计上也是一个常见的需求，（所以）大家也要熟悉一下这个软件。它确实不好用，所以才需要我们去熟悉、去学习。

然后这个是下一页：

就是用那些不太好用的图去做这样一个镶嵌、剪切就行了。就不用去做额外的抠图、设计之类的了。

然后这是倒数第二页：

这个他是会给提供几种模板，然后你就让他有一种节奏感，节奏感意思就是说，即使在统一设计风格下，但是细节上的排版布局又不一样。但是整体上看上去又是一个视觉风格。

最后一页是感谢观看：

最后我们讲这一页就好了，讲完就结束了。这一页就很明显是之前（甲方提供的素材）红光那一页。

我就不贴原图过来了，时间限制。如果是之前这些光还有她的瞳孔都是红色的，这么贴过来的话是没有目前这种改好色的这个图更搭整体的视觉风格的。

我们想要追求的效果是什么呢？是一致性与和谐性。

然后，你要分析他给你的素材，中间她是拿着一个易拉罐，他是很有冲击力的，（因为）是摆到画面前了。

他是有一个前后，他虽然画面上是左右，但从景深上来说是一个前后的关系。

这样的话你就会增加整个画面的趣味感，虽然是最后一页，你也可以把这些哪怕没有什么实际意义的字，寒暄性质的字，做一个变形处理。

（上方）这里也是做了一个镂空处理，一个“THANKS”，就是给他做一个呼应吧。英文和中文的呼应。不然的话就没有那种结尾页的感觉，其实不加也可以，但是加了的话就会显得你的细节更丰富。

改色是用色相和饱和度改的。就是我感觉今天时间比较久了，我就不单独讲 PS 了。因为平时也都和大家有沟通过，感觉用 PS 的人还是挺多的。就默认大家对 PS 比较熟了吧。

我今天主要还是讲了一点 Figma 和 AE 的操作，也都比较基础。因为确实这两个软件用的人也比较少。

（今天）就大概是这么一个分享，到这里就结束了。看看大家有什么自己想分享的或者想问的问题。没有的话我们到这里就结束啦。

谢谢大家的参与~