如何使用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.electron25+vue3+pinia2跨端chatgpt聊天应用electron-chatgpt布局结构 代码语言:javascript 复制 <template><!--//顶部工具栏 --><Toolbar/><!--//侧边栏 --><ChatNew/><Scrollbarclass="flex1"autohide size="4"gap="1"><ChatList/></Scrollbar><ExtraLink/><Collapse/><!--//主体区域 --><Main/></templatehttps://cloud.tencent.com/developer/article/2295739
2.请教,这是用chatgpt写的CADLISPD脚本,需求是画一个由双直线组成请教,这是用chatgpt写的CAD LISP脚本,需求是画一个由双直线组成的矩形类似这样, 每次画的矩形大小都有我手动输入长宽。现在用chatgpt写的脚本出现的是重合的双线,没有间隔7毫米 (defun c:QW (/ length width pt1 pt2 pt3 pt4 pt1-inner pt2-inner pt3-inner pt4-inner offset) (setq length (gethttps://ask.csdn.net/questions/8156292/54900971
3.强大的Kimi:中国版ChatGPT平替Keywords: AI, AI助手, ChatGPT 4o, 编程助手, 代码注释, 论文写作助手 ? 本文介绍如果玩转 Kimi,以更有效地开展学术研究(如文献查找、文献翻译、文献阅读、论文写作、论文降重等),提高办公效率(公文写作、PPT 助手、代码生成等)。 ? 1. Kimi 介绍 https://lianxh.cn/details/1423.html
4.BELLE/eval/ChatGPTBreadcrumbs BELLE /eval / ChatGPT_Score.htmlTop File metadata and controls Code Blame 185 lines (162 loc) · 671 KB Raw <!DOCTYPE html> ChatGPT获取分数 body { font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color: #f3f3f3; } h1 { text-align: centerhttps://github.com/LianjiaTech/BELLE/blob/main/eval/ChatGPT_Score.html
5.每个前端开发需要了解的10个强大的CSS属性快来免费体验ChatGpt快来免费体验ChatGpt plus版本的,我们出的钱 体验地址:chat.waixingyun.cn可以加入网站底部技术群,一起找bug,另外新版作图神器已上线cube.waixingyun.cn/home 本文介绍了CSS(层叠样式表)的基本概念和作用,然后深入讨论了10个常用的CSS属性。这些属性包括边框(border)、背景(background)、定位(positioning)、盒模型(bohttps://article.juejin.cn/post/7249740342751526973
6.ChatGPTAGIX使用groovy语言或GPTs导入功能自定义Agent为你的AI助手扩展任何能力! 快来打造属于自己的AGI吧! 插件特点 本插件UI部分基于开源项目ChatGPT-Next-Web在此鸣谢所有的贡献者 云端模型:集成70+全球顶级大模型 持续更新中 OpenAI ChatGPT GPT-3.5、GPT-4.0系列模型、讯飞星火3.0(SparkDesk)、Alibaba 通义千问系列、Claudhttps://plugins.jetbrains.com/plugin/21852-chatgpt-x-copilot-context-aware--function-calling
7.前端全局样式个性化扩展(UI定制)2、使用任意ChatGPT软件通过问答方式获取样式设置具体内容 示例如下(框选部分内容即可拿来使用): 六、注意事项 1、注意使用的Class层级不同,其生效范围也不一样(不限制层级则可能全局生效) 2、各控件开放Class即可用于全局,也可以作用于单个控件(根据不同CSS写法) 3、【支持范围】目前开放Class只支持PC端页面 4、【https://vip.kingdee.com/article/612244233591941376
8.六月科技大事:华为上调2023年手机出货量目标张勇卸任阿里巴巴华为公司将发布一款直接对标 ChatGPT 的多模态千亿级大模型产品,名为“盘古 Chat”。据介绍,盘古大模型于 2020 年 11 月在华为云内部立项成功。这款“盘古 Chat ”预计将于今年 7 月 7 日举行的华为云开发者大会 (HDC.Cloud2023) 上对外发布以及内测,产品主要面向 To B / G 政企端客户。>>查看详情 https://www.ithome.com/0/703/101.htm
9.2024全球汽车零部件百强出炉:宁德时代第46月25日,小鹏汽车董事长何小鹏分享了其在美国加州针对特斯拉FSD V12.3.6的版本和Waymo的自动驾驶体验。他表示,FSD在数月里有很大的进步,小鹏也会向FSD学习他们优秀的功能点和用户体验部分,相信2025会是完全自动驾驶的ChatGPT时刻。 新闻来源:工创联早8点 https://www.yoojia.com/article/9524474949684855063.html
10.如何将网页的内容给chatgpt将网页内容导入word如何将网页的内容给chatgpt 将网页内容导入word 在互联网时代我们经常要在网页中找资料,文字进行复制粘贴调整格式还好,但是有时网页中的表格复制到Word中,表格的边框线全没了,怎么办呢?那么下面就由学习啦小编给大家分享下把网页表格复制到word的技巧,希望能帮助到您。https://blog.51cto.com/u_13341/9668652
11.《ChatGPT+Excel智能办公从入门到精通》课件第1章制表入门:掌握第1章 制表入门:掌握Excel基本操作1.1 创建一个工作表1.2 表格文本自动排列1.3 表格格式优化设置本章小结课后习题学习目标1.1 创建一个工作表1.1.1 新建一个空白工作簿1.1.2 重命名并输入数据内容1.1.3 设置工作表https://www.renrendoc.com/paper/324606662.html