如何制作一张少数派风格的 Banner-一元阅读-天时网

网站所有资源都有，可联系VX：kanyingvip

如何制作一张少数派风格的 Banner| 本文为付费栏目文章，您已订阅，可阅读全文 |

不久前，派友 @壁纸吴彦祖在 Power+ 的 Slack 群里提过一个选题建议：

有没有可能出一期如何制作少数派风格封面的教程呢?，文章封面、付费栏目的目录等，都好好看啊。

我自己也很喜欢少数派的封面图，传达的信息很明确，而且有少数派自己的风格。写这篇文章就是想借着这个机会，和大家分享一下做头图的基本方法。从我们都十分熟悉的少数派付费教程封面出发，来和大家聊聊做封面图（Banner）这件事。

[rihide]

虽然你我可能不是设计师，但也会遇到需要自己动手做张封面图的情况，可能是用在一个作业的 PPT，也可能是经营公众号、淘宝店的日常需求。想起以前自己业余做网站时，免不了要做一些图片作为封面来吸引读者点击。但是图片要怎么做才好看、用什么工具来做，都是身为初学者时的难题，不知从何下手。

对此，我的思路是通过解构现有的作品，进行模仿。例如本文以少数派付费栏目的封面图为例——逐一分析图片中包含的元素，看看他们是如何组合在一起的。我们依葫芦画瓢，还原一张头图的制作过程。

解构少数派的封面图

模仿是一种学习方式，正如这位派友喜欢少数派风格的各种封面图，就可以把他们作为模仿和学习的对象。我们直接拿这些封面图来开刀解构，看看这些封面图里究竟包含了哪些结构。

这些「付费栏目」的封面出现在同个页面时，尽管颜色各异，但很容易看出一种固定的解构。我们挑出一张元素最多，看似最复杂的图片，看看图中都有哪些组成部分：

栏目的标题（高效信息管理术）
作者的头像与昵称（Louiscard）
主要元素（一些代表应用场景的图示）
修饰元素（颜色比较浅的那些图形）
背景颜色

这些元素以特定的间距组合在一起，不同栏目的封面有相同的规则。同时每张图又有自己的配色，呈现了不一样的主题与风格。尽管其中涉及了诸多设计方面的知识，也许我们还没有深入了解，但也不妨碍我们直接将现成的作品作为模仿的对象。

说明：可以做图的应用有很多，本文主要用苹果的「Keynote 讲稿」（下称「Keynote」）来演示，这些功能在其它有绘图功能的应用中同样能够实现。

明确图片的排版方式

通过上面的图解，已经能够看出这些图片共同的布局方式了，都是上下两行文字，搭配一个贴合主题的背景，这个就是所谓的排版或者构图。为了统一的视觉风格，同个应用、网站里，相同大小的对象会尽量使用固定的一组或几组排版。例如，你可以观察一下 App Store 首页的应用推荐有几种排版方式。

想要套用一个版式非常简单，很多资源网站（例如创客贴）提供了免费的模板以供下载，直接下载使用的就可以。如果像是看到了少数派头图这种情况，你没有办法获得模版文件，也可以通过以下步骤将其制作成一个版式模板：

第一步：将目标图片保存到本地，查看其宽高数值。
第二步：在绘图软件里新建相同宽高的画布，等比例放大两三倍也是可以的。
第三步：将目标图片粘贴到新建的画布中，注意撑满整个画布。
第四步：打开「标尺」功能，使用参考线将图片中的各个元素的边界标出来。

如上图，我们已经把付费栏目的头图的排版用参考线体现出来了，图上用颜色高亮的，就是标题与作者信息的位置，意味着我们的文字不可以超出限定的范围。如果觉得参考线太多，不容易查看，也可以用矩形来表示这些区域。

排版、布局或者构图，表达的都是同样的意思，去掉图片、文字，这个解构就像是一个骨架。我们在初级阶段时，尽可以直接套用比较成熟的方案来使用，本文就继续以少数派付费栏目封面图的版式为例来讲解。

确定头图的主要视觉元素

有了版式这个骨架，我们就需要往里填充内容了。最重要的是要确认图片的主题，它会决定我们在图片上呈现什么内容、使用何种风格与配色。这个环节也是我个人认为比较困难的，需要你对内容有足够的了解，并且把这种了解转变为视觉元素。

少数派的付费栏目属于知识性内容，往往主题明确，我们选择的图案尽可能体现其主要内容就可以了。当然，这个主要内容有可能是具体的，例如一个软件或者硬件的测评；也可能有抽象的内容，例如「高效信息管理术」、「理财投资新手的操作指南」，这样的内容就没有现成可用的素材。

例如 OmniFocus 的教程封面上最醒目的当然是它的图标；而一篇硬件的使用体验则一定会出现这款硬件本身，这都是我们司空见惯的，就像是一部动漫作品的封面，大概率会出现其主角的形象。

像是「高效信息管理术」这套教程，就没法直接套用某个应用的图标。除非整个教程围绕了特定的一两个应用来讲解，那也可以用它们的图标作为主体。让我们再看一次这个封面：

实际上，我们看到这套教程的封面抽象了信息管理过程中的一些概念或工具，例如：标签系统、搜索功能、任务列表、Markdown（图上那一圈图标），把他们表达为图形以后再作为视觉元素来组合使用。这就是一个通用的思路，你可以从内容当中抽取关键词，再看看能否转化为视觉。

这里只是举两个例子，对于水平高的人来说，即便是看起来具体的内容，也有可能用抽象的视觉来表达；甚至抽象的内容用更加抽象的视觉表达出来，那已经是艺术水平了。

扯远了，所以当我们根据内容的主题想好了代表内容的元素以后，接下来想办法把它们呈现出来。

寻找合适的图形

如果你没有一定的美术功底，即便是绘制一个最小的图形，也可能会把你难倒。我尽管也做了许多图，但是很少有自己绘制元素的时候，因为大部分的素材都可以在网络上找到。

就我所知，即便是专业的视觉设计师，也并非都采用手绘的方式来制作每一张图片，就像程序员们有 GitHub 一样，设计师群体也共享着庞大的素材库。这些同样可以为我们所用。

寻找插画类型的素材

这里先给大家推荐的是少数派设计师都在用的素材网站——freepik。freepik 提供了大量免费可商用的素材资源，而且搜索资源的时候支持一些过滤条件。例如下面我们要用到矢量素材，就可以勾上 Vector 筛选项，这样搜索结果里就只会包含矢量的素材。当然，类似的站点还挺多的，平时可以留心收集一些备用。

在这样的素材库里，通过一个关键词，我们就能找到大量可用的素材。我打算先找一个人物形象用作画面的主体，模仿原图。这里我用了关键词 character（人物），找到以下一些结果：

我很喜欢这个阔步前进的男生形象，而且人物的发型和「高效信息管理书」作者 Louiscard 的头像还有几分相似，就决定是他了。这个素材是由 freepik 上的账号 slidesgo 上传的，它的其它插画我也很喜欢。

不过这里我们遇到点小麻烦，原图的背景里包含了两旁的柜子，还有一些背景色；这都是我不想要的。我们可以用 Keynote 里的图像处理功能来将它们移除：

第一步：选中图片后，使用图像工具里的「编辑遮罩」，先把图像多余的部分裁切掉。

使用 Keynote 的「编辑遮罩」功能裁剪图像
第二步：使用「即时 Alpha」功能，在背景上不需要的元素进行涂抹，就可以将它们移除。

使用 Keynote 的「即时 Alpha」移除图像背景

如此，我们就获得了一个独立的人物形象。

寻找图标类型的素材

原图当中，还有很多小图标，例如上面提到和信息管理相关的几个词，我们可以分别找一个合适的图标来表示。因为涉及到多个元素，还要考虑他们之间的兼容性，避免出现两个大相径庭的风格最后组合在一张图片里的情况。

有可能的话，我们可以从同个素材库里找到需要的素材。这里我顺便推荐大家了解一下苹果今年发布的 SF Symbols 系列图标，可以从苹果的 Human Interface Guidelines 页面下载到。

编注：SF Symbols 在正式使用时需注意其版权问题，本文仅做演示使用。

SF Symbols 本质上是一套字体，不过它也提供了工具方便使用者找到对应的元素。例如我们想找一个代表「标签」（tag）的图形，就可以直接搜索。搜索到的图标可以直接复制粘贴到 Keynote 的页面上。

当我们有了核心元素以后，就可以在将其放在排版当中了。这里我们可以从「显示」选项列表里打开 Keynote 的「对象列表」功能，也就是绘图软件里的图层列表。这里可以轻松的给对象重命名、调整层关系以及将相关的对象进行编组等。

当然，有些简单的图形，可以使用绘图软件自身的图形工具来添加，例如图上的虚线圆形。

说明：如果不熟悉 Adobe Photoshop、Adobe Illustrator、Sketch 等专业绘图工具的使用，可选素材的范围会小一些，尽量选那些无需太多改动的。

为图片添加文本

使用合适的字体同样是个提升美感的有效手段，不过目前我们先用基本款的字体就行，例如思源黑体等由大公司设计并发布的字体（需注意字体版权问题）。这样的字体也许缺乏个性，但是通常是不会错的选择。

如果你的图片需要文字，根据排版的约束，将文字调整到合适的大小、粗细，并且对齐到正确的位置即可，本文就不在字体这方面过多展开了。

为图片选定配色方案

掌握色彩的运用，并不是一件容易的事情。不过，我们一样可以站在巨人的肩膀上，直接套用成熟的配色方案。这个配色方案指的是图片整体使用的几种主要颜色，也就是占据图片整体面积比较大的那些颜色。一些细节的颜色可以不用太过在意。

从分享配色方案的平台获取

如同前边列举的素材一样，也有一些网站专门分享配色方案。例如 Color Hunt、Color Drop 之类的都挺知名的，我印象特别深的是名为 Nippon Colors 的网站，它提供了很多日本传统颜色的搭配，网站本身也很精美。

这样的网站还挺多的，也包括一些产品的官网会分享他们自己的设计理念与配色方案，例如 Google 的 Material Design，苹果的 Human Interface Guidelines 之类的，都会包含他们对颜色使用的建议。最终的选择还是取决于图片本身倾向于呈现哪种风格，这个也包括了一些个人的主观色彩。