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

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

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

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中构造SQL查询时,如何安全地加入文本和值?
    在GO中构造SQL查询时,如何安全地加入文本和值?
    在go中构造文本sql查询时,在go sql queries 中,在使用conting and contement和contement consem per时,尤其是在使用integer per当per当per时,per per per当per. [&​​&&&&&&&&&&&&&&&默元组方法在...
    编程 发布于2025-04-02
  • 如何使用node-mysql在单个查询中执行多个SQL语句?
    如何使用node-mysql在单个查询中执行多个SQL语句?
    Multi-Statement Query Support in Node-MySQLIn Node.js, the question arises when executing multiple SQL statements in a single query using the node-mys...
    编程 发布于2025-04-02
  • 为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    为什么我在Silverlight Linq查询中获得“无法找到查询模式的实现”错误?
    查询模式实现缺失:解决“无法找到”错误在银光应用程序中,尝试使用LINQ建立错误的数据库连接的尝试,无法找到以查询模式的实现。”当省略LINQ名称空间或查询类型缺少IEnumerable 实现时,通常会发生此错误。 解决问题来验证该类型的质量是至关重要的。在此特定实例中,tblpersoon可能需...
    编程 发布于2025-04-02
  • 如何从PHP中的数组中提取随机元素?
    如何从PHP中的数组中提取随机元素?
    从阵列中的随机选择,可以轻松从数组中获取随机项目。考虑以下数组:; 从此数组中,使用array_rand( array_rand()函数从数组返回一个随机键。通过将$项目数组索引使用此键,我们可以从数组中访问一个随机元素。这种方法为选择随机项目提供了一种直接且可靠的方法。
    编程 发布于2025-04-02
  • 哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    哪种方法更有效地用于点 - 填点检测:射线跟踪或matplotlib \的路径contains_points?
    在Python Matplotlib's path.contains_points FunctionMatplotlib's path.contains_points function employs a path object to represent the polygon.它...
    编程 发布于2025-04-02
  • HTML格式标签
    HTML格式标签
    HTML 格式化元素 **HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without us...
    编程 发布于2025-04-02
  • Python读取CSV文件UnicodeDecodeError终极解决方法
    Python读取CSV文件UnicodeDecodeError终极解决方法
    在试图使用已内置的CSV模块读取Python中时,CSV文件中的Unicode Decode Decode Decode Decode decode Error读取,您可能会遇到错误的错误:无法解码字节 在位置2-3中:截断\ uxxxxxxxx逃脱当CSV文件包含特殊字符或Unicode的路径逃...
    编程 发布于2025-04-02
  • 如何使用不同数量列的联合数据库表?
    如何使用不同数量列的联合数据库表?
    合并列数不同的表 当尝试合并列数不同的数据库表时,可能会遇到挑战。一种直接的方法是在列数较少的表中,为缺失的列追加空值。 例如,考虑两个表,表 A 和表 B,其中表 A 的列数多于表 B。为了合并这些表,同时处理表 B 中缺失的列,请按照以下步骤操作: 确定表 B 中缺失的列,并将它们添加到表的末...
    编程 发布于2025-04-02
  • 在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    在Java中使用for-to-loop和迭代器进行收集遍历之间是否存在性能差异?
    For Each Loop vs. Iterator: Efficiency in Collection TraversalIntroductionWhen traversing a collection in Java, the choice arises between using a for-...
    编程 发布于2025-04-02
  • 如何使用Regex在PHP中有效地提取括号内的文本
    如何使用Regex在PHP中有效地提取括号内的文本
    php:在括号内提取文本在处理括号内的文本时,找到最有效的解决方案是必不可少的。一种方法是利用PHP的字符串操作函数,如下所示: 作为替代 $ text ='忽略除此之外的一切(text)'; preg_match('#((。 &&& [Regex使用模式来搜索特...
    编程 发布于2025-04-02
  • 为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    为什么不````''{margin:0; }`始终删除CSS中的最高边距?
    在CSS 问题:不正确的代码: 全球范围将所有余量重置为零,如提供的代码所建议的,可能会导致意外的副作用。解决特定的保证金问题是更建议的。 例如,在提供的示例中,将以下代码添加到CSS中,将解决余量问题: body H1 { 保证金顶:-40px; } 此方法更精确,避免了由全局保证金重置引...
    编程 发布于2025-04-02
  • 如何将来自三个MySQL表的数据组合到新表中?
    如何将来自三个MySQL表的数据组合到新表中?
    mysql:从三个表和列的新表创建新表 答案:为了实现这一目标,您可以利用一个3-way Join。 选择p。*,d.content作为年龄 来自人为p的人 加入d.person_id = p.id上的d的详细信息 加入T.Id = d.detail_id的分类法 其中t.taxonomy =...
    编程 发布于2025-04-02
  • 如何在Java字符串中有效替换多个子字符串?
    如何在Java字符串中有效替换多个子字符串?
    在java 中有效地替换多个substring,需要在需要替换一个字符串中的多个substring的情况下,很容易求助于重复应用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    编程 发布于2025-04-02
  • 哪种在JavaScript中声明多个变量的方法更可维护?
    哪种在JavaScript中声明多个变量的方法更可维护?
    在JavaScript中声明多个变量:探索两个方法在JavaScript中,开发人员经常遇到需要声明多个变量的需要。对此的两种常见方法是:在单独的行上声明每个变量: 当涉及性能时,这两种方法本质上都是等效的。但是,可维护性可能会有所不同。 第一个方法被认为更易于维护。每个声明都是其自己的语句,使其...
    编程 发布于2025-04-02
  • 为什么尽管有效代码,为什么在PHP中捕获输入?
    为什么尽管有效代码,为什么在PHP中捕获输入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,输出...
    编程 发布于2025-04-02

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

Copyright© 2022 湘ICP备2022001581号-3