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

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

逐步制作教程截图

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

让每张图片保持相同尺寸

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

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

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

让步骤编号保持顺序

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

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

突出显示和加边框

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

Beautify 面板（文档中也称为 Beautify）会在截图周围添加内边距、圆角半径、投影和背景。边框会进入每次导出和剪贴板。选定一种预设，并在文档的每张图片中使用它。

为图片命名和归档

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

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

限制

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