技术文章

希望让您的设计更加真实？也许您熟悉深度工作，甚至是拟物化的狂热爱好者。或者也许您是扁平化设计的铁杆粉丝。我们懂了！扁平化可以是时尚、简单且多功能的。但有时您的设计只需要更多。更真实、更深入、更生活。

以插图为例。看起来像是从屏幕中走出来的设计有一些引人注目的东西。虽然您不必变得超级疯狂和逼真，但添加一点深度确实可以美化您的图标和界面。

在本教程中，约瑟夫将向您展示如何直观地创建深度。我们知道，辨别其他人如何实现这一效果可能很棘手。如果做得好，深度接缝是不明显的。以下面的开关为例。我们的眼睛可以区分平面和现实之间的区别，但很难弄清楚要遵循的步骤。下面，我们将教您如何使用不同的技术来实现这种外观。

我们将向您展示如何使用：

• 简单的样式属性使基本形状看起来像 3D

• 阴影和高光模仿光线照射表面的方式

• 渐变来说明光线的衰减

• 模糊以混合表面

准备好？让我们潜入🪂

1.画出开关容器和旋钮

首先，让我们专注于创建一个稍后可以改进的平面形状。在本例中，我们需要一个带圆角的灰色矩形和一个白色圆圈来创建容器和旋钮。我们将使用 50x30 像素的开关容器和 26x26 像素的旋钮 - 只是为了给您一种比例感。

2.淡化背景

现在我们可以开始考虑现实主义了。让我们考虑一下每一层都是被光源照射的物理表面。这将帮助您找出在哪里添加高光和阴影。在这种情况下，让我们想象光源位于我们设计的正上方。为了帮助您解决此问题，请选择背景并将其从白色变为浅灰色。

3.给switch容器添加渐变

使用这种新的思维方式，让我们将 switch 容器变暗。为了显示容器如何在自身上投射阴影，让我们应用顶部较暗的渐变。

4.为switch容器添加内部阴影

考虑暖色调的光源如何产生冷色调的阴影也很重要。让我们用内阴影添加更多深度。默认颜色非常适合本练习，但请将其减少到 Y 位置 3，并通过将模糊增加到 8 左右来柔化它。

约瑟夫的专业提示：始终牢记光源的质量。如果光源较暖，则结果会是较冷的阴影。

5.给旋钮添加阴影

我们的容器看起来不错！接下来我们重点关注旋钮。由于旋钮伸出来，它应该会投射阴影。让我们继续使用相同的 Y 位置 3 和模糊 8 添加阴影。您还可以通过增加其 Alpha 来使该阴影变暗一点。

6. 将旋钮和阴影遮盖到开关容器中

在处理深度时，我们通常需要结合一些技术来创建所需的效果。在这种情况下，如果我们的目标是让旋钮看起来与背景层更加齐平，则开关容器突出得比我们想要的更远。那么我们如何确保旋钮只将其阴影投射到开关容器中呢？

简单的！让我们通过选择两个图层、按住 Control 键单击并从菜单中选择“蒙版选择”来蒙版旋钮和容器。现在旋钮和阴影将被剪切在容器的路径内。

约瑟夫的专业提示：对使用一些技术来创造深度持开放态度。最好是进行大量细微的改变，而不是试图通过一些更尖锐的步骤来强迫结果。

7. 为旋钮添加渐变

但我们还没有完成旋钮！让我们通过用微妙的渐变替换白色填充来使其更加明显。我们希望表面看起来稍微凸出，因此使顶部比底部更亮。永远记住，光来自上方。

8.软化旋钮边缘

现实世界中的边缘并不像矢量形状那样尖锐。在这种情况下，我们可以通过将旋钮的边缘倒圆并使其在顶部捕捉到一点高光并在底部捕捉到一些阴影来获得一些真实感。

我们可以使用内阴影来创建这种效果。

Joseph 的专业提示：始终考虑真实物体与其 2D 描绘之间的差异。例如，现实生活中的边缘并不像矢量形状的边缘那么锐利。

首先添加白色内阴影并将 Alpha 值增加到 100，因为浅灰色上的白色已经很微妙。为了更容易看到我们正在做的事情，让我们暂时将模糊设置为 0。在这个比例下，即使 Y 位置为 1 也有点太过了，所以我们将其设置为 0.5 之类的值。对结果感到满意后，可以将模糊设置为 1。

接下来，添加黑色内阴影以显示从底部边缘滚落的光线。但让我们将 alpha 调低至 1，这样它看起来就不会太重。该阴影与我们刚刚创建的高光相反，因此将 Y 位置设置为 -0.5，以便它从底部向上看。然后最后将模糊设置为1。

9.复制并缩小旋钮

如果您发现自己眯着眼睛来注意到步骤之间的差异，请不要担心！这是完全正常的。真实深度的关键是微妙，因此需要一段时间才能将它们融合在一起。

通过下一步，您最终将能够看到所有努力的结果。选择旋钮并按下⌘D以复制它。按住⇧⌥并将其大小调整为大约 16x16 像素。最后，禁用阴影。这会导致凸起从旋钮中伸出。

借此机会增加渐变填充的对比度并调高深色内阴影的 Alpha，使其看起来更加明显。

10.垂直翻转挤出物

如果您想知道为什么我们要创建突出而不是凹进……那是因为我们必须翻转它！单击检查器“图层属性”部分下的“垂直翻转”按钮，然后观看奇迹的发生。

11.软化压痕

现在，边缘看起来有点太脆了，完全不符合我们微妙的方法。高斯模糊将有助于解决这个问题。只需将其应用到半径为 1 的整个区域即可。

12.添加轻微的外斜角

作为最后的润色，让我们在容器外部添加一些规则的阴影以勾勒出顶部边缘的轮廓。在顶部添加深色阴影，使表面看起来稍微向内变圆。然后，在底部添加浅色阴影，以突出显示卷回时的边缘。

13.给背景添加渐变

为了帮助我们统一整体外观，请将背景从纯色填充更改为顶部稍浅的渐变。这样，它将与我们隐含的光源的位置保持一致。就这样吧！

正如您所看到的，您可以使用许多技术来创建深度。对于简单的设计，您可能只需要一个。如果您想创建更复杂或更现实的设计，那么叠加技术将帮助您获得最佳结果。