”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 我使用 HTML/CSS + AI 制作了一个网络漫画......

我使用 HTML/CSS + AI 制作了一个网络漫画......

发布于2024-08-29
浏览:970

gen-AI开始出现时,我正在学习 HTML/CSS。我看到这一切并说:等一下,我可以使用 CSS 和一些 AI 工具来制作漫画。总的来说,我没有错,只是我预计需要几周时间,结果却花了四个月。然而,结果相当不错,我为这项工作感到自豪,并且我从中学到了很多东西。那么,让我告诉你为什么以及如何我这样做的味道:

1-免费工具:除非您选择使用付费人工智能生成器(我推荐),您需要的所有其他工具都是免费的。
就我而言,我只使用了 VS code,只使用了 HTML 和 CSS。不需要更多。所有字体、资源和工具都可以免费找到。
没有必要就不要增加东西。这是两个超级强大的工具。掌握它,花一段时间就够了。
I made a webcomic using HTML/CSS   AI…

2-自动化:当您使用 html 和 css 制作漫画时,您本质上是在编写漫画代码。然后,您可以利用自动化的力量。
气泡、拼写错误、布局……一切都可以通过单击或几行代码大规模完成。我不知道为此目的使用网络技术是否会增长,我怀疑这对我来说是一件非常特殊的事情。然而,结果是惊人的。
接下来是 VS code 中我的漫画封面的视图。使用 DevTools,您几乎可以控制任何事情。就像是为此而生一样。
I made a webcomic using HTML/CSS   AI…

3-翻译:这是一件大事。因为即使您使用这些无代码平台之一来制作漫画,您也会失去这种自动化的力量。

据我所知(如果我错了,请纠正我),在所有这些平台中,您基本上创建了一些可导出的文件 - PDF、JPG、DOC ... - 因此,如果您想要翻译漫画的那一刻到来翻译成另一种语言,你将不得不一遍又一遍地重复这个过程。我的漫画大约有 264 页,相信我,即使是看似简单的以其他语言复制/粘贴所有文本的任务,也开始变得难以逾越...... 20 页?更不用说你是否创造了数百个。

如果您使用网络技术来制作漫画,那么您只需单击一下即可利用浏览器的强大功能进行自动翻译。几乎是魔法。

我的建议是双重的。首先,对于翻译,迄今为止最好的浏览器是chrome,因为它嵌入了谷歌翻译器并且支持几乎所有你能想象到的语言(有一些疯狂的......)。其次,即使是自动的,您也需要检查每一页以进行质量控制。这是因为有些语言比其他语言更冗长,这可能会极大地改变对话气泡的长度以及您未设置的力量大小和位置,从而破坏页面的样式。
漫画页面翻译为繁体中文的示例:
I made a webcomic using HTML/CSS   AI…
一个重要的属性需要知道的是翻译,它允许您设置为“是”或“否”。假设您不想翻译某些单词或句子。您可以设置为 NO,浏览器将不会执行翻译。
4-在线发布:如果您不想提交给中间人并在线发布您的漫画,例如在您的个人网站上怎么办?

这是一个很好的选择。我通过这样做和出版漫画获得的经验之一是,平台就像看门人一样——合理,甚至可以预测——但不是必需的。这是网络的魅力之一,一种去中心化的媒体,你可以创建自己的网络/平台并在那里发布你的漫画,而不必通过其他人强加给你的过滤器——相信我,有很多过滤器,即使在像亚马逊这样似乎没有意识形态的平台上也是如此。
我在 VS 代码中使用了 Live Server 扩展来可视化本地服务器上的进程。
I made a webcomic using HTML/CSS   AI…

5-练习 HTML/CSS: 这是我这样做的首要目标。
我想练习html和css,特别是掌握CSS GRID,这确实是一个有效的想法。使用这些网络语言制作漫画为我们提供了使用这些语言所能提供的大部分内容(如果不是全部的话)的借口。在 CSS 中,我使用了变量、属性、布局、文本样式...我学到的东西是巨大的,最棒的是,这是一个有趣的过程,因为我正在做这个我喜欢的项目。
CSS GRID 值得特别提及。自从 CSS 作为一种语言诞生以来,为 HTML 设计样式以制作复杂的布局确实是一件痛苦的事情:定位、边距技巧、布局表……仅此而已。制作这部漫画实际上是 CSS Grid 强大功能的证明 以及您可以用它做什么。
当我开始学习时,我很快意识到这个工具就像是为了制作漫画而生的。其精确度和低控制水平给您带来惊人的感觉,并且感觉自然且合适。一开始它的学习曲线很陡峭,但是当你掌握了它之后,从长远来看真的值得。我想说,这是以最简单的方式制作网络漫画的核心部分,并且是一项巨大的技能投资。
这是漫画封面的 CSS 代码的样子。我选择 .page-1 类并使用网格模板速记给出一个位置。我将页面背景设置为黑色,并将我在 HTML 文件上上传的所有图像设置为样式。
I made a webcomic using HTML/CSS   AI…

这真是一次伟大而有趣的冒险(即使我花了比预期更多的时间)。现在我对前端有点厌倦了。想要继续后端并制作一个很酷的全栈项目。

查看漫画这里

版本声明 本文转载于:https://dev.to/oscar_oro/i-made-a-webcomic-using-htmlcss-ai-1b6d?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • 如何在 Go 中处理不同包之间相同的方法签名?
    如何在 Go 中处理不同包之间相同的方法签名?
    处理不同包中具有相同方法签名的接口在Go中,当处理具有相同方法签名但定义在不同包中的多个接口时,可能会出现以下情况实现两个接口的类型会导致意外行为。考虑在不同包中定义的这两个接口(Doer)和函数(FuncA 和 FuncB):// Package A type Doer interface { D...
    编程 发布于2024-11-06
  • 如何使用 jQuery 填充级联下拉列表以获得更好的兼容性和用户体验?
    如何使用 jQuery 填充级联下拉列表以获得更好的兼容性和用户体验?
    使用 jQuery 填充级联下拉列表在表单开发领域,级联下拉列表经常用于提供更加用户友好和动态体验。为了增强兼容性并解决跨浏览器问题,jQuery 提供了一个强大的解决方案来异步填充这些下拉列表。问题中所示的用于创建级联下拉列表的原始 JavaScript 函数缺乏与 IE 的兼容性。为了解决这个问...
    编程 发布于2024-11-06
  • 了解 JavaScript 中的扩展运算符:初学者简单指南
    了解 JavaScript 中的扩展运算符:初学者简单指南
    介绍 JavaScript 是一种有趣的编程语言,其最令人兴奋的功能之一是扩展运算符。如果您刚刚开始编码,或者即使您是一个对学习 JavaScript 感兴趣的孩子,也不必担心!我将以最简单的方式分解这个概念,并举例来帮助您理解。 什么是价差运算符? 扩展运算符看起...
    编程 发布于2024-11-06
  • 在 Python 中使用 OpenSearch 掌握 CRUD 操作:实用指南
    在 Python 中使用 OpenSearch 掌握 CRUD 操作:实用指南
    OpenSearch, an open-source alternative to Elasticsearch, is a powerful search and analytics engine built to handle large datasets with ease. In this b...
    编程 发布于2024-11-06
  • 冰沙框架的重要概念||如何精通冰沙
    冰沙框架的重要概念||如何精通冰沙
    要精通 Frappe,有几个关键概念和领域需要关注。以下是最重要的细分: 1. 文档类型 定义:DocTypes是Frappe中的核心数据模型。每个实体或记录都存储在 DocType 中,并且它们可以具有字段、权限和工作流程。 为什么它很重要:了解如何创建和自定义 DocType 至...
    编程 发布于2024-11-06
  • 如何解决 JLabel 拖放的鼠标事件冲突?
    如何解决 JLabel 拖放的鼠标事件冲突?
    用于拖放的 JLabel 鼠标事件:解决鼠标事件冲突为了在 JLabel 上启用拖放功能,鼠标事件必须被覆盖。然而,当尝试使用 mousePressed 事件实现拖放时,会出现一个常见问题,因为 mouseReleased 事件对该 JLabel 无效。提供的代码在 mousePressed 事件中...
    编程 发布于2024-11-06
  • MySQL 中的数据库分片:综合指南
    MySQL 中的数据库分片:综合指南
    随着数据库变得越来越大、越来越复杂,有效地控制性能和扩展就出现了。数据库分片是用于克服这些障碍的一种方法。称为“分片”的数据库分区将大型数据库划分为更小、更易于管理的段(称为“分片”)。通过将每个分片分布在多个服务器上(每个服务器保存总数据的一小部分),可以提高可扩展性和吞吐量。 在本文中,我们将探...
    编程 发布于2024-11-06
  • 如何将 Python 日期时间对象转换为秒?
    如何将 Python 日期时间对象转换为秒?
    在 Python 中将日期时间对象转换为秒在 Python 中使用日期时间对象时,通常需要将它们转换为秒以适应各种情况分析目的。但是,toordinal() 方法可能无法提供所需的输出,因为它仅区分具有不同日期的日期。要准确地将日期时间对象转换为秒,特别是对于 1970 年 1 月 1 日的特定日期...
    编程 发布于2024-11-06
  • 如何使用 Laravel Eloquent 的 firstOrNew() 方法有效优化 CRUD 操作?
    如何使用 Laravel Eloquent 的 firstOrNew() 方法有效优化 CRUD 操作?
    使用 Laravel Eloquent 优化 CRUD 操作在 Laravel 中使用数据库时,插入或更新记录是很常见的。为了实现这一点,开发人员经常求助于条件语句,在决定执行插入或更新之前检查记录是否存在。firstOrNew() 方法幸运的是, Eloquent 通过firstOrNew() 方...
    编程 发布于2024-11-06
  • 为什么在 PHP 中重写方法参数违反了严格的标准?
    为什么在 PHP 中重写方法参数违反了严格的标准?
    在 PHP 中重写方法参数:违反严格标准在面向对象编程中,里氏替换原则 (LSP) 规定:子类型的对象可以替换其父对象,而不改变程序的行为。然而,在 PHP 中,用不同的参数签名覆盖方法被认为是违反严格标准的。为什么这是违规?PHP 是弱类型语言,这意味着编译器无法在编译时确定变量的确切类型。这意味...
    编程 发布于2024-11-06
  • 哪个 PHP 库提供卓越的 SQL 注入防护:PDO 还是 mysql_real_escape_string?
    哪个 PHP 库提供卓越的 SQL 注入防护:PDO 还是 mysql_real_escape_string?
    PDO vs. mysql_real_escape_string:综合指南查询转义对于防止 SQL 注入至关重要。虽然 mysql_real_escape_string 提供了转义查询的基本方法,但 PDO 成为了一种具有众多优点的卓越解决方案。什么是 PDO?PHP 数据对象 (PDO) 是一个数...
    编程 发布于2024-11-06
  • React 入门:初学者的路线图
    React 入门:初学者的路线图
    大家好! ? 我刚刚开始学习 React.js 的旅程。这是一次令人兴奋(有时甚至具有挑战性!)的冒险,我想分享一下帮助我开始的步骤,以防您也开始研究 React。这是我的处理方法: 1.掌握 JavaScript 基础知识 在开始使用 React 之前,我确保温习一下我的 JavaScript 技...
    编程 发布于2024-11-06
  • 如何引用 JavaScript 对象中的内部值?
    如何引用 JavaScript 对象中的内部值?
    如何在 JavaScript 对象中引用内部值在 JavaScript 中,访问引用同一对象中其他值的对象中的值有时可能具有挑战性。考虑以下代码片段:var obj = { key1: "it ", key2: key1 " works!" }; ...
    编程 发布于2024-11-06
  • Python 列表方法快速指南及示例
    Python 列表方法快速指南及示例
    介绍 Python 列表用途广泛,并附带各种内置方法,有助于有效地操作和处理数据。下面是所有主要列表方法的快速参考以及简短的示例。 1. 追加(项目) 将项目添加到列表末尾。 lst = [1, 2, 3] lst.append(4) # [1, 2, 3, 4]...
    编程 发布于2024-11-06

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3