如何使用 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