企业官网建设流程全解析

Penpot 怎么设置导出预设，批量导出多图层为 PNG、SVG、PDF 等多种格式

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot

在 Penpot 里完成设计后，经常需要把若干图层导出成 PNG、SVG 或 PDF 交给开发或分享。Penpot 的做法是先给图层设置"导出预设"（export preset）——每一条预设包含尺寸比例、文件名后缀和文件格式三项；之后无论是单个图层还是整页批量导出，都会按这些预设一次产出多个文件。本文基于 Penpot 官方文档说明完整的设置与批量导出流程，适用于 Penpot 的设计工作区（workspace）和查看模式（View mode）。

给图层创建导出预设

在画布中选中要导出的图层，在 Design 面板找到 Export 区块，点击 "+" 按钮即可为该图层添加一条导出预设。每条预设可以独立配置以下选项：

• Size——最常见的导出比例档位（如 1x、2x 等）；
• Suffix——文件名后缀，在按不同比例导出时用来区分文件；
• File format——支持 PNG、JPEG、WEBP、SVG、PDF 五种格式。

同一个图层可以设置任意多条预设：例如同时加上1x / PNG和2x / SVG，导出时一次点击就能得到该图层的两种文件。这与"批量"的核心思路一致——预设定义"导出什么、什么格式、什么比例"，批量导出只是把这一套配置应用到选中的多个元素上。

要移除一条预设，选中图层后点击对应预设上的 "-" 按钮即可。

批量导出多个图层

预设设置好之后，批量导出按下面路径操作：

1. 框选要导出的元素。被选中元素上已有的导出预设会一并参与导出；也可以在多选状态下继续新增预设，新增的配置同样会应用在这次批量导出中。
2. 发起导出。从主菜单进入 Export，或直接使用快捷键：Windows/Linux 为Ctrl+Shift+E，macOS 为⌘+⇧+E（对应"Export shapes"这一快捷键条目）。从主菜单或快捷键发起时，导出范围是：有选区则包含选区内所有预设，没有选区则包含整页所有预设。
3. 确认导出清单。在确认批量导出之前，会弹出一个配置面板，可以核对每个条目的名称、尺寸和格式，并取消掉本次不想导出的条目——这是批量导出前最后一次筛选机会。
4. 查看进度与错误。导出开始后会有一个弹窗显示进度，如果个别条目失败，错误也会在这个弹窗中列出。

把整页 Artboard 导出为单个 PDF

如果你的目标是把一整页展示型内容（演示稿、课程材料等）导出成一个可以在没有 Penpot 账号的情况下分发的文件，可以走另一条路径：从文件菜单把当前页面的所有 artboard 导出到同一个 PDF 文件中。这和按预设逐个导出 PDF 不同，它生成的是包含整页内容的单一文档，适合离线使用。

导出 PDF 时的两个已知限制

官方文档明确给出了 PDF 导出的两条技术说明，导出后如果发现异常可先对照这里判断：

• PDF 走矢量格式但转换不保证 100% 还原。Penpot 导出的 PDF 会利用 PDF 矢量特性（无级缩放、文字可选中复制），但不能保证 SVG 的全部特性都完美转换，导出文件与 Penpot 内显示可能存在差异。文档给出的替代方案：先导出 PNG，再用其他工具把 PNG 转成 PDF。
• 带蒙版（mask）的图层在部分开源阅读器中不显示。这是底层 poppler 库的已知问题，并非 Penpot 的缺陷：用 evince 或 Inkscape 打开可能看不到蒙版效果，而用 Adobe 官方阅读器、Okular，或 Chrome、Firefox 浏览器打开则显示正常。

查看模式下也能用这些预设

导出预设不只在工作区有效：在 View mode 打开 Code 标签页时，Info 面板底部同样提供导出入口，并且会读取工作区里已经设置的同一批预设。需要注意的限制是：在 Code 模式中新加的导出预设不会持久保存，正式配置还是应回到工作区的 Design 面板完成。

进一步阅读

如果需要导出或导入整个 Penpot 文件（.penpot格式），而不是导出图层资源，可参考 Export & Import Penpot files；本场景的完整源文档见 Exporting layers。

【免费下载链接】penpotPenpot: The open-source design platform for Product teams that need scalable collaboration.项目地址: https://gitcode.com/GitHub_Trending/pe/penpot