如何使用ChatGPTMidJourney和Divi做网页设计

在我们开始使用AI之前,你需要在MidJourneyDiscord服务器上创建一个账户。

如果你已经有一个Discord账户,你可以登陆你现有的账户并马上开始使用MidJourney.

记住,MidJourney的免费版本允许你做25次查询。一旦你进入MidJourneyDiscord服务器,你要寻找加入一个新手频道。你可以通过查看左侧的菜单看到服务器上的可用频道。

点击任何一个新手频道就可以开始生成图片。

这就是该命令所产生的内容。

这是它在Discord之外的样子。

虽然这些布局是一个很好的跳板,让我们看看当我们试图完善人工智能生成的网页设计布局时会发生什么。要做到这一点,我们要细化我们列表中的第四个选项。

一旦你创建了你的第一个设计,MidJourney允许你从你的四个选项中的一个升级(做大)或创造变化。我们决定,我们希望看到第四个选项的一些变化,并使其更大。

这些是MidJourney对我们的第四个设计进行变化的结果。

让我们仔细看一下。

注意到菜单、图标、标题和社交媒体图标等元素的增加。从这个布局来看,我们要使用第四种方案。这就是我们要在Divi中模仿的设计。

现在,我们的设计已经完成,我们将使用AI来创建文案,以进入我们的设计。我们将使用ChatGPT来创建一个标题、一个简短的段落和一个用于按钮的行动呼吁。

这就是这个请求的结果。

这些是ChatGPT为我们的口号想出的变化。

这就是创建的结果。这是很好的!

请注意,这段话的语气已经变得更加随意,而且仍然符合人们在介绍他们的网页设计公司时的需要。

虽然这些选项很好,但对于一个按钮来说,它们有点长。

WewillusethelastoptionLaunchNowastheCTAforourbutton.

现在,我们既有设计灵感,又有在这个设计中使用的内容。我们可以把这些发现带到Divi中,并开始建立一个真实可行的主页布局。让我们开始在Divi中使用ChatGPT和MidJourney。

让我们从在WordPress中创建一个新的页面开始。在WordPress仪表板上,我们将鼠标移到左侧菜单的页面上。然后,我们点击新建页面。这将创建一个全新的页面。

一旦视觉构建器加载完毕,我们现在会看到几个列的结构,我们可以将其添加到我们的默认行和节中。我们将删除这个部分,并使用一个特殊部分的布局来代替。首先,我们点击X按钮,退出行选择菜单。

然后,我们点击该部分底部的蓝色按钮。这将使我们能够添加一个新的部分。我们要点击Speciality部分的图标。这将允许我们添加一个类似于MidJourney生成的布局的部分。

从Specialty部分的选项中,我们点击第二个选项。

选择了我们的章节后,我们现在可以选择开始向我们的章节添加行。当我们参考MidJoureny生成的布局时,我们看到有一行包含标题、段落和行动呼吁按钮。然后,我们注意到,有一组装饰性的列。因此,让我们添加一个单列布局,它将容纳我们的文案。

接下来,我们将通过点击绿色加号图标,在这下面再添加一行。我们将在最初的单栏行下面添加一个双栏行。这将作为我们的装饰列。

随着我们的专业栏目布局的完成,我们现在可以从我们的页面中删除默认栏目。点击该部分菜单中的垃圾桶图标,就可以将其删除。

这就是我们在Divi中的基本布局的样子。

我们现在要将Divi的本地模块添加到布局中,以创建我们的主页。这将充当一个低调的线框。

添加图片模块

首先,让我们在我们的栏目的第一栏中添加一个图片模块。点击该栏内的灰色加号图标。然后,选择图像模块图标。

点击绿色复选标记,将图像模块保存在原位。

插入文本模块

接下来,我们要移到我们这一部分的第二列。在第一行,我们将添加两个文本模块。第一个模块将放置标题,第二个模块将放置我们的段落文案。这两个模块都是在ChatGPT中生成的。点击第一行内的灰色加号图标。然后,选择文本模块。这将是我们的文本模块,容纳我们的标题。

我们现在要添加我们的标题内容。然而,我们要把它的格式化,使其看起来像我们的MidJourney设计。要做到这一点,要把文本分开,并使用h3标签来突出我们标题中的一个关键词。这是一个重要的步骤,因为我们将对文本的这一部分应用单独的风格设计。点击绿色复选标记,保存我们的内容。

现在,我们要为我们的段落内容添加第二个文本模块。再次点击灰色加号图标,并选择文本模块图标。

然而,这一次,添加ChatGPT中的段落文案,并点击绿色复选标记,保存我们的内容。为了完成这一行,我们可以添加最后一个模块,也就是一个按钮模块。

添加按钮模块

我们要在这一行添加一个按钮模块。要做到这一点,我们点击灰色的加号图标并选择按钮模块。

将ChatGPT的文本添加到按钮的文本中,然后点击绿色复选标记,保存我们的内容。

点击绿色复选标记,保存你的社交网络。现在,我们所有的模块都到位了,我们可以开始为我们的主页布局做造型了

对于我们教程的下一节,我们需要一些外部工具来帮助我们利用MidJourney生成的资产。虽然我们在Divi中使用ChatGPT和MidJourney,但这些并不是我们要使用的唯一软件。你将需要一个工具,让你从AI生成的图像中选择十六进制代码。你还将需要一个图像编辑器,从图像中裁剪出照片,用于我们的设计。我们还将使用谷歌字体来复制由MidJjourney创建的字体。

我用来做这件事的工具是:

最终,使用任何你可以使用的工具。

上传你的图片

打开你选择的图像编辑器,并从原始MidJourney图像中裁剪出焦点图像。

保存图像到你的硬盘中。然后在Divi中,编辑图像模块。

点击齿轮图标,打开媒体库。这是你要上传图片的地方。

从你的硬盘上传你的图片,并把它插入到模块中。

接下来,让我们来设计我们的社交媒体图标。

社会媒体模块样式设置

首先,我们点击社会媒体图标模块的齿轮图标。

一旦我们有了所有的社交媒体链接,我们将进入每一个链接并删除背景。要做到这一点,点击每个网络旁边的齿轮图标。

现在,让我们为我们的图标添加一些颜色。点击图标选项卡,将图标颜色设置为#000000。

最后,我们点击Spacing标签,为我们的模块右侧添加一些填充物。添加右边的padding值为25px。然后,点击绿色复选标记,保存我们的编辑。

为文本设置排版样式

在这个时候,我们已经为我们的模块设计了左边的样式。现在我们将转到右侧,从我们的标题文字模块开始。点击齿轮图标,我们就可以进入文本模块的设置。

然后,我们将对齐方式设置为居中,将文本颜色设置为深色。

我们用H3标签来吸引人们对我们标题中的中间词的注意。所以,我们现在点击HeadingText标签。然后,我们点击H3标题,开始对其进行样式设置。让我们把标题的字体设置为Cantarell。

接下来,让我们把字体大小增加到63px。最后,我们将字母间距设置为-5px。然后,我们可以点击绿色复选标记来保存我们的文本更改。

对于段落,默认的Divi设置与MidJourney创建的类似。因此,我们将简单地改变文本的对齐方式。通过点击齿轮图标进入文本设置。

定制按钮

对于我们的按钮模块,我们将使用我们的颜色选择器工具,从MidJourney中找到按钮的颜色。我在Photoshop中使用了取色器,发现背景色的十六进制代码是#c1aa85。

有了这些信息,我们就可以进入Divi,开始设计我们的按钮。像往常一样,点击齿轮图标,进入模块的设置。

这些是我们将用来为我们的按钮设计风格的设置。

按钮设计设置:

这就是我们的按钮模块在使用MidJourney来激发我们使用Divi的工具进行设计后现在的样子。

创建装饰栏目

在Divider模块的Content选项卡中,取消选择Visibility下的ShowDivider选项。

复制Divider模块,并将其移至旁边的列中。

添加背景、间距和填充

现在我们所有的模块都已经设计好了,我们可以为我们的主页布局做最后的修饰。作为参考,这是我们所处的位置。

与MidJourney为我们创建的设计相差甚远。不过,只要稍加调整颜色和间距,我们就能成功地将ChatGPT和MidJourney与Divi结合起来使用。

首先,让我们点击我们的Specialty部分的齿轮图标。

接下来,点击Background标签。使用颜色选择器,将Section的背景颜色设置为#e7e6e4。

Now,let’smovetotheDesigntab.Fromhere,clickontheSizingtab.Herearethesettingsthatyou’llneedintheSizingtab.

大小设计设置:

Now,wemovetotheSpacingtab.Wewantallthepaddingandmodulewithinthesectiontobesettozero.Herearethesettingsthatwe’llbeusingthere.

现在,我们移到Spacing标签。我们希望该部分的所有填充和模块都被设置为零。以下是我们将在那里使用的设置:

间距设计设置:

一旦这些设置到位,记得点击绿色复选标记来保存它们。有了这些设置,我们已经可以看到我们在Divi中的设计与MidJourney生成的设计的间距非常相似。

第二个栏目的间距、背景和填充

我们现在进入我们的第二栏。我们开始编辑这一栏的第一行,点击该行的齿轮图标。

我们移动到最后一行,再次点击齿轮图标进入行的设置。

对于作为该行一部分的两列,我们将在第一列和第二列中分别使用背景色#b0b2b1和#bfb192。点击每一列旁边的齿轮图标。

然后,将背景色设置为每一列各自的颜色。

接下来,移动到Spacing选项卡,将边距和填充设置为0。

就这样,我们已经成功地使用ChatGPT和MidJourney在Divi中创建了一个主页布局。这是我们的成品!

将ChatGPT和MidJourney与Divi一起使用可以帮助你更快地集思广益,为你的网页设计提供灵感。在网页设计中使用人工智能并不一定意味着我们所知的数字设计的结束。有可能让人工智能进入你的工作流程,以帮助加快进程。人工智能还可以帮助把可能没有被强调的条款或概念的东西带到最前面。使用Divi,很容易重新创建人工智能生成的布局和设计。如果你不是一个天生的作家,为你的企业或客户的网站创建文案可能是困难的。像ChatGPT这样的工具可以帮助你覆盖一个你可能没有意识到的盲点。考虑在你的下一个项目中使用ChatGPT和MidJourneywithDivi。

THE END
1.也找不到退出接口怎么解决chatgpt左边没有对话记录文章浏览阅读1k次。如图所示,突然出现这种情况,左上角多了一支笔的图标,现在找不到以前的插件列表,对话记录框,也找不到退出登录的按钮。_chatgpt左边没有对话记录https://blog.csdn.net/derekswang/article/details/138593822
2.轻松找回Edge浏览器消失的侧边栏,并实现始终开启Edge 浏览器的侧边栏有时会莫名不见,这给用户带来了不便,但别担心,我们有办法解决这个问题,让您的侧边栏重新出现并始终保持开启状态。 想要恢复 Edge 浏览器不见了的侧边栏,首先需要打开浏览器的设置选项,在设置页面中,找到“外观”这一类别。 在“外观”设置里,您会看到有关侧边栏的相关选项,留意“显示侧边栏http://m.kanlouqu.net/sygonglue/124335.html
3.chatgpt报错怎么办?ChatGPT使用过程中各类报错解决办法大全1、出现这个错误大概率是和你没有开启全局代理就直接访问有关。 2、如果我们开启了全局代理还是出错就有可能和我们使用的全局代理不匹有关,建议换其它的全局代理。 3、这个错误的解决方法就是更换全局代理,越冷门的越好用。 知识延伸: 什么是ChatGPT? http://www.quwaifu.com/news/view/22826
4.用SwiftUI开发ChatGPT应用程序(一)这是一个macOS系统上的应用程序,界面分为两栏,左边是会话栏,显示我们创建的会话;右边是聊天界面,显示当前会话的内容,即我们跟ChatGPT的对话。点击侧栏按钮可以打开或关闭左边的会话栏。 效果图.gif App入口: @mainstructChatgptApp:App{varbody:someScene{WindowGroup{ContentView()}}} https://www.jianshu.com/p/768bbc0c68bb
5.手把手教你如何注册ChatGPT,超级详细–顾小北和他的朋友们相信,很多朋友已经都等不及了,要去调戏下ChatGPT。 来,我做了一个教程,大家可以手把手的实操起来~ 01 账号注册 1)注册链接: https://chat.openai.com/auth/login 2)输入邮箱,还有你的注册账号,并设置密码 3)验证邮箱 这里我是用QQ邮箱来注册的。 邮箱确认好之后,接下来要填入电话。 当然,有?些人会在https://guxiaobei.com/51461/
6.如何用ChatGPT翻译?ChatGPT提升翻译能力,亲测有效想用ChatGPT进行翻译,首先要知道在哪里可以使用ChatGPT!在国内选择不需要登录的ChatGPT来使用,在我看来是比较方便的,主打的就是省事、免费。 如何用ChatGPT翻译? 打开多御浏览器,如果没有这款浏览器的自己去下载。然后,点击左边工具栏的展开,接着,在【办公效率】中找到【ChatGPT】,点击进去即可使用! https://blog.51cto.com/u_15693888/6203875
7.chatgpt如何在国内使用要在国内使用ChatGPT,您可以按照以下步骤进行操作:1. 访问OpenAI官方网站:您需要打开OpenAI的官方网站(http://www.kuyin.tv/ask/1383855.html
8.所有人都告诉你GPT4很厉害,但没有人告诉你怎样才能免费使用所有人都告诉你ChatGPT4很厉害,一定要去用一用,但没有人告诉你怎么样才能免费使用上它。今天我就来给大家分享一个不花一分钱直接白嫖GPT4的方法。 大家都知道,GPT-4从去年一经问世就引起了全球的轰动。拥有媲美人类相当的智商,无论是写作、编程还是解决问题,它都展现出了惊人的能力。在过去的一年时间内,持续霸https://blog.itpub.net/70041274/viewspace-3044151/
9.ChatGPT中国国内使用方法–访问注册及使用详细步骤–The目前ChatGPT大约有两亿活跃用户,并在持续快速增长,然而,世界上还有一部分地区的人们不能在正常情况下使用ChatGPT,因为某些原因,OpenAI限制了这些地区的人们访问ChatGPT的网站,受影响的地区包括中国大陆、中国香港和澳门、俄罗斯、伊朗、叙利亚、古巴、委内瑞拉等,最近欧洲国家意大利也因隐私问题禁止过ChatGPT的使用(在OpenAIhttps://thetowerinfo.com/zh/use-chatgpt-china-method/
10.chatgpt如何读取文件在ChatGPT中,可以使用Python的文件操作来读取文件。以下是使用ChatGPT读取文件的一般步骤:1. 导入所需http://www.02866.cn/ask/1355958.html
11.今天OpenAI为Canvas推出三个新功能。首先,OpenAI将面向所有用户Lee:现在画面分为左右两栏:左边是熟悉的聊天界面,右边是 Canvas。ChatGPT 会在 Canvas 中为我们生成故事文本,而我也可以在 Canvas 中直接对文本进行编辑。这与以往有很大不同,以前如果在聊天中写故事,所有文本都会挤在聊天气泡里,不便于修改。现在通过并排视图,我可以清晰地看到 ChatGPT 生成的文档内容,并随时进行https://xueqiu.com/3688171147/316304399
12.ChatGPT网页端预处理配合浏览器实现长图下载吾爱破解嗯,这个插件也不错。不过我用了一下,对于chatgpt来说,截的图片有左边的侧边栏(包含历史记录数据,https://www.52pojie.cn/thread-1790136-1-1.html
13.ChatGPT怎么放到桌面?Worktile社区2. 进入ChatGPT网站:在浏览器的地址栏中输入“chat.openai.com”,然后按下回车键或点击“前往”按钮,进入ChatGPT官方网站。 3. 登录或创建账户:如果你已经有OpenAI账户,直接使用你的登录凭据登录。如果没有账户,可以点击网站上的“Sign Up”或“Create Account”按钮,按照提示创建一个新账户。 4. 访问ChatGPT页面https://worktile.com/kb/ask/537832.html
14.从英伟达GTC,聊聊ChatGPT对行业和人类的影响有关AI硬件的发布,真正的重头戏在inference部分。英伟达认为,生成式AI狂潮,驱动了inference市场的新机遇。这一点也很容易理解,以ChatGPT为代表的生成式AI应用,在几个月的时间内就狂揽上亿用户,这是过去的短视频、即时通讯、社交网络应用都没能达成的。而用户量的飙升,就意味着算力需求和硬件资源的苛求——这里的硬https://www.eet-china.com/news/202303318591.html