希望为您的设计增添更多真实感吗？也许您熟悉深度处理，甚至是拟物化的忠实爱好者。或者您是扁平化设计的铁杆粉丝。我们明白了！扁平化可以是时尚、简单和多功能的。但有时您的设计只需要更多。更多真实感、更多深度、更多生命力。
以插图为例。似乎从屏幕中跳出来的设计总是格外引人注目。虽然您不必过于疯狂并达到照片般逼真的程度，但添加一点深度确实可以美化您的图标和界面。
在本教程中，Joseph 将向您展示如何直观地创建深度。我们知道，辨别其他人如何实现这种效果可能很棘手。如果做得好，深度的接缝是难以察觉的。以下面的开关为例。我们的眼睛可以分辨出扁平化和真实感之间的区别，但很难弄清楚要遵循的步骤。下面，我们将教您使用不同的技巧来实现这种外观。
在应用深度效果之前和之后，在 Sketch 中制作的开关。
我们将向您展示如何使用
- 简单的样式属性，使基本形状看起来像 3D
- 阴影和高光，以模仿光线照射表面的方式
- 渐变，以说明光线的衰减
- 模糊，以混合表面
准备好了吗？让我们开始吧 🪂
您可以立即观看 Joseph 的教程，或者按照您自己的节奏使用我们的指南 👇
1. 绘制开关容器和旋钮
首先，让我们专注于创建一个平面形状，我们可以在以后对其进行改进。在这种情况下，我们需要一个带有圆角的灰色矩形和一个白色圆形来创建容器和旋钮。我们将使用一个 50x30 像素的开关容器和一个 26x26 像素的旋钮 - 只是为了给您一个比例感。
2. 降低背景色调
现在我们可以开始考虑真实感了。让我们进入一种心态，即每一层都是一个被光源照射的物理表面。这将帮助您确定在哪里添加高光和阴影。在这种情况下，让我们假设光源就在我们设计的正上方。为了帮助您，请选择背景并将其从白色变为浅灰色。
3. 向开关容器添加渐变
使用这种新的心态，让我们变暗开关容器。为了展示容器如何在自身上投下阴影，让我们应用一个顶部较暗的渐变。
4. 向开关容器添加内阴影
重要的是要考虑具有暖色调的光源如何产生较冷的阴影。让我们添加一些带内阴影的深度。默认颜色适用于此练习，但将其 Y 位置减小到 3，并通过将模糊增加到 8 左右来使其柔化。
5. 向旋钮添加投影
我们的容器看起来不错！让我们接下来关注旋钮。由于旋钮伸出，因此它应该投下阴影。让我们使用相同的 Y 位置 3 和模糊 8 添加一个阴影。您还可以通过增加其 alpha 值来稍微加深此阴影。
6. 将旋钮和阴影遮罩到开关容器中
在处理深度时，我们经常需要结合一些技术来创建所需的效果。在这种情况下，如果我们的目标是使旋钮看起来与背景层齐平，则开关容器的突出程度将超出我们想要的范围。那么，我们如何确保旋钮仅将阴影投射到开关容器中呢？
很简单！让我们通过选择两个图层，按住 Control 键单击，然后从菜单中选择“遮罩选择”来遮罩旋钮和容器。现在，旋钮和阴影将被剪裁到容器的路径中。
7. 向旋钮添加渐变
但是我们还没有完成旋钮！让我们通过用微妙的渐变替换白色填充使其更具体。我们希望表面看起来好像略微向外凸起，因此使顶部比底部亮。始终牢记光线来自上方。
8. 软化旋钮边缘
现实世界中的边缘不像矢量形状的边缘那样尖锐。在这种情况下，我们可以通过圆化旋钮的边缘并使其在顶部捕捉一些高光并在底部捕捉阴影来获得一些真实感。
我们可以使用内阴影来创建此效果。
首先添加白色内阴影，并将 alpha 值增加到 100，因为浅灰色上的白色已经很微妙了。为了更容易看到我们正在做什么，让我们暂时将模糊设置为 0。在此比例下，即使是 1 的 Y 位置也有点过分了，因此让我们将其设置为 0.5 之类的。一旦您对结果感到满意，就可以将模糊设置为 1。
接下来，添加一个黑色的内阴影，以显示从底部边缘滚落的光线。但是，让我们将 alpha 值调低至 1，使其看起来不会太重。这个阴影是我们刚刚创建的高光的反面，因此将 Y 轴位置设置为 -0.5，使其从底部向上探出。最后，将模糊设置为 1。
9. 复制并缩小旋钮
如果您发现自己眯起眼睛才能注意到步骤之间的差异，请不要担心！这完全正常。逼真深度的关键在于微妙，因此需要一段时间才能将所有内容整合在一起。
通过下一步，您最终能够看到所有努力的成果。选择旋钮并按 ⌘D 进行复制。按住 ⇧⌥ 并将其大小调整为大约 16x16 像素。最后，禁用阴影。这应该会产生一个从旋钮伸出的凸起。
利用这个机会增加渐变填充的对比度，并提高深色内阴影的 alpha 值，使其看起来更明显一些。
10. 垂直翻转挤压效果
如果您想知道为什么我们创建的是一个凸起而不是一个凹陷……那是因为我们必须翻转它！点击检查器 **图层属性** 部分下的 **垂直翻转** 按钮，见证奇迹的发生。
11. 柔化凹陷
现在，边缘看起来有点太清晰了，与我们微妙的方法完全不一致。高斯模糊将有助于解决这个问题。只需将其应用于整个对象，半径为 1 即可。
12. 添加轻微的外斜面
对于最后的润色，让我们在容器外部添加一些常规阴影，以勾勒顶部边缘的轮廓。在顶部添加一个深色阴影，使表面看起来略微向内弯曲。然后，在底部添加一个浅色阴影，以突出边缘向外滚出的效果。
13. 为背景添加渐变
为了帮助我们统一整体外观，请将背景从纯色填充更改为顶部稍亮的渐变。这样，它将与我们隐含的光源位置保持一致。就这样！
正如您所见，您可以使用许多技术来创建深度。对于简单的设计，您可能只需要一种。如果您想创建更复杂或逼真的设计，那么堆叠多种技术将帮助您获得最佳效果。
请记住，一切都与微妙有关 —— 而复杂的微妙需要时间！如果您准备好将您的深度游戏提升到一个新的水平，请查看 David Blum 的教程，了解如何创建一个单层草莓。只是要注意：草莓看起来太真实了，可能会让你感到饥饿。
