如何 在 Sketch 中制作 Twitch 表情
想知道如何制作 Twitch 表情吗？您来对地方了。今天，我们将引导您完成在 Sketch 中创建 Twitch 表情的简单、分步过程。您将学习如何使用我们的矢量工具和图层样式选项来创建您自己令人难忘的小图标，您今天就可以将其上传到 Twitch！
让我们开始吧。
什么是 Twitch 表情？
如果您来这里是为了制作 Twitch 表情，您可能已经知道Twitch是一个直播平台，汇聚了各种类型的内容创作者。但 Twitch 如此受欢迎的原因在于它提供了互动体验。观众可以通过实时聊天直接与他们喜爱的创作者互动，可以通过打字，也可以通过 Twitch 表情（你猜对了）。
那么什么是 Twitch 表情？简单来说，这是 Twitch 特有的一种表情符号。就像您在短信中使用表情符号一样，您可以使用表情符号作为在 Twitch 上输入聊天消息的视觉替代方案。如果您是 Twitch 上的活跃内容创作者，希望强化您的个人品牌，那么拥有自己的自定义表情尤其有用。除了为您的订阅者提供引人入胜的流媒体内容之外，您还可以为他们提供一种独特的方式来表达自己 - 一种可以让他们回来的方式！
sketch" style="box-sizing: border-box; border: 0px; font-variant-numeric: inherit; font-variant-east-asian: inherit; font-variant-alternates: inherit; font-weight: inherit; font-stretch: inherit; font-size: 1.75rem; line-height: 2.125rem; font-family: "Marfa Mono", "SF Mono", "Source Code Pro", Consolas, Menlo, monospace; font-optical-sizing: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; margin: 3.75rem 0px 1.25rem; padding: 0px; vertical-align: initial; letter-spacing: -1px; text-wrap: wrap;">如何在 Sketch 中制作 Twitch 表情
为了帮助您在 Twitch 上提升个人品牌，我们整理了一份创建您自己的表情的分步指南。今天，我们将创造一只简单（又可爱）的猫——它有着明亮的眼睛和甜蜜的微笑。
让我们快速浏览一下我们想要的最终设计：
快速浏览一下我们今天要创建的 Twitch 表情。
准备好？让我们深入了解教程吧！
让我们创建它的头部
在 Sketch 中说明任何内容的第一步是创建画板。它将有助于保持我们的图层井井有条，让我们的工作流程顺利进行。点击A激活画板工具，然后单击并拖动画布上的任意位置以创建 112x112 画板。
接下来，按下O椭圆形工具，我们将用它来创建猫的头部。在画板内单击并拖动，直到获得 90x65 的椭圆形。您还可以直接在检查器中调整这些尺寸。
最后但并非最不重要的一点是，去掉椭圆形的边框，你就制作出了头部！
您可以直接在检查器中调整任何形状图层的尺寸。
让我们看看那些猫耳朵
是时候添加猫最显着的特征之一了：耳朵。我们将通过创建一个三角形来制作第一个耳朵。单击工具栏中的“插入”按钮，前往“形状”，然后选择“三角形”。单击并拖动以绘制一个 36x57 的三角形并删除其边框。然后，将其放在头部的左上角，其底座正好位于椭圆形下方的中间标记处。
接下来，我们要让三角形看起来不那么尖。选择图层并点击Return进入矢量编辑模式。双击顶部矢量点，为其设置圆角。
然后，单击三角形的底点之一，然后点击3将其矢量点类型切换为Disconnected。将下部手柄向上拖动到矢量点中，然后将上部手柄向右拖动直至垂直对齐。对另一个基点重复上述步骤。完成后，您会发现三角形的边已弯曲，同时保持平坦的底部！
1您可以通过按、2、3或轻松在四种矢量点类型之间切换4。
你长出了一只耳朵！现在只需通过敲击复制形状⌘D并将第二只耳朵放在头部的右上角。
统一猫头
为了更轻松地设计猫的头部样式，让我们将椭圆形和两个三角形统一为一个形状。突出显示所有三个图层并按住并⌥⌘U集 -将多个形状合并为一个的布尔运算。然后，通过点击 ，在图层列表中为新的组合形状指定一个唯一的名称⌘R。您将可以更轻松地找到头层，以便稍后执行重要步骤！
现在您只有一种形状需要设计，请为其选择您选择的渐变填充。我们决定使用由三个颜色点组成的垂直线性渐变：#AFC1D7 为底部，#EAF2FB 为中间，#F7FAFF 为顶部。
然后，给整个形状一个粗的、深色的边框——这会给你的表情带来经典的 Twitch 外观。选择头部，添加黑色边框，并将其宽度调整为 4 像素。
现在您只有一种形状需要设计，请为其选择您选择的渐变填充。我们决定使用由三个颜色点组成的垂直线性渐变：#AFC1D7 为底部，#EAF2FB 为中间，#F7FAFF 为顶部。
然后，给整个形状一个粗的、深色的边框——这会给你的表情带来经典的 Twitch 外观。选择头部，添加黑色边框，并将其宽度调整为 4 像素。
您可以向线性渐变添加任意数量的颜色点。
让耳朵焕发生命力
让我们给耳朵一些深度来完成它们。为此，我们将为每只耳朵创建一个内三角形，首先从左耳开始。
点击V矢量工具，为三角形的顶角添加一个点，为底边添加两个点。但我们不会把它变成一个等腰三角形——你知道，是两条边相等的三角形吗？相反，请将左下点设置为比右下点稍低一些，以便三角形适应耳朵的曲线。
您可以在矢量编辑模式下根据自己的喜好调整任何形状
接下来，让我们圆角。由于我们使三角形不规则，因此每个角都需要自己的舍入值：顶部为 2.5 像素，左下角为 1 像素，右下角为 2 像素。最后，使用您喜欢的任意两种粉红色阴影为三角形进行线性渐变填充 - 较深的阴影位于顶部。然后复制三角形，水平翻转，并将其放在右侧的耳朵内。
那是一些可爱的耳朵！
创建一对图层时，只需创建一个图层然后复制它即可节省时间。
让我们给它一些眼睛
准备好给你的猫一些眼睛了吗？太棒了，因为我们将大量使用椭圆工具！我们将从左眼开始，然后复制它以创建右眼。
点击O创建一个 22x30 的椭圆形并将其放置在猫脸的左上角。然后，给它一个黑色垂直线性渐变，底部较浅的阴影。
接下来，再次点击O以创建一个 13x12 的较小椭圆形，并将其放置在较大椭圆形的底部。使用您喜欢的任意两种蓝色阴影为其进行垂直线性渐变填充 - 较深的阴影位于顶部。
您可以通过在图层列表中相应地排列它们来将一个图层放置在另一图层之上
我们将O最后一次点击创建一个 5x5 的小圆圈，并将其放置在黑色椭圆形的左上角。给它一个白色的填充以及一个白色的、模糊的阴影。现在，它的眼眸里竟然闪烁着一丝光芒！
突出显示所有四个椭圆并将它们分组为一只眼睛。然后点击⌘D复制它，并将第二只眼睛直接放在它对面的右侧。眼睛距离有多远取决于你！
对图层进行分组和重命名可以让以后更轻松地找到它们！
让我们添加一个鼻子
现在让我们通过创建鼻子来赋予你的猫嗅觉。我们将制作一个倒三角形：顶部有两个点，它们之间和下方有两个点。您可以使用矢量工具从头开始创建自己的三角形，也可以再次使用三角形工具！只需前往工具栏并选择“插入”>“形状”>“三角形”。然后，画一个 16x9 的三角形并将其旋转 180°。
让我们给它一个垂直的线性渐变，其中有两种褪色的粉红色，深色的在上面。接下来，我们将在矢量编辑模式下对角进行圆角处理 — 因此Return，将顶部的两个点舍入为 2 像素，将底部的点舍入为 3 像素。
但暂时不要退出矢量编辑模式！将鼠标悬停在顶部路径的中心并按住 ，创建一个新的矢量点⇧。然后，将其向上移动 1 个像素，并将其矢量点类型更改为“镜像”。
瞧！你已经给鼻子的顶部做了轻微的弯曲。
通过调整其矢量点和路径，您将一个普通的旧三角形变成了一个可爱的小鼻子。
创建它的嘴
让我们让你的猫微笑。我们将V再次点击矢量工具并在其面部的中底部绘制一条水平直线。使其长于鼻子，但短于双眼之间的距离。然后，将其宽度调整为 3 像素，并为其指定圆角 End 类型。
接下来，我们将进入矢量编辑模式，因此选择路径并点击Return。看到标记您所画线条的起点和终点的两个矢量点了吗？我们将在它们之间添加三个向量点 - 总共有五个向量点。
提示：要确保三个矢量点均匀分布，请⇧在标记每个点时按住 。
在矢量编辑模式下，您可以向路径添加任意数量的矢量点。
现在让我们把这条直线变成一个微笑！仍处于矢量编辑模式时，选择第二个和第四个点并将它们向下移动 4 个像素。这会给你的猫带来 W 形的微笑。
然后，按住 的同时⇧，选择第二个、第三个和第四个点，并将它们的点类型更改为Mirrored。这会将你的“W”变成一条更弯曲的线。从那里，您可以调整矢量点，直到创建出您喜欢的微笑。只要确保保持一切对称即可！
最后，给它一个深色的径向渐变，将色点放在“W”的中间，并使用类似于头部边框的调色板。
径向渐变是您可以在我们的 Mac 应用程序中添加的几种渐变填充类型之一。
添加一些收尾工作
不错的工作！您拥有一整套面部特征 - 从闪烁的眼睛到融化 Twitch 订阅者心的微笑。当然，总有最后润色的空间。升级表情的一种方法是添加一些条纹。在这一步中，我们将添加六个条纹：两个用于猫的前额，两个用于每个脸颊。
我们先从额头开始。点击L直线工具，画一条垂直线，从耳朵的中间开始，到额头结束。但不用担心它的长度是否完美。将线稍微向左倾斜并将其靠在左耳上。接下来，给它一个圆角的 End 类型并将其宽度调整为 8 像素。最后，复制它，水平翻转，然后将第二条线靠在它的右耳上。您刚刚制作了第一条条纹！
我们将为每个脸颊再创建两对线，但我们将使它们水平。完成后，您应该得到如下所示的内容：
您可以通过前往工具栏并选择“插入”>“形状”>“线条”或按 来找到“线条”工具L。
现在，还记得您重命名的第 3 步中的头层吗？确保它位于图层列表的底部，然后右键单击它并选择“用作蒙版”。此时，所有六个条纹都应该塞进头部层 - 看起来更像是脸部的自然部分。
这意味着是时候给条纹一些颜色了。为每个条纹添加线性渐变 - 渐变到脸部中心。最后但并非最不重要的一点是，让我们通过将不透明度模式更改为正片叠底并将其设置为 80% 来柔化这些条纹。
现在你已经有了它——你的 Twitch 表情！
您可以通过更改图层的数值或使用检查器中的下拉菜单更改其混合模式来调整图层的不透明度。
导出前测试您的 Twitch 表情
在在线上永垂不朽之前测试您的表情总是一个好主意。其一，Twitch 上的很多人都在深色模式下使用实时聊天 — 因此请务必在较暗的背景下测试您的表情 (#18181B)。
您还需要在这三个维度上对其进行测试：
112x112
56x56
28x28
为了确保您的表情无论大小如何都看起来清晰，还值得以像素为单位进行检查。只需点击⌃P并放大即可拍摄特写镜头。
一旦您对测试结果感到满意，您就可以导出您的表情了！只需选择您的画板，在检查器中单击“可导出”，然后将您的表情导出为 PNG 文件。
在白色和黑色背景下测试您的设计将帮助您考虑浅色和深色模式的用户。
就是这样！恭喜您制作了属于您自己的 Twitch 表情 - 而且也是一个可爱的表情 😻
