今年早些时候，我们在 Sketch 中推出了实时协作，以及一个新的主页，以及一个新的产品愿景。作为其中的一部分，我们制作了一个精美的视频（如果你还没有看过，可以在页面底部查看）。在它出现在我们主页的几天和几周后，我们收到了很多可爱的评论，以及很多关于我们如何制作它的问题。
为了完整地讲述这个故事，我们与 Sketch 的一些有才华的同事坐下来讨论制作视频的过程。继续阅读不仅可以了解它如何从一个想法变成了最终的视频，还可以一睹一些留在剪辑室地板Sketch 画布上的设计方向。
构思故事
“我花了一天的时间来想出我们配音脚本的一些早期路线，”负责文案和内容的负责人 Freddie Harrison 说。除了与我们的首席营销官 Carly Marsh 讨论她对电影的想法之外，Freddie 的简报相当开放——“我们知道我们从一张白板开始，对我来说，这非常自由。”
但这不仅给了 Freddie 自由地在我们的品牌风格之外写作。这意味着他可以以他想要的方式讲述我们的故事。“这方面让我灵感大发的许多东西来自于看到我们对设计和设计师的重视程度，”他解释道。“我们会对细节苦思冥想，会进行热烈的辩论，而且我们非常像设计师的设计工具。”
探索一些概念
脚本敲定后，我们的项目设计负责人 Glenn 和 Prekesh 负责。他们很快决定，与其展示任何过于直白的东西，不如通过运动来讲述故事。两人首先为视频的第一部分绘制不同的概念性故事板，试图找到一种他们都满意的风格。
“我使用的想法运用了大量的颜色、渐变和噪点纹理来帮助创造图像，”Prekesh 说。“我的第一个概念包括一个色彩丰富的渐变，它在其他形状发生变化时保持不变。”
Prekesh 和 Glenn 将他们的想法逐帧地画成故事板，以便快速了解动画效果。
Glenn 的一种风格想法是使用灵感来自珐琅别针的有趣插画。最后，虽然我们很喜欢这种风格，但它没有强大的概念来支撑更广泛的活动——我们想要的是一种更独特的视觉语言。
“我还想到了一个很酷的极简概念，”Glenn 解释道。“它是黑白的，用线条和几何形状，重点突出运动。我们俩都很喜欢，但最后还是太简陋了——我们想要更多的颜色。”
两人探索的另一条路线使用了模糊的斑点，它们可以相互作用形成有趣的形状和颜色。“这个感觉很棒——尤其是视频的开头，但我们很快意识到它有局限性，”Prekesh 说。“我们最初试图将它与我第一个概念中的颜色结合起来，但新奇感很快就消失了，我们意识到它不太管用。”
最终，Prekesh 最初的第一个概念影响了两人在最终视频中使用颜色的方式。“我从大的形状开始，然后模糊它们，”他解释道。“然后我将它们的混合模式设置为“差值”，然后对它们进行分组，并将组的混合模式设置为“叠加”。
Prekesh 对它能作为动画效果运作充满信心后，Glenn 开始制作线框图。目标是创建一些可以在整个视频中始终如一地出现的形状，并帮助故事的视觉连贯性。
让我们为颜色兴奋
此时，是时候开始尝试颜色了。“我们想摆脱我们的橙色调。它可能是一种非常显眼的颜色，会分散注意力，”Glenn 解释道。他考虑了 Sketch 是什么，以及人们如何使用它的工具来创建各种各样的事物。他决定拥抱一些变化——但他的第一个选择是……太多了。
最初的故事板在每个场景之间都有颜色变化。最后，事实证明，这在视觉上令人分心，所以 Glenn 将过渡减少到只有几种颜色（哦，还有我们差点用过的字体）。
“在测试了第一组颜色后，它看起来像从一个场景到下一个场景的变化太多了，”他笑着说。“所以我们把它浓缩成几种颜色，利用了 Prekesh 的狂野的渐变混合。”
受一些经典的 Eames 设计的启发，他还融入了米色——他承认这是几个奇怪的选择之一（“谁会将橙色和绿色搭配在一起？！”）——因为它作为渐变形状的背景看起来很棒，并提供了一种世纪中叶的现代美学。
最终的故事板使用了相同的插图，但颜色过渡在几个场景之后会发生微妙的切换。
故事板完成后，Prekesh 开始制作一些简单的动画，作为我们动画设计师 Emma Kingsnorth 的参考。
添加运动——以及情感
Prekesh 开始在 Procreate 中逐帧工作，然后在 After Effects 中添加一些基本的动画，以便让 Emma 清楚地了解不同元素在最终的影片中如何移动和变形。“我在此过程中的目标是找出所有的过渡，这样我们就可以使用这些极简的元素来讲述一个连贯的故事，”他解释道。
从那里，Emma 接手，开始将这些参考与故事板中的形状和颜色结合起来。“首先，我使用一系列形状图层来生成不断移动的白色线条，这些线条形成了形状，”Emma 说。“然后我添加了蒙版，以创建这些形状后面的颜色渐变的无缝流动。”
我们追求的外观非常难以创建，因为它使用了复杂的渐变。最后，Emma 从一系列不同的颜色模式、图层和预合成中构建了它们，以创建渐变。“这意味着我可以根据需要移动组成每个渐变的不同部分，放大或缩小它们，并改变它们的顏色，”她解释说。“在某些地方，我们必须使用一些相当复杂的蒙版来蒙版渐变并从一个形状变形到另一个形状。”
在她构建好渐变后，Emma 在上面添加了噪点图层，以赋予纹理和运动。
随着 Emma 的工作，她将 Freddie 早期的想法变成了现实。“在每个‘片段’中，都有一条关于旅程的微妙主题，”Freddie 解释道。“这一切都是关于向前发展和表明变化，这是我们希望人们理解我们作为产品的现状。”
伟大开端的开始
除了视频，团队还制作了大量其他材料——包括社交资源以及一个重新设计的首页。“最初的计划是让这“仅仅”成为一场活动。但我们很快意识到我们做出了非凡的东西，”我们的设计总监 Marcelo Marfil 说。“最后，大胆的设计语言效果非常好，我们决定更进一步——现在我们正在围绕它打造一个全新的品牌。”
回想起几个月来为制作这段视频以及更广泛的重新发布所付出的努力，他意识到这是一项多么巨大的任务。“我可以说这绝对是我们发布过的最具挑战性的活动——团队的努力是巨大的。”
然而，除了最终的视频之外，这个故事代表了更多意义。它表明了我们今天作为设计平台以及公司的定位。最后一句，“一切从 Sketch 开始”，说明了这对我们来说是一个新旅程的开始。但这同时也代表了人们如何使用我们的工具。“虽然我们最常关注 UI 设计用例，但许多不可思议的项目都是使用 Sketch 完成的，”Freddie 说。“因此，我们觉得很重要，要让一切保持开放和充满可能性。”
