延续「氛围感 Blog」,我做了一个沉浸式插图风的「语文课」网页 Demo,及一些思考

1 月 6 日
 artshooter

之前为了发「氛围感 Blog 」的介绍,我用几个中学课文作为素材去做了对应的网页。 做的过程中,我发现那些经典的中学课文中,无一不包含着质朴、强烈的情感。 无论用什么媒介去重塑,它们都蕴含着打动人心的力量。

于是我开始怀旧起来,打算尝试做一个系列。

目前先做了一个 Demo 。包含一个三篇经典文章+首页场景动画

体验链接: https://chinese-class.ashooter.com/ (首页加载图较多,可能有点慢)

做这个 Demo 过程中的感受与思考:

  1. 插图都是由 AI 生成的。生成过程中,我遇到一个格式问题:生成出来的基本都是有背景色的 png 图,但我想要透明底的 webp 。
    于是我用 Claude Code 提炼了一个很具体的流程:把图从 png 转成 webp ,同时帮我去除背景色。
    然后我就反应过来,其实这种很小、很垂直的工具,我们以前都会去找那种工具站,但以后可能都不需要了。用 AI 很擅长用代码去快速解决一批具体的问题。

  2. 做文章封面图的时候,基本我都写了很长很长的 Prompt 。这个过程中,我发现有些场景/动作我能想象出来,但完全写不出来 Prompt 。
    写 Prompt 这个过程,有点像白描手法的写作练习,你要把脑海里的画面,用文字一点点摹出来。但很多时候,我发现我居然找不到一个准确的词,来形容这个动作。
    比如说《背影》那张图,父亲爬向月台的时候,我脑子里是有画面的:左脚撑着,右脚爬上去了一半,整个人匍匐着,姿态是很狼狈的。重点就在这个“狼狈感”上,它的精髓到底在哪?你怎么用文字把它描述出来?
    有两点 个人总结:1.还是得多看书; 2.我具体的执行方式,就是反复和 AI 来回沟通。和 AI 多聊几轮,先把自己混乱的想象告诉他,让他生成 prompt ,然后再去来回调 prompt ,你们一起来慢慢逼近你心里真正想要的那个画面。

  3. (这一点是对 AI 文生图功能的畅想):
    我在做翻页动画的时候,先做了第一张“书页一角翘起来”的图,然后我想去做连续的好几帧,但发现很难做出来。然后我就在想,或许在今年或者明年,新的文生图模型能让我们对一张图直接进行“逻辑上的修改”。
    有点类似把一张平面图当成一个三维模型来用。如果图里是一本书,我可以选中其中一页,然后选中、拖动它,让这一页翻过去;如果图里是一个人,我可以直接把他的手举起来。相当于把一张静态图片,变成一个 AI 可以理解和操作的模型。

还是一个尝试中的 Demo ,欢迎大家反馈~

2115 次点击
所在节点    分享创造
13 条回复
artshooter
1 月 6 日
效果预览:
LASockpuppet
1 月 6 日
感觉可以加一个深情并茂的朗读
artshooter
1 月 6 日
@LASockpuppet 有道理。我开始只想着以后可以加 bgm 。

加朗读 想想还不错,后面拿我自己声音克隆一个😂。
bojue
1 月 7 日
@artshooter #3 你要卖语音包,你自己的免费
liuliuliuliu
1 月 7 日
这个感受和思考的分享就很细致了,非常赞
zoyua
1 月 7 日
真不错
Link99
1 月 7 日
所以这个翻页效果是怎么做的 好流畅
Heanes
1 月 7 日
真不错,学习了
kamilic
1 月 7 日
@Link99 看了下代码,就是平平无奇的动画帧播放 😂
artshooter
1 月 7 日
@Link99 帧播放。

重点在于用文生图做出顺畅的前后帧。

1. 扣提示词
2. 对图片做标柱 ,加以引导
3. 大量抽卡
artshooter
1 月 7 日
翻页动画还有一种思路,可以直接文生视频。
然后抽出视频的帧。
Nem0
1 月 7 日
主页图片也是 AI 做的吗,好像回到了小时候
artshooter
1 月 7 日
@Nem0 是的。图片资源都是 AI 做的。

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://v2ex.ih06.com/t/1183605

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX