尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

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

Penpot 怎么设置导出预设,批量导出多图层为 PNG、SVG、PDF 等多种格式 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导出时一次点击就能得到该图层的两种文件。这与批量的核心思路一致——预设定义导出什么、什么格式、什么比例批量导出只是把这一套配置应用到选中的多个元素上。要移除一条预设选中图层后点击对应预设上的 - 按钮即可。批量导出多个图层预设设置好之后批量导出按下面路径操作框选要导出的元素。被选中元素上已有的导出预设会一并参与导出也可以在多选状态下继续新增预设新增的配置同样会应用在这次批量导出中。发起导出。从主菜单进入 Export或直接使用快捷键Windows/Linux 为CtrlShiftEmacOS 为⌘⇧E对应Export shapes这一快捷键条目。从主菜单或快捷键发起时导出范围是有选区则包含选区内所有预设没有选区则包含整页所有预设。确认导出清单。在确认批量导出之前会弹出一个配置面板可以核对每个条目的名称、尺寸和格式并取消掉本次不想导出的条目——这是批量导出前最后一次筛选机会。查看进度与错误。导出开始后会有一个弹窗显示进度如果个别条目失败错误也会在这个弹窗中列出。把整页 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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表