如何使用 Divi 的设计选项创建和使用纹理背景

在今天的 Divi 教程中，我们将向您展示如何创建简单的纹理背景并将它们用作您的部分的背景，使您的网站看起来更真实一点。 如果您查看我们最近的免费学习管理布局，您会发现我们还在所有页面中使用了带纹理的背景。

现在，我们将首先向您展示我们将使用 Photoshop 重新创建的两种类型的纹理； 用形状制作的纹理和用画笔制作的纹理。 一旦你知道如何去做，你就可以随心所欲地创造出真实的纹理背景。 之后，我们将向您展示如何通过结合纹理背景和 Divi 的设计选项来创建令人惊叹的结果。

用形状制作的图像结果

我们将向您展示如何使用 Photoshop 创建的第一张图像如下所示：

Divi 设计选项的结果

一旦集成到 Divi 中，您可以获得如下惊人的结果：

用画笔制作的图像结果

我们将制作的第二张图片如下所示：

Divi 设计选项的结果

并在您的网站上使用它时可以提供以下漂亮的结果：

如何使用 Divi 的设计选项创建和使用纹理背景

订阅我们的 YouTube 频道

使用 Photoshop 创建纹理背景

用形状制作

我们将向您展示如何重新创建的第一个带纹理的背景，其上主要有使用多边形套索工具和橡皮擦工具创建的形状。 我们将逐步指导您如何创建以下结果：

新文件

打开 Photoshop 并开始添加一个新文件。 此文件需要 1920 像素的宽度和 847 像素的高度。

添加背景颜色

然后，为您刚刚创建的文件添加背景颜色。 确保在整个过程中使用略深的灰色。 使用稍微深一点的颜色很重要，因为它会在稍后添加 Divi 设计选项时为您提供帮助。 在此示例中，我们使用“#626262”作为背景颜色，并使用油漆桶工具将颜色添加到图层。

添加第 2 层

继续在第一层正上方添加一个新层。

将第一个形状添加到第 2 层

然后，选择多边形套索工具并在选择第 2 层的同时开始制作形状。

完成后，选择油漆桶工具并使用“#747474”为所选部分着色。

添加第 3 层

然后，在图层 2 正上方添加另一个图层。

添加第二个形状图层 3

继续使用多边形套索工具制作另一种形状，如下面的打印屏幕中的形状。

这次选择油漆桶工具并使用“#6a6a6a”。

到目前为止，您的图像应该是这样的：

在第 3 层上使用橡皮擦工具

继续，在选择第 3 层的同时选择橡皮擦工具。

使用橡皮擦工具以及具有 0% 硬度和 338px 大小的画笔。

然后，继续并擦除您想要消失的区域。 我们特意只留下了第 3 层的一小部分，您可以在其中看到第 2 层和第 3 层之间的过渡。

在另一侧复制、变换、旋转和放置图层

现在我们已经创建了左侧，另一侧会走得更快。 我们希望它完全相同，这就是为什么我们要同时选择第 2 层和第 3 层。然后，我们将复制这些层。

复制后，您会看到它们出现在您的图层列表中。

选中两个复制图层后，转到“编辑”>“变换”>“旋转 180°”并将图层拖动到图像的另一侧。

保存为 Web

剩下要做的就是保存图像。 为此，请单击“文件”>“导出”>“另存为 Web” 。

最后，确保文件是 JPG 或 PNG 文件并保存。

用刷子制作

接下来，我们将向您展示如何使用画笔创建带纹理的背景。 在这种情况下，我们将向您展示如何重新创建带纹理的背景，如下所示：

新文件

再次开始使用 1920 像素的宽度和 847 像素的高度创建一个新文档。

添加背景颜色

完成后，使用“#8f8f8f”颜色代码为第一层添加背景。

在线搜索配套画笔

下一步是找到与您的英雄部分风格相匹配的画笔。 那里有很多免费的 Photoshop 画笔，它们令人惊叹，而且也是免费的。 您可以转到以下页面找到并下载我们将在本教程中使用的那个。

上传画笔

在您的计算机上找到 ABR 文件并转到 Photoshop 以加载画笔。 选择“编辑”>“预设”>“预设管理器”>“画笔”>“加载”，然后选择您保存在计算机上的 ABR 文件。

添加第 2 层

完成后，在图层 1 正上方添加另一个图层。

使用颜色最浅的画笔

然后，您可以开始使用画笔通过选择画笔工具来创建您想要的纹理背景。

选择大小为 600px 的画笔，并使用 60% 的不透明度。

'

我们将使用的第一种颜色是“#a0a0a0”。 继续在图像上制作第一个画笔层。

使用颜色较深的相同画笔

然后，用'#ababab' 替换之前的颜色并做同样的事情。

使用最深颜色的相同画笔

最后，您需要使用“#686868”颜色来完成带纹理的背景。

保存为 Web

现在您的纹理背景已完成，唯一要做的就是保存图像。 为此，请选择“文件”>“导出”>“另存为 Web” 。

再次选择要将图像保存为 JPG 或 PNG 文件。

将纹理背景添加到部分

用形状制作的带纹理的背景

创建图像后，您可以使用 Divi 的背景设置来获得所需的确切结果。 对于用形状制作的带纹理的背景，我们将选择径向渐变类型，使一种渐变颜色位于中间，另一种与我们的背景图像相协调。

渐变背景

为您的部分使用以下渐变背景：

• 第一种颜色：#474ab6
• 第二种颜色：#9271f6
• 渐变类型：径向
• 径向：中心
• 起始位置：41%
• 结束位置：100%

图像混合选项

然后，上传图像并使用以下设置：

• 背景图片尺寸：封面
• 背景图片位置：中心
• 背景图像重复：不重复
• 背景图像混合：叠加

用画笔制作的带纹理的背景

我们将用于用画笔制作的纹理背景的渐变背景是线性的。 我们将做一个微妙的过渡，它仍然会稍微分离与背景图像和谐使用的颜色。

渐变背景

打开部分设置并为背景子类别使用以下设置：

• 第一种颜色：#474ab6
• 第二种颜色：#9271f6
• 渐变类型：线性
• 梯度方向：270度
• 起始位置：70%
• 结束位置：100%

图像混合选项

然后，上传背景图片并使用以下设置：

• 背景图片位置：中心
• 背景图像重复：不重复
• 背景图像混合：叠加

结果

现在我们已经完成了所有步骤，让我们再次看一下最终结果。

用形状制作的图像结果

Divi 设计选项的结果

用画笔制作的图像结果

Divi 设计选项的结果

最后的想法

在这篇文章中，我们向您展示了如何使用带纹理的背景让您的网站感觉更真实。 我们已经向您展示了如何使用 Photoshop 创建两种类型的纹理，并通过向您展示如何在您的部分以及 Divi 的设计选项中使用它们来跟进。 如果您有任何问题或建议； 确保您在下面的评论部分发表评论！

请务必订阅我们的电子邮件通讯和 YouTube 频道，这样您就不会错过重大公告、有用提示或 Divi 免费赠品！

精选图片来自 WEB-DESIGN/shutterstock.com