技术文章

好的设计通常涉及平滑的过渡，而混合模式可以帮助您轻松实现这一目标。事实上，使用混合模式可以使您的设计更加动态且视觉上有趣。通过尝试不同的混合模式，您可以创建新的颜色组合和纹理，以增加作品的深度。

今天，我们将引导您了解如何在 Sketch 中使用混合模式，并分享一些有关如何在设计中实现它们的见解。

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 中使用混合模式

您可以将混合模式应用于填充、边框、阴影和内部阴影，并且可以单独调整这些混合模式。例如，您可以将柔光混合应用于填充，将正片叠底混合应用于阴影。您所要做的就是单击检查器中的混合图标并选择您喜欢的混合模式。

每个混合选项都会影响填充、边框或阴影的基色，具体取决于您的选择。但没必要盲目进去！只需将鼠标悬停在混合菜单上的每个项目上，您就可以轻松预览混合模式的外观。

了解混合模式

我们根据混合模式的主要结果将其分为五个部分：较暗、较亮、对比度、颜色和比较。

较暗

“较暗”下的混合模式将帮助您放大设计中的深色。以下是您可以使用的选项的快速浏览：

• 变暗：保持混合层和基础层之间最暗的颜色。

• 正片叠底： 仅保留混合层的较暗颜色，并使浅色不那么不透明。得到的颜色总是较暗，除了纯白色的地方。

• 颜色加深： 使用混合层中的颜色使基础层变暗并增加两者之间的对比度。与白色混合不会产生任何变化。

• Plus Darker：与变暗类似，但对中间色调的影响更大。

较暗的混合模式非常适合处理阴影或深色基础图层。您可以使用它们创建更真实和动态的阴影效果或为图像添加深度和纹理。

打火机

打火机下的混合模式将帮助您放大设计中的浅色。让我们看一下本节中的混合模式。

• 变亮： 保持混合层和基础层之间最浅的颜色。仅当顶层的亮度或亮度低于底层的亮度时，它才会变亮。

• 滤色：仅保留混合层的白色和浅色，并减少黑色或深色的不透明性。换句话说，它会乘以基色和混合颜色的倒数，从而提供更亮的结果（纯黑色除外）。

• 颜色减淡： 使用混合图层中的颜色来减亮基础图层，减少两者之间的对比度。与黑色混合不会产生任何变化。

• Plus Lighter：与Lighten 类似，但对中间色调的影响更大。

较亮的混合模式非常适合创建闪亮效果或增加图像的亮度。

对比

对比度下的混合模式都是为了让基础层和混合层相互发挥作用。以下是您可以在本节中找到的混合模式：

• 叠加：如果基础层较暗，则与“乘法”类似；如果基础层较亮，则与“屏幕”类似。

• 强光：结合乘法和滤色，使用顶层的亮度值进行计算，而叠加则使用基础层。

• 柔光： 与叠加类似，它根据亮度值应用变暗或变亮效果，但更微妙，没有刺耳的对比度。

对比度混合模式非常适合为图像添加深度和活力。例如，您可以将它们与高斯模糊相结合，并使用它们为肖像照片添加柔和的光芒。当然，它们也非常适合添加图像对比度，而无需进行颜色调整设置。

比较

比较下的混合模式基本上反转白色或浅色。以下是本节中混合模式的快速浏览：

• 差异：从基础色中减去混合色，反之亦然，具体取决于哪个更亮。当两个像素相同时，结果将为黑色。

• 排除：与“差异” 的行为方式大致相同 ，但图层之间的对比度较小，因为它不会反转中间色调。

比较混合模式对于创建微妙的分层效果或反转颜色非常有用。如果您热衷于设计的科学方面，您还可以使用它们来测试颜色之间的差异。

颜色

颜色下的混合模式可利用色调、饱和度和亮度，帮助您的设计栩栩如生。以下是本节中混合模式的概述：

• 色调： 使用混合层的色调，同时保留基础层的饱和度和亮度。

• 饱和度：使用混合层的饱和度级别，但保留基础层的色调和亮度。

• 颜色： 使用混合层的色调和饱和度，同时保留基础层的亮度。

• 亮度：使用基础图层的亮度，同时保留基础图层的色调和饱和度，创建Color的反效果。

颜色混合模式非常适合照片编辑。例如，您可以使用它为冷色调照片添加温暖感，或通过降低颜色饱和度来创建复古外观。

使用混合模式的最佳实践

好的，我们已经介绍了所有技术内容。但是我们如何在我们的设计中实际使用这些混合模式呢？这里有一些示例，向您展示如何充分利用每种混合模式类型 - 但请随意尝试其他选项！