技术文章

如果您没有听说过，拟物化又回来了。如果您想尝试一些最新版本的趋势，那么您来对地方了。今天，您将学习如何在 Sketch 中创建玻璃形态设计 - 该设计包含具有磨砂玻璃效果的元素。

这并不是非常复杂，所以它非常适合初学者 - 并且您将在此过程中学到一些有用的技能。让我们开始吧！

什么是玻璃态现象？

玻璃形态是拟物化的一种形式，是一种涉及模仿现实世界物体的设计实践。拟物化超越了形状和颜色，而是关注纹理、光影和尺寸。

玻璃形态设计特别注重在设计中重新创建类似玻璃的纹理——通常会为不同的元素带来透明或半透明的外观和感觉。这些在彩色背景下效果特别好，可以为您的设计添加额外的维度，有助于营造层次感。

现在您知道什么是玻璃形态，让我们了解如何进行玻璃形态设计！

1. 创建一个椭圆形

首先，创建一个 500x500 的画板，然后添加一个 300x300 的椭圆形。使用第三个全局渐变预设为其提供线性渐变 - 这将是测试玻璃形态元素的背景。

2. 创建并定位矩形

接下来，创建一个 300x300 的矩形，并使用圆角样式为其指定半径为 75 的角。将其放在椭圆形前面并稍微偏移，这样您仍然可以看到后面椭圆形的很大一部分。

3.添加线性渐变

给矩形一个线性渐变。定位渐变，使其从矩形的左上角沿对角线向下延伸。然后将左上角点设置为 #FFFFFF，Alpha 为 50，右下角设置为 #FFFFFF，Alpha 为 5。

4.添加背景模糊

现在，让我们向矩形添加背景模糊，值为 20。您应该立即开始在设计中看到玻璃变形效果 - 但我们还没有完成！

5.添加边框渐变

接下来，给你的矩形一个边框渐变。这将有助于增强玻璃边缘出现反射的感觉。沿着与上面使用的渐变相同的角度，在渐变上设置四个等距的点，并将顶部的一个设置为#FFFFFF。中间的两个点将使用 Alpha 值 0，并将左上角的点的 Alpha 值设为 50。对于右下角的点，使用吸管从背景形状中选择颜色，并将 Alpha 值保持在 100。

6.添加一些纹理

它看起来不错，但我们可以通过添加一些噪点让它看起来更像毛玻璃。选择第二个全局选项，将新的图像填充添加到矩形中。选择“平铺图像”显示模式，将尺寸缩小到50%左右，并将不透明度设置为5。然后将“图像”图层的混合模式更改为“叠加”。

7.添加阴影

最后，为矩形添加阴影。将颜色设置为 #000000，Alpha 值为 25，X 值设置为 0，Y 值设置为 1，模糊值设置为 24，扩散设置为 -1。这将为您的形状创造一种深度感，使其感觉更加真实。干得好——你已经完成了！

现在您已经创建了玻璃形态，您可以尝试一些元素，直到您对效果感到满意为止。然后尝试向其中添加图标或针对不同的背景和颜色对其进行优化。