人工智慧（AI）正在成為我們日常生活的重要組成部分，從Netflix推薦到聊天機器人，從面部檢測到文字編輯器，這已經不是什麼祕密。今天，人工智慧的影響不僅體現在螢幕上，而且可以感受到。現在看到人工智慧湧入的一個領域是數字設計和藝術。關於參與這一媒介的力量和人–或缺乏人–的對話正在興起。是否有可能在支援藝術家的同時，利用人工智慧創造出驚人的藝術作品？人工智慧可以作為一種工具，幫助促進更好的數字創作嗎？我們願意這樣想，所以我們將探索使用ChatGPT和MidJourney與Divi。
在本教學中，我們將使用兩個人工智慧工具–MidJourney和ChatGPT-來協作Divi頁面構建器製作頁面設計。我們將使用MidJourney機器人來建立我們設計的視覺方面。然後我們將使用ChatGPT來建立我們將在測試中使用的文案。最後，我們將在Divi中使用MidJourney的設計和ChatGPT的文案，重新進行設計。
使用MidJourney來激發驚人的網頁設計
MidJourney，根據他們的網站，”是一個獨立的研究實驗室，探索新的思想媒介，擴大人類的想象力。” MidJourney Discord機器人允許你使用你的Discord賬戶，從簡單的文字提示中建立四個定製的AI生成的影象。然後你可以使用其他命令來修改並與建立的影象互動。
建立一個MidJourney賬戶
在我們開始使用AI之前，你需要在MidJourney Discord伺服器上建立一個賬戶。
如果你已經有一個 Discord 賬戶, 你可以登陸你現有的賬戶並馬上開始使用 MidJourney.
進入MidJourney Discord
一旦進入MidJourney Discord, 快速閱讀一下快速入門指南。這將幫助你熟悉伺服器的準則。你還可以深入瞭解機器人是如何工作的，以及一旦你能熟練使用機器人，你可以做的其他酷事。
MidJourney相關教學：
- 如何註冊和使用Midjourney？
- 如何使用Midjourney進行Logo設計
- ChatGPT和Midjourney是人工智慧網頁設計的趨勢嗎？
- 如何使用MidJourney來建立建築概念效果圖
- Midjourney藝術創作提示詞、關鍵詞及指令綜合使用教學
記住，MidJourney的免費版本允許你做25次查詢。一旦你進入MidJourney Discord伺服器，你要尋找加入一個新手頻道。你可以通過檢視左側的選單看到伺服器上的可用頻道。
點選任何一個新手頻道就可以開始生成圖片。
開始用MidJourney創作
現在你在MidJourney的新手頻道中，真正的樂趣開始了……創造一些影象!
釋出初始指令
我們想產生一些靈感來建立一個乾淨的主頁設計。要釋出你的第一個命令，點選螢幕右下方的文字框。你可以根據自己的意願，描述或簡明扼要。在我們的案例中，我們輸入：”create a clean, modern and material design homepage template. Included the CN tower. Use the colors white, grey, gray, and gold.”。
這就是該命令所產生的內容。
這是它在Discord之外的樣子。
完善初始命令
雖然這些佈局是一個很好的跳板，讓我們看看當我們試圖完善人工智慧生成的網頁設計佈局時會發生什麼。要做到這一點，我們要細化我們列表中的第四個選項。
重做人工智慧生成的設計
一旦你建立了你的第一個設計，MidJourney允許你從你的四個選項中的一個升級(做大)或創造變化。我們決定，我們希望看到第四個選項的一些變化，並使其更大。
這些是MidJourney對我們的第四個設計進行變化的結果。
讓我們仔細看一下。
注意到選單、圖示、標題和社交媒體圖示等元素的增加。從這個佈局來看，我們要使用第四種方案。這就是我們要在Divi中模仿的設計。
使用ChatGPT建立AI生成的網頁設計文案
現在，我們的設計已經完成，我們將使用AI來建立文案，以進入我們的設計。我們將使用ChatGPT來建立一個標題、一個簡短的段落和一個用於按鈕的行動呼籲。
建立一個ChatGPT賬戶
首先，我們要在ChatGPT建立一個賬戶。如果您已經有一個賬戶，您可以登入。
為了節省時間，你也可以使用你的Gmail或Outlook賬戶。
釋出初始指令
一旦你登入了，你會看到這個螢幕。這是夜間模式的版本，但也有一個明亮模式的版本。
讓我們從建立我們的第一個請求開始。在文字框中，我們將要求ChatGPT： “create a short slogan for a Toronto-based web design firm.“。
這就是這個請求的結果。
用ChatGPT完善文案
ChatGPT的魅力在於我們可以問很多問題，並得到一些很好的選擇來用於我們的文案。讓我們問5個其他的變化，但讓我們要求每個變化最多隻有5個字。在文字框中輸入：”Make the slogan only 5 words. Create 10 different variations.”
這些是ChatGPT為我們的口號想出的變化。
讓我們使用選項5作為我們的口號。我們要為我們的一段文字重複這個過程。讓我們在ChatGPT中輸入：”Craft a 5-sentence paragraph promoting web design services to Toronto business owners.“。
這就是建立的結果。這是很好的!
與其要求更多版本的這段話，不如要求ChatGPT改變歡迎段的語氣。讓我們要求ChatGPT： “Make this paragraph more casual, leaning toward light and fluffy.“。
請注意，這段話的語氣已經變得更加隨意，而且仍然符合人們在介紹他們的網頁設計公司時的需要。
為了完成我們的文案，讓我們建立10個不同版本的CTA文字，我們可以在我們的按鈕上使用。我們對ChatGTP的下一個命令是：”Come up with 5 versions of call to action text that I can use on a button.”
雖然這些選項很好，但對於一個按鈕來說，它們有點長。
作為我們對ChatGPT的最後要求，讓我們要求它使我們的文字更短，說：”make them shorter”。
We will use the last option Launch Now as the CTA for our button.
我們將使用最後一個選項 “Launch Now” 作為我們按鈕的CTA。
ChatGPT相關教學：
在Divi中結合使用ChatGPT和MidJourney
現在，我們既有設計靈感，又有在這個設計中使用的內容。我們可以把這些發現帶到Divi中，並開始建立一個真實可行的主頁佈局。讓我們開始在Divi中使用ChatGPT和MidJourney。
在WordPress中建立一個新的頁面
讓我們從在WordPress中建立一個新的頁面開始。在WordPress儀表板上，我們將滑鼠移到左側選單的頁面上。然後，我們點選新建頁面。這將建立一個全新的頁面。
當你的新頁面被建立後，新增一個標題。然後，點選藍色的 “釋出” 按鈕，釋出該頁面。最後，點選紫色的 “Use Divi Builder” 按鈕，啟用Divi Builder。
啟用Divi Builder後，點選藍色的 “Start Building” 按鈕。我們將從頭開始建立我們的頁面，但使用MidJourney生成的佈局中的資產。
建立節和行
一旦視覺構建器載入完畢，我們現在會看到幾個列的結構，我們可以將其新增到我們的預設行和節中。我們將刪除這個部分，並使用一個特殊部分的佈局來代替。首先，我們點選X按鈕，退出行選擇選單。
然後，我們點選該部分底部的藍色按鈕。這將使我們能夠新增一個新的部分。我們要點選Speciality部分的圖示。這將允許我們新增一個類似於MidJourney生成的佈局的部分。
從Specialty部分的選項中，我們點選第二個選項。
選擇了我們的章節後，我們現在可以選擇開始向我們的章節新增行。當我們參考MidJoureny生成的佈局時，我們看到有一行包含標題、段落和行動呼籲按鈕。然後，我們注意到，有一組裝飾性的列。因此，讓我們新增一個單列布局，它將容納我們的文案。
接下來，我們將通過點選綠色加號圖示，在這下面再新增一行。我們將在最初的單欄行下面新增一個雙欄行。這將作為我們的裝飾列。
隨著我們的專業欄目佈局的完成，我們現在可以從我們的頁面中刪除預設欄目。點選該部分選單中的垃圾桶圖示，就可以將其刪除。
新增Divi模組
這就是我們在Divi中的基本佈局的樣子。
我們現在要將Divi的本地模組新增到佈局中，以建立我們的主頁。這將充當一個低調的線框。
新增圖片模組
首先，讓我們在我們的欄目的第一欄中新增一個圖片模組。點選該欄內的灰色加號圖示。然後，選擇影象模組圖示。
點選綠色複選標記，將影象模組儲存在原位。
插入文字模組
接下來，我們要移到我們這一部分的第二列。在第一行，我們將新增兩個文字模組。第一個模組將放置標題，第二個模組將放置我們的段落文案。這兩個模組都是在ChatGPT中生成的。點選第一行內的灰色加號圖示。然後，選擇文字模組。這將是我們的文字模組，容納我們的標題。
我們現在要新增我們的標題內容。然而，我們要把它的格式化，使其看起來像我們的MidJourney設計。要做到這一點，要把文字分開，並使用h3標籤來突出我們標題中的一個關鍵詞。這是一個重要的步驟，因為我們將對文字的這一部分應用單獨的風格設計。點選綠色複選標記，儲存我們的內容。
現在，我們要為我們的段落內容新增第二個文字模組。再次點選灰色加號圖示，並選擇文字模組圖示。
然而，這一次，新增ChatGPT中的段落文案，並點選綠色複選標記，儲存我們的內容。為了完成這一行，我們可以新增最後一個模組，也就是一個按鈕模組。
新增按鈕模組
我們要在這一行新增一個按鈕模組。要做到這一點，我們點選灰色的加號圖示並選擇按鈕模組。
將ChatGPT的文字新增到按鈕的文字中，然後點選綠色複選標記，儲存我們的內容。
插入社交媒體關注模組
如果你仔細觀察我們的人工智慧生成的設計，你會看到影象下方的一些圖示。我們將使用社交媒體關注模組，在我們的影象模組下新增一些社交媒體圖示。
新增了我們的社會媒體關注模組後，讓我們在這個模組中新增一些社會媒體網路。我已經新增了5個來模仿我們的AI生成的影象。
點選綠色複選標記，儲存你的社交網路。現在，我們所有的模組都到位了，我們可以開始為我們的主頁佈局做造型了
實施視覺品牌和設計元素
對於我們教學的下一節，我們需要一些外部工具來幫助我們利用MidJourney生成的資產。雖然我們在Divi中使用ChatGPT和MidJourney，但這些並不是我們要使用的唯一軟體。你將需要一個工具，讓你從AI生成的影象中選擇十六進位制程式碼。你還將需要一個影象編輯器，從影象中裁剪出照片，用於我們的設計。我們還將使用谷歌字型來複制由MidJjourney建立的字型。
我用來做這件事的工具是：
- ColorZilla：一個吸色Chrome擴充套件程式，允許你從網頁上選擇和儲存十六進位制程式碼。
- Photoshop：用於裁剪和進行照片編輯。你也可以用Photoshop從你的MidJourney圖片中選擇十六進位制程式碼。
最終, 使用任何你可以使用的工具。
上傳你的圖片
開啟你選擇的影象編輯器, 並從原始MidJourney影象中裁剪出焦點影象。
儲存影象到你的硬碟中。然後在Divi中，編輯影象模組。
點選齒輪圖示，開啟媒體庫。這是你要上傳圖片的地方。
從你的硬碟上傳你的圖片，並把它插入到模組中。
圖片上傳後，我們現在可以移動到圖片模組的設計標籤。在 “設計” 選項卡上，點選 “尺寸” 選項卡。在那裡，選擇 “Force FullWidth” 切換鍵旁邊的 “Yes“。
接下來，讓我們來設計我們的社交媒體圖示。
社會媒體模組樣式設定
首先，我們點選社會媒體圖示模組的齒輪圖示。
一旦我們有了所有的社交媒體連結，我們將進入每一個連結並刪除背景。要做到這一點，點選每個網路旁邊的齒輪圖示。
然後，點選 “Backgroun” 選項卡，刪除存在的背景顏色。點選綠色複選標記，然後對你新增到這個模組的所有社交媒體網路重複這一步驟。
刪除每個社交媒體網路的背景後，點選 “設計 “選項卡。將圖示的對齊方式設定為右側，與MidJourney圖片中的情況完全一致。
現在，讓我們為我們的圖示新增一些顏色。點選圖示選項卡，將圖示顏色設定為#000000。
最後，我們點選Spacing標籤，為我們的模組右側新增一些填充物。新增右邊的padding值為25px。然後，點選綠色複選標記，儲存我們的編輯。
為文字設定排版樣式
在這個時候，我們已經為我們的模組設計了左邊的樣式。現在我們將轉到右側，從我們的標題文字模組開始。點選齒輪圖示，我們就可以進入文字模組的設定。
我們直接導航到 “Design” 選項卡。接下來，點選Text選項卡。我們可以稍微看出來，標題文字是全大寫的。因此，讓我們將文字字型樣式設定為全大寫。
然後，我們將對齊方式設定為居中，將文字顏色設定為深色。
我們用H3標籤來吸引人們對我們標題中的中間詞的注意。所以，我們現在點選Heading Text標籤。然後，我們點選H3標題，開始對其進行樣式設定。讓我們把標題的字型設定為Cantarell。
接下來，讓我們把字型大小增加到63px。最後，我們將字母間距設定為-5px。然後，我們可以點選綠色複選標記來儲存我們的文字更改。
對於段落，預設的Divi設定與MidJourney建立的類似。因此，我們將簡單地改變文字的對齊方式。通過點選齒輪圖示進入文字設定。
然後，選擇 “Design” 選項卡。最後, 在Text選項卡中, 將對齊方式設定為中心。點選綠色複選標記，儲存您的更改。
定製按鈕
對於我們的按鈕模組，我們將使用我們的顏色選擇器工具，從MidJourney中找到按鈕的顏色。我在Photoshop中使用了取色器，發現背景色的十六進位制程式碼是#c1aa85。
有了這些資訊，我們就可以進入Divi，開始設計我們的按鈕。像往常一樣，點選齒輪圖示，進入模組的設定。
然後，點選 “Design” 標籤，再點選 “Button” 標籤。對於 “Use Custom Styles for Button” 選項，選擇YES。
這些是我們將用來為我們的按鈕設計風格的設定。
按鈕設計設定:
- 按鈕文字大小: 14px
- 按鈕文字顏色: #ffffff
- 按鈕背景顏色: #c1aa85
- 按鈕邊框寬度: 0px
- 按鈕邊框半徑: 15px
- 按鈕字型樣式: All Caps
- 間距: 頂部和底部填充10px；左邊和右邊的填充35px
這就是我們的按鈕模組在使用MidJourney來激發我們使用Divi的工具進行設計後現在的樣子。
建立裝飾欄目
我們佈局的最後一塊設計是在我們的文案下面的裝飾列。為了建立這些，我們將需要在每一列中設定一個Divider模組。首先，點選灰色的加號圖示，選擇 “Divider“圖示。
在Divider模組的Content選項卡中，取消選擇Visibility下的Show Divider選項。
接下來，移動到 “Design” 選項卡。在那裡，點選 “Spacing” 標籤。將左邊和右邊的填充設定為100%。雖然看起來這個模組沒有什麼變化，但當我們給我們的部分、行和列新增顏色和填充物時，一切都會顯現出來。點選綠色複選標記，儲存你的修改。
複製Divider模組，並將其移至旁邊的列中。
新增背景、間距和填充
現在我們所有的模組都已經設計好了，我們可以為我們的主頁佈局做最後的修飾。作為參考，這是我們所處的位置。
與MidJourney為我們建立的設計相差甚遠。不過，只要稍加調整顏色和間距，我們就能成功地將ChatGPT和MidJourney與Divi結合起來使用。
首先，讓我們點選我們的Specialty部分的齒輪圖示。
接下來，點選Background標籤。使用顏色選擇器，將Section的背景顏色設定為#e7e6e4。
Now, let’s move to the Design tab. From here, click on the Sizing tab. Here are the settings that you’ll need in the Sizing tab.
現在，讓我們移到 “Design” 選項卡。在這裡，點選 “Sizing” 標籤。以下是你在 “Sizing” 選項卡中需要的設定。
大小設計設定:
- Equalize Column Heights: Yes
- Use Custom Gutter Width: Yes
- Gutter Width: 1
- Width: 100%
- Inner Width: 100%
- Inner Width Max: 100%
Now, we move to the Spacing tab. We want all the padding and module within the section to be set to zero. Here are the settings that we’ll be using there.
現在，我們移到Spacing標籤。我們希望該部分的所有填充和模組都被設定為零。以下是我們將在那裡使用的設定：
間距設計設定:
- Margin: Top and Bottom設為0px；Left and Right設為0px
- Padding: Top and Bottom設為0px；Left and Right設為0px
- Column 1 Padding: Top and Bottom:設為0px；Left and Right設為0px
- Column 2 Padding: Top and Bottom設為0px；Left and Right設為0px
一旦這些設定到位，記得點選綠色複選標記來儲存它們。有了這些設定，我們已經可以看到我們在Divi中的設計與MidJourney生成的設計的間距非常相似。
第二個欄目的間距、背景和填充
我們現在進入我們的第二欄。我們開始編輯這一欄的第一行，點選該行的齒輪圖示。
在這一行中，點選 “Design” 標籤。接下來，我們移動到 “Spacing” 選項卡。將頂部、底部、左側和右側的填充設定為50px。我們通過儲存我們的工作來結束這一部分。
我們移動到最後一行，再次點選齒輪圖示進入行的設定。
對於作為該行一部分的兩列，我們將在第一列和第二列中分別使用背景色#b0b2b1和#bfb192。點選每一列旁邊的齒輪圖示。
然後，將背景色設定為每一列各自的顏色。
隨著兩列樣式的設定完成，注意到我們越來越接近於我們的最終產品。為了將這一切結合起來，我們需要為這些裝飾性的列所在的行新增一些最後的間距編輯。要開始，點選該行的Design標籤。然後，將Custom Gutter Width設定為 “YES“。將gutter的寬度設為1。同時，啟用 “Equalize Column Height” 選項。
接下來，移動到Spacing選項卡，將邊距和填充設定為0。
就這樣，我們已經成功地使用ChatGPT和MidJourney在Divi中建立了一個主頁佈局。這是我們的成品!
小結
將ChatGPT和MidJourney與Divi一起使用可以幫助你更快地集思廣益，為你的網頁設計提供靈感。在網頁設計中使用人工智慧並不一定意味著我們所知的數字設計的結束。有可能讓人工智慧進入你的工作流程，以幫助加快程序。人工智慧還可以幫助把可能沒有被強調的條款或概念的東西帶到最前面。使用Divi，很容易重新建立人工智慧生成的佈局和設計。如果你不是一個天生的作家，為你的企業或客戶的網站建立文案可能是困難的。像ChatGPT這樣的工具可以幫助你覆蓋一個你可能沒有意識到的盲點。考慮在你的下一個專案中使用ChatGPT和MidJourney with Divi。
你已經開始在你的網頁設計業務中使用人工智慧了嗎？你會考慮在你的設計過程中使用ChatGPT或MidJourney這樣的工具嗎？請在下面的評論區告訴我們你的想法。讓我們開始討論吧!
評論留言