公众号的封面有两种尺寸——长方形和正方形,分别用于不同的场景。一般单条图文的封面和多条图文的首条封面会使用长的,而多条图文消息的后面几条会使用方形的。但是这些图还可能在其他地方显示,规则比较多,所以我们一般是做一张长图,裁切其中一部分作为方形封面。
在公众号写作后台,当你选择封面时会被要求你裁切为2.35:1和1:1的两种尺寸,以便在不同场景展示。
在此之前,让我们来认识一下Figma的编辑器界面。它就像是你的工作台,中间是你的画布,四周摆满了各种各样的工具。从下图中可以看出,Figma的编辑器界面并不复杂,除了中间的画布区域,主要由三部分组成。
接下来我们就开始设计上面这三种封面吧。
我们先来尝试做第一个,也是最简单的一个,只需要把文字叠加在一张图片上就好了。
新建设计文件后,进入文件,按下F键然后用鼠标在画布中拖拽一个矩形区域,画一个Frame。Frame是Figma中的容器图层,它里面可以放置其他图层甚至另一个Frame,让设计具有父子级结构。这里我们在画布中直接画的Frame可以看作是一个画板,方便我们组织设计稿。
接下来我们添加背景图片,添加图片有多种方式,你可以截图后直接CmdV(Windows下是CtrlV)粘贴进去,也可以直接从文件夹拖拽图片进去,我更习惯使用快捷键CmdShiftK(Windows下是CtrlShiftK)。按下这个快捷键之后会调出文件选择器,选择图片后在画布中需要添加的地方点一下就把图片加进来了。注意我点的是这个空白画板,因为这样才能把图片添加到这个画板内部。
我们来调整一下图片尺寸,先在触控板上两指捏合,或者按下Ctrl不松手同时滚动鼠标滚轮,将图片缩到可视区域内。然后同时按下ShiftOption(Windows下是ShiftAlt)拖拽图片右上角的操控点,来缩小图片尺寸。这里按下Shift可以让图片保持宽高比缩小,按下Option(Alt)可以让图片缩小时以其中心为缩放中心。
接下来调整一下图片位置。我们可以直接拖拽让它对齐画板的边缘,当图片的一边接近画板边缘时会被自动吸附对齐,然后按下Shift并拖拽一个操控点,让它在保持宽高比的情况下和画板一样宽。
现在我们可以添加文字了。按下T键,在图片上点一下,就创建了一个文字图层,此时输入文字即可。
在右侧修改一下字体为NotoSansSC,并把字号调大一点。NotoSansSC是一个谷歌云端中文字体,不需要安装,你也可以改成你自己本地的字体,不过需要注意的是这里只能输入字体的英文名。
我们把文字居中对齐,直接拖拽文字图层,此时会显示红色的对齐辅助线,当辅助线为“十”字形的时候就表明它是水平和垂直居中对齐的。
我们再加上第二行副标题,同样地按下T来创建一个文本图层,然后拖拽它的右边,让它和「小试牛刀」图层一样宽。这个过程中红色辅助线可以帮助你判断是否对齐。
然后我们增大副标题的文字间距,让它充满一整行。点击右边的字间距输入框,然后按上下方向键就可以调整了,不过这时候每按一下字间距会增大或缩小1%,可以同时按下Shift和上下方向键,这样每按一次的变化就是10%,可以快速调节到想要的值。
按下Shift同时选中这两个文本图层,拖拽它们将其居中对齐于画板中央,注意红色辅助线可以帮我们判断是否对齐。
看起来文字有一点不明显,我们给它们加上投影。将右侧的属性面板滚动到最下方,可以看到Effects(效果),点击它右边的加号,就可以添加一个DropShadow(外部投影)。在弹出的投影属性面板中调整它的各个值,直到你满意为止。我们把Blur调为0,这样投影就有了清晰的边缘。
看起来不错,不过这个图有点暗,我们稍微调整一下它的色调吧。你不必打开Photoshop,直接选中图片图层(可以按下Cmd并点击图片),然后双击,就会调出图片调节面板,我们只需要把前三项的滑块往右边稍微拉一点就好了,它们分别是:曝光、对比度和饱和度。现在图片颜色看起来是不是更鲜艳一点了呢?
这样我们就完成了Cover1的设计。
第二种风格和第一种类似,不过更适合背景比较复杂的情况。
按下R键,点击画板并拖拽,画出一个矩形,它默认是灰色的,并且盖在文字上放了。在左边图层列表中直接拖拽它,把它移动到文字和背景图片之间。
拖拽它的左上角和右下角操控点,把它的尺寸调整为和画板一样。
在右侧属性面板中找到Fill输入框,在里面输入f并回车(Figma会自动补全为#FFFFFF,也就是白色的十六进制色值),把它的填充颜色变为白色。
同样地,我们选中两个文字图层,把它们的颜色调整为黑色(输入0回车)。
白色矩形已经把背景图片全部遮挡了,我们需要调整一下它填充颜色(Fill)的不透明度。在左侧图层列表中选中白色矩形,在右侧属性面板中找到Fill,在色值右边输入一个小于100的数字,把它变为半透明的。注意不要改成了上面的Layer那里,那里是图层整体的不透明度。
接下来,我们给白色矩形添加毛玻璃效果,让它后面的图案变得模糊。在右侧属性面板中找到Effects,点击加号添加一个效果,默认添加的是投影,我们把它切换为Backgroundblur,也就是背景模糊。
点击旁边的小太阳,调整Blur也就是模糊值为一个合适的数字,让背景看起来不会干扰前面的文字。
这样我们就完成了第二种风格的封面。
其实有时候我们并不需要背景图案,一个简单的渐变就可以让我们的设计变得很好看。
复制一个Cover2,删掉里面的矩形和图片背景,只留下两个文字图层。
选中最外层的画板,我们把这个白色换为一个渐变。点击右侧属性面板中的Fill颜色值,在弹出的颜色选择器中,点击顶部的Solid,将其切换到Radial,也就是从单色填充切换为径向渐变。
然后我们调整一下径向渐变两端的颜色,使其中间为白色四周为浅黄色,有一种聚光灯打在中间的感觉。
调整一下它们的大小、位置、角度、颜色,直到满意为止。当鼠标靠近图标的某个操控点时,会变为两头弯曲的箭头,此时在画布中拖拽可以旋转图标。
现在我们已经完成了这三种风格的封面设计,做出的效果很简单,但是可以帮助你快速了解Figma中的一些工具和概念。当然,你也不必完全严格按照我这个流程操作,在设计时可以多尝试尝试,说不定能做出更加惊喜的效果。