几个月前，Sketch 向我们发起了挑战，要求我们使用单层创建独特的设计。虽然自由探索和放纵很棒，但令人着迷的是约束如何帮助我们在许多有趣的方式中推动创造力。在这个挑战中，我将向你展示我如何使用单层和大量渐变来创建一个看起来多汁美味的草莓——这是提升你的渐变水平并习惯用更少的东西设计更多东西的完美教程。
在我们深入之前，这里是对最终插图的快速浏览。随时在教程中的任何时间回到这里，跟踪你的进度！
草莓的魅力不止于表面，所以不要感到有压力要一口气完成整个教程！收藏它，留待以后再看😉
让我们开始吧！
1. 创建画板
首先，让我们设置画板——这将有助于我们定义草莓的大小和形状。按A创建画板，在画布上的任何地方单击并拖动，直到你对大小满意为止。在本例中，我们将使用 1200x860 像素作为我们的尺寸。
2. 绘制草莓形状
按V启用矢量工具，开始绘制草莓的轮廓。在画布上的任何地方单击以创建围绕形状的点，并通过拖动手柄来弯曲线条。不要担心使其完美，草莓有各种形状和大小！
但是，由于我们只使用一层，请确保将叶子和茎作为相同路径的一部分绘制。或者，你可以分别绘制它们，然后使用菜单中的图层>合并>联合将它们合并到一层。
3. 添加基本渐变
现在我们有了形状，让我们为它添加一些颜色。转到检查器中的填充部分，添加一个线性渐变。在本例中，我们从较浅的红色 #E81436 开始，然后使用多个颜色停止（如 #E50000、#D20000 和 #BF0000）逐渐使其变暗。
如你所见，我确保渐变停止仅到草莓宽度的一半。
4. 使用阴影创建深度
现在是时候使用阴影为草莓带来一些深度——我们将使用多个彼此堆叠的径向渐变。玩弄阴影的位置，直到你对它的外观感到满意。
在每个渐变上使用多个停止（三个到四个），并确保为每个停止逐渐降低 alpha 值（不透明度）。例如，在一些渐变中，我们的第一个停止的 alpha 值为 100，第二个停止为 99，第三个停止为 44，最后一个为 0。
你会发现整个教程的逻辑都是一样的：你的第一个渐变停止应该是不透明度最高的，最后一个停止应该始终设置为 0。在本例中，我将 #590000 和 #710000 组合在一起，并逐渐降低了它们的 alpha 值。
随意玩弄中间值，但确保它是渐进的。
5. 填充叶子
现在，让我们用小的绿色渐变填充叶子和茎。记住遵循相同的逻辑：将渐变第一个停止的 alpha 值设置为 100，并逐渐降低到 0。
以下是我组合的绿色值：#4DBE00、#00BB10、#97FF12 和 #8FFF00。
6. 创建叶子的结构
通过将硬边渐变彼此叠加，你可以创建一种三维叶结构。尝试使用以下值：#325900、#218A00。
7. 为叶子添加深度
为了使叶子更具深度，在现有的渐变上叠加额外的渐变，以使叶子向底部变暗。我使用了 #325900、#218A00、#471900 和 #000401。
8. 清理顶部边缘
为了创建草莓到叶子的干净过渡，你可以在该区域上方放置一些径向渐变——如下面的图像所示。首先，使用 #DD0000 添加一些红色渐变。不要担心为它添加多个停止。
然后，我们将使用黄色色调来混合叶子与草莓相遇的区域。叠加多个渐变，并为每个停止使用以下值。
- 停止 1：#C90000，alpha 100
- 停止 2：C94603，alpha 100
- 停止 3. C0A805，alpha 100
- 停止 4：CCAC00，alpha 0
9. 混合回顶部
上一步可能使你的草莓看起来有点斑点。为了使颜色更平滑，再次用径向渐变填充草莓——添加从红色到透明的停止。
10. 添加一些光泽
为了使我们的草莓真正引人注目，添加一些白色径向渐变。确保停止逐渐减少，直到达到 alpha 0。
11. 使光泽更有机
为了使光泽不那么几何，再次用红色渐变覆盖某些区域。这样，你最终将获得更逼真的形状。
12. 为种子创建光泽轮廓
没有草莓是完整的，没有它的种子，而这些种子需要它们自己的光泽。这是辛苦工作开始的地方。使用径向渐变——从红色到白色——来创建一些细长的 O 形。目标是让这些作为种子的光泽轮廓发挥作用。
13. 添加种子
现在是时候添加种子了。创建椭圆形径向渐变，使中心为黄色，并将外边缘变暗，以营造深度感。放置时，确保部分覆盖你在上一步中创建的光泽边缘。为了使它看起来更完美，在一些暴露的种子中添加一些额外的亮点。
14. 填充茎
最后但并非最不重要的一点，用棕绿色渐变填充茎，使其与叶子区分开来。
你还可以使用另一个径向渐变，像我在这里做的那样，为茎的尖端增加一些深度。
15. 添加噪点
草莓几乎完成了，但我建议添加一个噪点叠加来完善外观。添加最后一个填充，然后切换到图案填充选项卡。然后选择一个包含的噪点纹理，将不透明度设置为 8%，并添加一个乘法混合模式。这将使草莓具有更自然的纹理。根据草莓的大小，你可能还需要将类型从填充图像更改为平铺图像，以稍微减小噪点的大小。
16. 添加背景色和阴影
此步骤将取决于你的个人喜好，但我向画板添加了背景色 (#252525)。然后，我将几个阴影应用于具有不同不透明度和模糊的图层，以帮助草莓脱颖而出。
17. 添加反射
你还可以生成另一个阴影层，用作草莓颜色的反射。然后，将阴影和反射与顶部的额外阴影叠加，这些阴影与画板背景相同（在本例中为 #252525）。
瞧！你用 Sketch 只用了一个图层就创造了一个美味的草莓插画。太棒了！👏🏻
如果你喜欢你创作的作品，我们很想看看！在社交媒体上使用#MadeWithSketch 标签与我们分享你的草莓插画。这样，你就可以展示你的作品，激励他人，并与其他同样喜欢使用 Sketch 进行项目的优秀设计师建立联系。
记住，熟能生巧，你越探索和尝试 Sketch，你就会越自信，越擅长创造各种插画和设计。所以，继续努力吧，祝你设计愉快！
David Blum是一位瑞士的资深产品设计师，也是我们的一层设计挑战赛的获胜者。你可以在 Twitter 或 LinkedIn 上找到他。
