如果您还没听说,拟物化又回来了。如果您想尝试一些最新版本的趋势,您来对地方了。今天,您将学习如何在 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。 这将在您的形状中创造一种深度感,使其感觉更加真实。 干得好——你完成了!
现在您已经创建了您的玻璃拟态形状,您可以尝试其中的一些元素,直到您对效果感到满意。 然后尝试向其中添加图标或针对不同的背景和颜色对其进行优化。
完成之后,为什么不与我们分享呢? 我们总是很乐意看到您使用#MadeWithSketch 在Twitter和Instagram上创作的最新 Sketch 作品。