使用Midjourney、Figma和ChatGPT构建网站
By CJ Gammon · 2023-02-20
本文将介绍如何使用Midjourney、Figma和ChatGPT构建网站,包括HTML和CSS中的Carousel系统设计、UI设计过程、创建遮罩、Figma原型的制作和HTML/CSS的构建、创建并定制轮播图以及更新页面样式。
HTML和CSS中的Carousel系统设计
- 首先在figma中构建Carousel系统,以便能够在各个数值之间进行过渡。
- 在HTML中构建Carousel系统。
- 在mid-journey生成的图像中,我们进行了UI UX界面设计,放置在一起,并使用了两个图像。
- 使用B hands dribble美丽的颜色创意应用市场进行界面设计,将质量设置为2,样式化为1000,并使用了第4版的模型。
- 打开figma并从mid-journey将图像导入其中,然后创建框架,因为这是移动UI,所以我们只需选择iPhone预设之一。
- 在界面上勾勒出一些UI,使用椭圆工具按住option和shift键可以从中心绘制出完美的圆形,然后复制每个圆形,确保它们均匀分布。
- 移动它们以便我们可以使用颜色选择器工具从每个圆形中提取渐变。
- 然后选择它们所有并应用阴影。
- 然后在界面上放置文本,将颜色、位置和字体进行匹配。
HTML和CSS中的Carousel系统设计
UI设计过程
- 我们需要调整UI中文本的大小,同时还需要追踪一些图形的形状、边框和线条。
- 在我们的框架中,我们首先要画一个矩形作为页眉,并使用渐变效果。
- 接下来,我们用另一个矩形在左侧创建渐变效果。
- 然后,我们需要修正这些主视觉图片,打开完整的图片并在Photoshop中进行调整。
- 将其中一张图片复制并粘贴到新文档中,然后对其进行放大处理。
- 使用Photoshop插件对图片进行稳定化处理,并设 置宽度和高度为1024像素。
- 重复这些步骤,处理另一张主视觉图片。
UI设计过程
创建遮罩
- 首先,我们要创建一个遮罩,使其与我们的内容无缝衔接。
- 接下来,我们选择钢笔工具,绘制出我们想要清晰边缘的路径。
- 然后,右键点击路径,选择创建矢量遮罩。
- 在图层面板中,点击遮罩按钮,使用魔术棒工具选择图像边缘的内容。
- 接着,选择遮罩,使用画笔工具将其涂黑。
- 确保取消选择,然后选择遮罩图层,使用较大的画笔,围绕图像绘制渐变,使其与内容无缝衔接。
- 最后,以 PNG 格式保存图像。
- 将图像放置到 Figma 中,并调整位置。接着,我们开始制作我们的轮播。
- 将另一张图像放入轮播中,并向右偏移。
- 然后,简单复制我们的画框,选择这两个项目并将它们移回到左边,以便我们的新页眉图像出现在视野中。
- 选择第一个页眉图像,进入原型模式,添加一个交互,并设置拖动时导航到另一个画框,确保是智能动画。
- 对另一个页眉画框执行相同操作,只是方向相反。
创建遮罩
Figma原型的制作和HTML/CSS的构建
- 我们通过在两个标题图像之间进行轻扫操作来预览原型,然后需要在第二帧匹配另一个视图的所有颜色。
- 完成后,我们可以预览原型,由于我们使用了自动动画,它会自动在两个视图之间过渡颜色。
- 然后我们可以使用钢笔工具在背景中跟踪矢量形状,将其导出为SVG并引入HTML。
- 用AI工具来辅助制作HTML和CSS,通过请求ChatGPT创建HTML模板,然后粘贴 到HTML文件中。
- 借助ChatGPT,我们可以请求生成CSS嵌入的脚本标签,然后将所有内容连接起来,在浏览器中进行测试。
Figma原型的制作和HTML/CSS的构建
创建并定制轮播图
- 使用chat GPT向调用Green Sock动画平台创建轮播图
- 将生成的HTML代码复制到HTML文档中,然后添加CSS样式
- 在JavaScript中编写代码
- 使用CSS样式对轮播图进行定制,使其在页面上呈现不同的样式
- 忘记导入Green Sock动画平台的脚本标签,需要chat GPT提供导入的脚本标签
- 生成了一个自动导航的轮播图,需要让用户可以进行交互操作,需要向chat GPT咨询如何实现用户可以在不同的轮播图项之间进行切换
- 最终确定了使用触摸事件和指针事件的代码,以适配桌面和移动端
- 将相关代码复制粘贴到JavaScript文件中,实现了左右滑动切换轮播图项的功能
- 替换HTML中的轮播项为主图像,并调整了部分CSS样式以确保页面布局和图片选中效果
创建并定制轮播图
更新页面样式
- 通过在body标签中添加一个基于当前轮播项的类,我们可以根据所在页面更新所有的样式。
- 在JavaScript中添加了相关代码,并对当前页面变量进行了一些调整以确保其正确运行。
- 需要在页面切换时和初始加载时调用这段代码,这样就能实现在切换页面时更新样式类。
- 接下来要做的是在Figma中复制页面背景的CSS渐变,并粘贴到各个单独页面的类中,这样在轮播切换时背景也会随之变化。
- 然后需要为另一个视图重复这个步骤,同时还会通过flexbox添加圆形项目,并复制粘贴figma中的渐变。
- 最后,根据Figma中的变量,调整CSS布局,创建标记,并将变量带回CSS中。
- 这样就能实现页面样式的更新,而且作者将所有源代码都放在了GitHub上。
更新页面样式
Conclusion:
本文详细介绍了如何使用Midjourney、Figma和ChatGPT构建网站,从HTML和CSS中的Carousel系统设计到UI设计过程,再到Figma原型的制作和HTML/CSS的构建,以及创建并定制轮播图以及更新页面样式。这些方法将帮助你打造出令人满意的网站。