电磁炉海报
苹果的电磁炉海报,大家都见过了:

Apple Special Event 几个大字,和电磁炉的圈,都是由浅金色向暗金色线性渐变的。
其余金字都是非渐变的暗金色,用的是较低的字号和字重。
播放视频用的是白色字 + 白色图标,让人一眼就能看出这是一个可以点的按钮。
收(kāi)工啦
打开 XD,新建工程,选择适用于 iPhone 的尺寸作为默认画板。

选中画板,在右侧面板把画板的背景调成黑色

画了一个圈
选择左边栏的椭圆工具,按住 shift,在画板中下方画一个圆。

选择左边栏的第一个按钮,切回选择工具。在选中圆的情况下,按 Alt(或 option)可以查看圆与周围元素的距离:

将圆调整至一个合适的位置,本文调整为上右下左分别为:350, 64, 68, 64,比上图中的位置往上 1px。
电磁炉线圈
按住 option(不知道 Windows 上对应的键是什么)的同时拖拽圆,就能快速复制一个圆,我们让原来的圆和新的圆重叠起来:

选中其中一个圆,拖拽右上角的锚点,把圆缩小:

移动小圆,让大圆和小圆的中心重合:

注意,要使两个圆的圆心重合,最好两个圆的直径同为奇数或者同为偶数:

同时选中大圆和小圆,点击右上角的减去按钮:

这样,两个圆就变成了一个形状,如果你点击图层的小图标,依然可以展开看到两个圆:

金了!
先随便挑两个颜色(本文是 #F2D4C0 和 #B18062)作为浅金色和暗金色。
你可以用左边栏的矩形工具画两个方块,放在 XD 的空白处,把记录下来:
选中我们的环,在右侧面板的“外观”中,把边界前面的勾去掉:

点击填充左边的小方块,在弹出的框的左上角,选择“线性渐变”:

环的上下各出现了一个把手(圆球),上面的比下面的大很多,处于被选中的状态。说明 XD 默认选中了上面的把手,我们将它拖到环的左上角,在颜色面板的 hex 中填入我们的浅金色(本文是 #F2D4C0):

把下方的把手拖到右下角,颜色 hex 填入我们的暗金色(本文是 #B18062):

六圆共点问题
用左侧栏的椭圆工具,在画板的任意位置画两个重合的、长宽相差 2 的圆,如图:

选择左侧栏第一个键,切回选择按钮。同时选中两个圆,点击右上角的减去按钮,把两个圆变成一个宽度为 1px 的环:

选择我们原先的粗环,右键复制(虽然这里没出现,但要注意选择的是快捷键为 C 的而不是快捷键为 D 的复制):

选择我们的细环,右键,粘贴外观:

我们的细环就变成了细金环:

复制一个细金环,调整大小和位置,套到粗环内外层:

调整细环的长宽,与粗环的长宽同为奇数或同为偶数,这样就能使中心真正重合,后文中的圆也是一样。
用椭圆工具,在粗环上画一个圆,拖动,使之与环中心重合:

在右侧面板中把填充的勾去掉,把边界的颜色变为纯黑色:

边界的颜色不可以设置渐变,而填充可以。由于两个黑圈不需要渐变色,所以不需要像上面一样做成环。
复制一个同样的圆,调整大小和位置,让他们呈现出和苹果海报上类似的样式:

可以通过计算得到两个圆的合适大小:
中心直径 = (粗环的外直径 - 粗环的内直径) / 2 + 粗环的内直径
两个内圆的直径分别是中心直径加 x 和减 x
镏金大字
在左侧栏中选择形状类似 T 的文本工具,在画板中上方写两行字:

本文使用了 Noto Sans CJK SC 字体,你可以选择 PingFang SC 来接近苹果的海报效果。
到左侧栏切换回选择工具。选择大标题(本文是“全新电磁炉”),设置字号 48,字重 Bold,对齐方式居中:

点击右上角的水平居中按钮,使它相对于画板水平居中:

文本的填充颜色是不能渐变的,但我们可以把文本转化成路径,在选中标题文本的情况下,找到转化为路径(Mac 用户可以用帮助来搜索):

选中我们的粗环,注意选中的是叫“减去”的这个形状,而不是里面的椭圆,注意看左侧面板,不要选错:

右键复制。注意!选择的是快捷键为 C 的而不是快捷键为 D 的复制:

右键点击由标题文本转化来的路径,粘贴外观:

你的海报基本就成型了:

副标题的文本看着调一调就可以:

微小的调整工作
调整圈、环的尺寸,文本的字号、位置、字重等,直到效果达到满意:

调整的精度达到了 0.01px,细节对成果的影响很大。

选择两个元素,右键选择“组”可以将它们组合成一个文件夹,这是一个好习惯。
另一个很重要的习惯是给你的每个元素取名字。
项目变大了,层级会非常复杂,好习惯带来的效果就会很明显了。
最终成果
选中画板,按 command + E(Windows 可能是 Ctrl + E)导出。

观看视频的白字就不加了,人家是网页可以插链接,我们就一图片凑什么热闹。
