看到一期特别有意思的公众号排版互动作品《本 条 SVG 由 猫 猫 制 作 ！》，滑动时会产生猫猫的多种姿势动态效果，这里引用一个局部，可以按住画面轻轻横向滑动：

https://mp.weixin.qq.com/s/goBSNyoK_vkdY6zZAtKE1w

从排版架构上讲它其实是相对简单的「顶层滑动」CSS 模型，即光栅卡在特制图像表面移动产生的效果。恰好很多运营人来问计育韬老师这种模型的素材设计方法，那么作为 E2 平台的技术顾问和专业平面设计师，我特地向平台方索要了原设计素材，为大家友情讲解具体的「视频-序列抽帧-光栅帧化-混合叠加」以及最后的排版布局。

可以前往我们的 B 站主页观看视频教程（https://www.bilibili.com/video/BV1CXabzHE6Y/），这里提供简要的文字讲解供你搭配视频进行平面设计操作学习。

首先请准备好三款设计软件：AE（Adobe After Effect）、AI（Adobe illustrator）、PS（Adobe Photoshop）——这是我们的核心工作流软件，并提前准备好 SVG 编辑工具如 E2.COOL 黑科技 SVG 编辑器。

1. 视频准备与视频加工：

- 通过视频手工制作或 AIGC 方式生成具备循环特性的猫猫视频；

- 载入 AE 截取循环点，在合成渲染中选择 PNG/JPEG 序列帧导出；

- 对部分效果存在特定问题（如 AIGC 产生的错误）进行 PS 涂抹/修正。

2. 序列帧加工与光栅制作：

- 光栅序列通常为 4-16 帧，且以 8 帧为典型，故可以间隔取出 8 帧预备；

- 光栅是一种等距间隔的透明条纹图，其中非透明部分宽度为（N-1）单位，透明部分为 1 单位。即制作 8 帧光栅时，非透明宽度占 7/8，透明部分占 1/8；

- 推算对应数学像素映射，这里计育韬老师的操作方式是在 AI 中建立一个 7 单位宽矩形，手动输入宽和高，左对齐画板；再建立一个 1 单位宽矩形，手动输入宽和高，右对齐画板；随后创建 7 单位宽矩形的副本，紧贴 1 单位宽矩形右侧，使用混合功能建立指定步数，进而一次性生成光栅。（如果无法看懂描述，请移步视频浏览，方法不唯一）

- 进入 PS，用光栅盖住序列 1 导出光栅帧。随后向右移动光栅一个单位，加入序列 2 导出第二个光栅帧……依次类推；

- 将导出的 8 个光栅帧叠加，上 7 个图层「正片叠底」，得到最终的光栅背景图。

3. 滑动页面部署：

- 确保光栅自身和光栅背景图设计正确，进入编辑器调试；

- 以 E2 编辑器为例，主要凭借「顶层滑动」组件实现；

- 其中第一个滑动光栅可添加必要的提示设计；

- 完成调试，采用代码视窗方式导入图文或其它载体。

大功告成！这里留一下布局工具网址，如需该作品工程草稿可以留言索要：

https://e2.cool/

更重要的是，之前读到《SVG要显贵，基础款就不要再搭基础款。》时，计育韬老师就转发并评论：有的情况下，优秀 CSS 交互排版作品可以是 SVG（代码）基础，但设计本身不基础——光栅布局就是一种非常典型的硬核设计交互。

今天计育韬老师不仅是作为 E2 编辑器技术顾问为大家进行讲解，更是以我的本职工作平面设计师为你们分享了一期复合工作流解析，也是希望大家在被 SVG「乱花渐欲迷人眼」的同时，永远不要忘记视觉设计的重要地位。

当然额外提醒一句，光栅卡设计过程中，画面的变化要更多在横向层面发生，因为纵向布局更容易导致在滑动时帧与帧明显叠加，降低画面动态的可识别度喔！

如有其它设计学问题，随时欢迎向计老师提问！

-END-

计育韬

复旦大学思想政治教育系学士

复旦大学哲学学院企业家哲学班（九期）

微信官方 SVG AttributeName 开发者

上海市青年企业家协会会员

上海市信息化青年人才协会会员

上海市知识分子联谊会会员

上海市青年创业家协会会员

上海市新的社会阶层人士联谊会会员

著有

《硬核运营：新媒体技术流养成》

《Prezi 完全解读：从入门到精通》