Lei Feng Fab Academy 2025第2周：计算机辅助设计——像素图到矢量图的转换
项目概述
对于我的最终项目——智幻走马灯，中间的旋转部分，我想使用我喜欢的张大千临摹的敦煌壁画《晚唐乐器二身佛》作为素材。画面中两个飞天造型的佛像，我考虑可以打印在半透光的纸上，做成滚筒形状，随着滚筒旋转，可以看到飞舞的乐器二身佛。
张大千临摹的敦煌壁画《晚唐乐器二身佛》
两个飞天造型的佛像，很适合作为智幻走马灯的旋转图案
这个练习我想完成下面的目标：
- 图片去背景：我希望图像只保留菩萨的内容，背景为透明，这样我就可以把他们打印在用作旋转滚筒的任意半透明纸张或透明薄膜上。
- 转为黑白线稿：从彩色图像提取黑白线稿。
- 黑白线稿矢量化：将黑白线稿矢量化，我想为后面激光切割课程准备素材，想试试用激光刻印的效果。
这个过程不仅能帮助我们理解不同图像格式的特点，也为后续的数字制造工艺奠定基础。
基础概念
图像与图像是计算机辅助设计的基础，我们设计意图和设计过程，都需要借助图形图像来表达。在开始实际的图像转换工作之前，我们需要理解两种基本的数字图像表示方式：像素图（栅格图像）和矢量图。这两种格式各有特点，在数字设计中扮演着不同的角色。
像素图（Raster Images）
像素图，也称为位图或栅格图像，是由像素点阵列组成的图像。每个像素都包含特定的颜色信息，共同构成完整的图像。
像素图的特点：
- 分辨率依赖：放大时会失真
- 文件较大：需要存储每个像素的信息
- 适用于：照片等连续色调的图像
- 常见格式：JPG、PNG、BMP等
像素图如果放的足够大，就可以看到一个个由色块组成的小方格，图片也开始变得模糊
矢量图（Vector Graphics）
矢量图是基于数学方程式描述的图形，由点、线、曲线和形状等几何元素组成。
矢量图的特点：
- 分辨率独立：可无损缩放
- 文件较小：仅存储图形元素的数学描述
- 适用于：标志、图标、技术图纸等
- 常见格式：SVG、AI、EPS等
经过矢量化后的 SVG 图像，理论上可以“无限”放大
:::tips 在数字制造中，正确选择和转换图像格式直接影响到最终的制作质量。例如，激光切割通常需要清晰的矢量路径，而 3D 打印的材质贴图则适合使用像素图。了解这些基础概念有助于我们在后续的数字制造过程中做出正确的技术选择。
:::
1. 图片去背景
首先，我从 Google Arts & Culture 平台获取了高分辨率的壁画图像（https://g.co/arts/vR6XPac9VrxZzyzX8）的截图，以 PNG 格式保存，图像尺寸 2770x1372，约 4.5MB 大小。
图像处理我使用自己熟悉的 Photoshop（PS）。在 PS 里打开壁画图像后，PS 以悬浮窗的形式提供了一个移除背景的功能。
在 PS 里打开壁画图像
点击“移除背景”按钮后，可以看到有大部分背景被去掉了，但还有些错误，有些该被去掉的被保留，有些需要被保留的被去掉了。
使用移除背景功能后图像的效果，可以看到出现了一些错误
注意右侧图层添加了一个蒙版，如下图所示。蒙版可以理解为一个黑白图像，黑色部分就代表被隐藏，白色部分代表被保留。
PS 在使用移除背景后，为图像添加了一个蒙版，这个蒙版可以理解为一个灰度图像，黑色表示要移除的区域，白色为要显示的区域，中间灰度为透明度
我们可以通过下方的工具，以及快速选择工具、画笔工具等编辑这个黑白蒙版，来修正那些需要被隐藏或显示的内容。另外，可以使用键盘的“x”键在“从蒙版中去除”或“添加到蒙版”功能之间快速切换；还可以使用键盘的“[”与“]”按键来控制画笔粗细，以方便进行精确的细节修描。
经过修描蒙版后，现在看上去是期望的去背景效果，保存 ps 文件。
然后使用 PS 的导出功能，可以在预览看到，如果保存为 png 有 2.5MB，因为这张图颜色数较少，如果想进一步减少文件尺寸，可以勾选“较小文件（8 位）”，这样图像使用的颜色会被控制在 256 色范围内，使用此模式可以将图片大小降低到 598KB。
现在，成功获得了一张去了背景的 PNG 格式的透明背景图像。
2. 转为黑白线稿
- **复制并去色：**在 PS 中继续，在图层面板将原彩色图层复制一个图层（快捷键 Ctrl+J，mac 为 command+J），然后对复制后的图层去色，可以使用菜单栏的 图像>调整>去色 命令（快捷键 Ctrl+Shift+U，mac 为 command+Shift+U），效果如下图所示：
添加了灰度调整层后的图像效果。
- 复制并反向：在 PS 中继续复制刚才的去色图层，然后进行反向可以使用菜单栏的 图像>调整>反向（快捷键 Ctrl+I，mac 为 command+I），效果如下图所示：
反色后的图像效果
- 颜色减淡：在 PS 中将反色后的图层的混合模式改为颜色减淡，这时图像会变成白色，如下图所示。
设置反色图像的混合模式为“颜色减淡”。
- 使用“最小值”滤镜：使用菜单栏的 滤镜>其他>最小值 ，通常半径数值设置为 1 就足够了。效果如下图所示。
使用最小值滤镜后的效果
- 盖印图层：选中拷贝的 2 个图层，用快捷键 Ctrl+Alt+E（mac command+Alt+E）盖印所选图层，然后将原来的图层编组然后关闭可见性，图层面板状态如下图所示。
盖印图层后的图层状态
- 根据色彩范围选择线条：在合并后的图层上，使用菜单的 选择>色彩范围 工具，吸取线条颜色色，然后调整颜色容差。这时可以打开选取预览，设置“快速蒙版”，红色区域就是要抹掉的部分。确保必要的线条部分被保留后确定。
调整颜色范围，用吸管工具加减线条和背景，并调整颜色容差，让需要的线条范围被保留下来
对获得的线条选区建立蒙版，现在图片只有线条部分的内容了。
对获得的线条选区建立蒙版，现在图像只剩下线条
- 让线条更清晰：对图层（注意不是蒙版）使用菜单的 图像>调整>色相/饱和度 命令（快捷键 Ctrl+U，mac command+U），打开色相/饱和度面板，将明度滑块拉到最左侧（-100）的位置，现在可以看到清晰的线条效果了，如下图所示。
色相/饱和度面板下，将明度设置为-100 的效果。
- 导出线稿图像：现在可以将清晰的线稿导出为 PNG 格式，将此图像置于白色背景下的效果如下图所示。
导出干净的线稿图像效果
3. 黑白线稿矢量化
我使用 Adobe Illustrator（AI）将线稿矢量化。导入线稿 png 图片后，对图片使用菜单栏的 对象>图像描摹 功能，很快就能得到矢量图像，如下图所示。
AI 中经过描摹后的图像
放大后可以看到矢量化后的细节。
经过矢量化的线稿图像
将描摹后的图像导出为 SVG 格式，与彩色初稿对比。
矢量化线稿与彩色原稿对比