[使用案例](https://openscreenshot.app/zh-tw/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-tw/docs/#annotate)中稱為美化，會在截圖周圍加上邊距、圓角半徑、陰影和背景。外框會包含在每次匯出和剪貼簿中。選定一種風格，並用在文件中的每張圖片上。

## 為圖片命名並歸檔

從彈出式視窗或工具列圖示的右鍵選單開啟**設定**，再編輯**檔名範本**。點一個代號即可插入 `{date}`、`{time}`、`{title}`、`{domain}`、`{w}` 或 `{h}`，並查看即時預覽。

加上 `/` 即可存到「下載」內的資料夾。例如，`Docs/{title}` 會把每張圖片存到 `Docs` 資料夾，並以網頁標題命名。`{title}` 代號會替換檔名無法容納的字元，所以網頁標題中的 `/` 不會建立另一個資料夾。**匯出**對話框會在儲存前顯示檔名，你也可以在那裡編輯。

## 限制

產品變更後，介面截圖就會過時。請把網頁標題或網址保留在檔名中，方便你找出並替換舊圖片。瀏覽器截圖只顯示網頁內容；它不包含網址列或瀏覽器工具列。

[匯出參考](https://openscreenshot.app/zh-tw/docs/#export)和[設定參考](https://openscreenshot.app/zh-tw/docs/#settings)列出所有選項。要為貼文準備圖片，請參閱[在社群媒體上分享截圖](https://openscreenshot.app/zh-tw/use-cases/social-media/)。

## 繼續閱讀

[閱讀說明文件](https://openscreenshot.app/zh-tw/docs/)、[瀏覽所有指南](https://openscreenshot.app/zh-tw/blog/)，或[取得擷取方面的協助](https://openscreenshot.app/zh-tw/support/)。

---

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