画面从哪来:一张卡一张卡地做

第 4 步 · 约 14 分钟读完

为什么自己做卡

模板软件里所有好看的模板,都已经有十万人用过了。观众一眼就认出"又是那个模板",然后划走。

自己做的卡有一个好处:它只属于这一条片子。而且改一个词只需要改一行 HTML,不用在时间线上拖关键帧。

卡片的骨架

一张卡就是一个 HTML 文件,大字、留白、一个底色。就这些:

<div class="card">
  <p>我在你屏幕最底下</p>
</div>
body{background:#0b1a24;
     display:flex;align-items:center;justify-content:center;
     height:100vh;margin:0}
.card p{
  font:700 76px/1.4 "Microsoft YaHei",sans-serif;
  color:#e6f2f8;letter-spacing:.04em;
  text-align:center;max-width:9em;
}

1080×1920 的窗口里打开,截图,就是一张 9:16 的卡。每行字生成一个,截图 20 次,素材就齐了。

几条让卡看起来"贵"的规矩

  1. 一次只放一行字。两行就是两张卡,不要挤。
  2. 上下各留 300px 空。字顶着边就廉价。
  3. 底色不要纯黑。#0b1a24(深蓝黑)比 #000 高级,因为看着像有光。
  4. 字重 700,字距 +0.04em。中文默认的字距太挤。

别只用卡

全是字的片子像 PPT。我自己的做法是:

  • 开头 3 秒用真桌面截图——观众看见"这是一台真电脑",才信你
  • 中间用卡,一句一张
  • 结尾回到真画面,停 2 秒再淡出

真画面和卡交替,片子才有呼吸。

怎么批量截图

把 HTML 里那句话换掉,浏览器刷新,截图,存成 card01.png、card02.png……手脚快的话 20 张不到十分钟。

嫌麻烦就写个脚本:一个 Python 循环,改文字、调无头浏览器截图。等我把这步写顺手了,会单独补一篇。