[使用场景](https://openscreenshot.app/zh-cn/use-cases/)

# 如何为帮助文档和教程制作截图

让教程截图保持相同尺寸，为步骤编号，突出正确的控件，并把每个文件保存到文档文件夹。

作者 [OpenScreenShot](https://github.com/pghqdev/OpenScreenShot)

为帮助文档和教程截图时，用同样的方式截取每个界面，为操作编号，并以相同宽度导出每张图片。在 OpenScreenShot 中，在**导出**对话框的**缩放比例**下设置精确的像素宽度，为每个操作添加**步骤编号**徽标，并用 **Spotlight（聚光）** 把读者引向正确的控件。`Docs/{title}` 这样的文件名模板会把每张图片保存到“下载”内的一个文件夹中。

## 逐步制作教程截图

1. 为文章中的每次截图把浏览器窗口设为相同大小。每次使用相同的主题和缩放级别。
2. 截取界面。右键菜单中的**选定区域**或**截取元素**会让图片只包含该步骤涉及的界面部分。
3. 在**编辑器**中，按读者使用的顺序在每个控件上添加一个**步骤编号**（`S`）。
4. 当界面上有很多其他内容时，在重要区域上添加 **Spotlight（聚光）**（`O`）。
5. 用**模糊**（`B`）和**纯色**填充盖住示例客户数据、真实邮箱地址和 API 密钥。
6. 如有需要，打开顶栏中的 **Beautify**，添加内边距、圆角和阴影。
7. 点击**保存图片**。在**导出**对话框中选择 **PNG**，在**缩放比例**下输入你的页面宽度，检查文件名，然后点击**导出**。

## 让每张图片保持相同尺寸

当一篇文章中的截图尺寸逐步变化时，读者会注意到。在**缩放比例**下选择 25、50、100 或 200 %，或输入精确的像素宽度。固定宽度能让文章中的每张图片与你文档网站的内容栏对齐。

在**导出**对话框中开启**记住这些设置**，把格式和质量保留为新的默认值。宽度不属于这些默认值，因此每次导出都要重新输入。超过 Chrome 画布限制的宽度会被拒绝，因此扩展绝不会写出空文件。

PNG 是无损格式，因此能让界面文字保持清晰。只有当你的文档平台限制文件大小时，才使用 JPEG 或 WebP。

## 让步骤编号保持顺序

**步骤编号**徽标会自动递增：第一次点击放置 1，下一次放置 2。删除一个徽标后，其余徽标会重新编号，因此你可以删掉一个步骤，而不必修改它后面的每个编号。让图片中的编号与文章中的编号列表一致。

用 `1`–`8` 键选择八色调色板中的颜色。编辑器会跨会话记住你的颜色、线宽和字号，因此同一篇文章的截图保持相同的样式。

## 突出显示和加边框

**Spotlight（聚光）** 让一个或多个区域保持明亮，并调暗其余部分。镂空区域可以是矩形、圆角矩形或椭圆。对于很长的设置页面，**Cut（裁切）** 工具（`X`）可删除读者不需要的水平条带，并在应用前实时预览。

**Beautify** 面板（[文档](https://openscreenshot.app/zh-cn/docs/#annotate)中也称为 Beautify）会在截图周围添加内边距、圆角半径、投影和背景。边框会进入每次导出和剪贴板。选定一种预设，并在文档的每张图片中使用它。

## 为图片命名和归档

从弹出窗口或工具栏图标的右键菜单打开**设置**，然后编辑**文件名模板**。点击一个标记即可插入 `{date}`、`{time}`、`{title}`、`{domain}`、`{w}` 或 `{h}`，并查看实时预览。

添加 `/` 可保存到“下载”内的文件夹中。例如，`Docs/{title}` 会把每张图片保存到 `Docs` 文件夹中，并以页面标题命名。`{title}` 标记会替换文件名不能包含的字符，因此页面标题中的 `/` 不会创建另一个文件夹。**导出**对话框会在保存前显示文件名，你可以在那里编辑它。

## 限制

产品变化后，界面截图就会过时。在文件名中保留页面标题或网址，方便你找到并替换旧图片。浏览器截图只显示页面内容；它不包含地址栏或浏览器工具栏。

[导出参考](https://openscreenshot.app/zh-cn/docs/#export)和[设置参考](https://openscreenshot.app/zh-cn/docs/#settings)列出了每个选项。要为帖子准备图片，请参阅[在社交媒体上分享截图](https://openscreenshot.app/zh-cn/use-cases/social-media/)。

## 继续阅读

[阅读文档](https://openscreenshot.app/zh-cn/docs/)、[浏览所有指南](https://openscreenshot.app/zh-cn/blog/)，或[获取截图帮助](https://openscreenshot.app/zh-cn/support/)。

---

Canonical page: https://openscreenshot.app/zh-cn/use-cases/documentation/