概述
我司最近发了很多集智锦囊,像这样的:
一定 根本没 有人想知道锦囊是怎么做的,所以我来带大家做一个。
工具介绍
我们要用的是 Adobe XD,打前阵子起,这东西就永久免费了:。
Adobe 大家都懂吧:
Adobe 最有名的产品要数 Photoshop,有名到「P 图」这个词中的 P 指的就是它。 XD 则是 Experience Design 的缩写,它是用来做用户体验设计的工具。
新建文档
打开 XD,它会要求你先选择一种画板尺寸:
选择最左边的 iPhone 即可:
画板决定了最终输出图像的尺寸。这个时代以移动设备的体验优先。
之后界面就变成了这样:
现在文档还叫“未命名-1”,而且没保存。建议上来先 Ctrl + S 或者 Command + S 保存一下。
修改画板背景色
界面正中的这个大白方块就是你的画板,画板现在叫 iPhone 6/7/8 - 1。
双击画板的名字可以重命名,建议把画板改成合适的名字,比如“锦囊”。
- 点击你的画板,出现的蓝色外框表示它已被选中。此时在右侧面板中找到“填充”:
画板现在是白色的,因此“填充”二字左边是一个白色的矩形。
- 点击这个白色矩形,选择“线性渐变”:
- 选择之后画板会变成黑白渐变,上下两端各有一个圆球形“把手”:
- XD 已经帮你选中了画板顶部的把手(比底下那个把手大了一圈),将这个把手拖拽至画板左上角:
- 从右侧面板的弹出框中,将颜色从 #FFFFFF 改成 #45E0A7,敲回车:
这样左上角的把手就变成了绿色,我们现在来改变右下角的颜色。
- 点击画板底部的把手,把手变大一圈,说明它已被选中,将它拖到画板的右下角:
- 从右侧面板的弹出框中,将颜色从 #FFFFFF 改成 #D5E969,敲回车:
本期成果
这就是做锦囊的第一步:弄个背景色。